1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - Jumbotron

Bootstrap - Jumbotron

本章将讨论Bootstrap支持的另一个功能，即Jumbotron。 顾名思义，这个组件可以选择性地增加标题的大小，并为登陆页面内容增加很多余量。 使用Jumbotron -

• 使用.jumbotron类创建容器<div>。

• 除了更大的

  之外， font-weight还减少到200px。

以下示例演示了这一点 -

<div class = "container">
   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
</div>

新页面打开

要获得一个全宽的jumbotron，并且没有圆角， .jumbotron在所有.container类之外使用.container类，而是在其中添加.container ，如下例所示 -

<div class = "jumbotron">
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
</div>

新页面打开