Bootstrap Jumbotron

  • 定义和使用

    Jumbotron 表示一个大的灰色方框,用于引起人们对某些特殊内容或信息的额外注意。
    将 <div> 元素与类 .jumbotron 一起使用以创建一个大的灰色方框:
    <div class="jumbotron">
       <h1>菜鸟教程</h1>
       <div>菜鸟教程的 Slogan 为:编程始于足下!</div>
    </div>
    
    尝试一下
    预览结果如下:
    菜鸟教程
    菜鸟教程的 Slogan 为:编程始于足下!
    提示:在巨型加速器内,您可以放入几乎任何有效的HTML,包括其他Bootstrap元素/类。
  • 满屏宽的 Jumbotron

    如果要使用不带圆角边框的全宽的灰色方框,请在其中添加 .jumbotron-fluid 类和一个 .container.container-fluid
    <div class="jumbotron jumbotron-fluid">
       <div class="container">
          <h1>菜鸟教程</h1>
          <div>菜鸟教程的 Slogan 为:编程始于足下!</div>
       </div>
    </div>
    
    尝试一下