Bootstrap 超大屏幕(Jumbotron)与页眉

创建一个 Jumbotron(超大屏幕)

jumbotron 表示对某些特殊内容或信息进行额外关注的大屏幕区域。

jumbotron 显示为带圆角的灰色框,它还可以放大其中文本的字体大小。

提示:在 jumbotron 中,几乎可以放置任何有效的 HTML,包括其他 Bootstrap 元素/样式类。

在类中使用 <div> 元素以及 .jumbotron 类来创建一个 jumbotron:

Bootstrap 教程

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


容器中的 Jumbotron

如果不想让 jumbotron 延伸到屏幕边缘,请将 jumbotron 放在 <div class="container"> 内:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <div class="jumbotron">
  12. <h1>Bootstrap 教程</h1>
  13. <p>Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 web 上开发响应式的移动优先项目。</p>
  14. </div>
  15. <p>这是一些文本</p>
  16. <p>这是另外一些文本</p>
  17. </div>
  18. </body>
  19. </html>

容器外的 Jumbotron

如果您想让 jumbotron 延伸到屏幕边缘,请将 jumbotron 放置在 <div class="container"> 外部:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="jumbotron">
  11. <h1>Bootstrap 教程</h1>
  12. <p>Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 web 上开发响应式的移动优先项目。</p>
  13. </div>
  14. <div class="container">
  15. <p>这是一些文本</p>
  16. <p>这是另外一些文本</p>
  17. </div>
  18. </body>
  19. </html>

创建一个页眉

页眉就像一个区域的分隔符。

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

页眉实例


在类中使用 <div> 元素以及.page-header 类来创建页眉:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <div class="page-header">
  12. <h1>页眉样式</h1>
  13. </div>
  14. <p>这是一些文本</p>
  15. <p>这是另外一些文本</p>
  16. </div>
  17. </body>
  18. </html>