最新的Web开发教程
 

Bootstrap Jumbotron and Page Header


创建一个超大屏幕

一个超大屏幕指示呼吁加倍注意一些特殊的内容或信息的大箱子。

一个超大屏幕显示为带圆角的灰色框。 它还扩大它里面的文本的字体大小。

提示:在一个超大屏幕,你可以把几乎任何有效的HTML,包括其他Bootstrap要素/班。

使用<div>元素和类.jumbotron创建一个超大屏幕:

Bootstrap教程

Bootstrap是最流行的HTML,CSS和JS在网络上开发反应灵敏,移动第一批项目的框架。


超大屏幕集装箱内

将内部的超大屏幕<div class="container">如果您希望以超大屏幕不延伸到屏幕边缘:

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
试一试»

超大屏幕外容器

将外面的超大屏幕<div class="container">如果你想在超大屏幕延伸到屏幕边缘:

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
试一试»

创建页眉

页面标题就像一个节分隔符。

.page-header类添加一条水平线的标题下(+加元周围的一些额外的空间):

使用<div>与类元素.page-header创建一个网页标题:

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
试一试»