Bootstrap 超大屏幕和页眉
创建超大屏幕
Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。
提示: Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。
我们可以通过在 <div>
元素中添加 .jumbotron
类来创建 jumbotron:
Bootstrap 教程
Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。
容器内的超大屏幕
如果不想让 Jumbotron 延伸到屏幕边缘,请将 Jumbotron 放在 <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>
亲自试一试 »
容器外的超大屏幕
如果希望 Jumbotron 延伸到屏幕边缘,请将 Jumbotron 放置在 <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
类在标题下添加了一条水平线( + 在元素周围添加了一些额外的空间):
页眉实例
使用带有 .page-header
类的 <div>
元素创建页眉: