Bootstrap教程 巨幕(Jumbotron)

巨幕(Jumbotron)这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。
巨幕创建步骤
    ■ 创建一个带有 class .jumbotron. 的容器 <div>
    ■ 除了更大的 <h1>,字体粗细 font-weight 被减为 200px。

Hello, world!

这是一个超大屏幕(Jumbotron)的实例。

Learn more

  1.  <div class="jumbotron">
  2.   <h1>Hello, world!</h1>
  3.   <p>这是一个超大屏幕(Jumbotron)的实例。</p>
  4.   <p><a class="btn btn-primary btn-lg" href="https://www.511yj.com/category/classification/bootstrap" role="button">Learn more</a></p>
  5. </div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有 .container 元素的外面,并在组件内部添加一个 .container 元素。这样适合做宽屏的logo.
  1.  <div class="jumbotron">
  2.   <div class="container">
  3.   <h1>Hello, world!</h1>
  4.   <p>这是一个超大屏幕(Jumbotron)的实例。</p>
  5.   <p><a class="btn btn-primary btn-lg" href="https://www.511yj.com/category/classification/bootstrap" role="button">Learn more</a></p>
  6.   </div>
  7. </div>

分享到:

用微信扫一扫,分享给朋友


发布日期:

所属分类: Bootstrap、前端 标签: