Bootstrap Jumbotron 和页眉


创建一个大屏幕

大屏幕表示一个大盒子,用于引起人们对某些特殊内容或信息的额外注意。

大屏幕显示为带圆角的灰色框。它还放大了其中文本的字体大小。

提示:在大屏幕中,您可以放置​​几乎任何有效的 HTML,包括其他 Bootstrap 元素/类。

用一个<div>具有类的元素.jumbotron创建一个大屏幕:

Bootstrap教程

Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。


集装箱内的大屏幕

将大屏幕放入<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-headerclass 在标题下添加一条水平线(+ 在元素周围添加一些额外的空间):

用一个<div>具有类的元素.page-header创建页眉:

示例

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