Bootstrap 3 超大屏幕( Jumbotron )

Bootstrap 3 添加了一个有趣的 CSS .jumbotron 用于处理超大屏幕问题

超大屏幕( Jumbotron ) 顾名思义该组件可以增加标题的大小，为页面内容添加更多的外边距( margin )

图片有点糊了，因为，内容区块太窄了....

Bootstrap 3 .jumbotron 使用方式如下

创建一个带有 class .jumbotron . 的容器 <div>
除了更大的 <h1>，字体粗细 font-weight 被减为 200

<div class="container">
   <div class="jumbotron">
        <h1>简单教程欢迎你</h1>
        <p>为什么生日蜡烛要一口气吹灭</p>
        <p><a class="btn btn-primary btn-lg" role="button">学习更多</a>
      </p>
   </div>
</div>

运行范例 »

运行以上范例，输出结果如下

超大屏幕( Jumbotron )

全屏

为了获得占用全部宽度且不带圆角的超大屏幕，需要在所有的 .container CSS class 外使用 .jumbotron class

<div class="jumbotron">
    <div class="container">
        <h1>简单教程欢迎你</h1>
        <p>为什么生日蜡烛要一口气吹灭</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
        </p>
    </div>
</div>

运行范例 »

运行以上范例，输出结果如下

全宽的超大屏幕( Jumbotron )