Bootstrap 超大屏幕（Jumbotron）与页眉
创建一个 Jumbotron（超大屏幕）
jumbotron 表示对某些特殊内容或信息进行额外关注的大屏幕区域。
jumbotron 显示为带圆角的灰色框，它还可以放大其中文本的字体大小。
提示：在 jumbotron 中，几乎可以放置任何有效的 HTML，包括其他 Bootstrap 元素/样式类。
在类中使用 <div> 元素以及 .jumbotron 类来创建一个 jumbotron:
Bootstrap 教程
Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 web 上开发响应式的移动优先项目。
容器中的 Jumbotron
如果不想让 jumbotron 延伸到屏幕边缘，请将 jumbotron 放在 <div class="container"> 内:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><div class="jumbotron"><h1>Bootstrap 教程</h1><p>Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 web 上开发响应式的移动优先项目。</p></div><p>这是一些文本</p><p>这是另外一些文本</p></div></body></html>
容器外的 Jumbotron
如果您想让 jumbotron 延伸到屏幕边缘，请将 jumbotron 放置在 <div class="container"> 外部:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="jumbotron"><h1>Bootstrap 教程</h1><p>Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 web 上开发响应式的移动优先项目。</p></div><div class="container"><p>这是一些文本</p><p>这是另外一些文本</p></div></body></html>
创建一个页眉
页眉就像一个区域的分隔符。
.page-header 类在标题下添加一条水平线（同时在元素周围添加一些额外的空间）:
页眉实例
在类中使用 <div> 元素以及.page-header 类来创建页眉:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><div class="page-header"><h1>页眉样式</h1></div><p>这是一些文本</p><p>这是另外一些文本</p></div></body></html>