4.7、Bootstrap V4自学之路------组件---广告屏

示例

单独的一个空的标签

<div class="jumbotron">
    <!-- 背景色是灰色的-->
<div>

PS：可以看出来，其中上下边距还是挺高的。

<div class="jumbotron">
  <h1 class="display-3">class="display-3"</h1>
  <p class="lead"> p class="lead".</p>
  <hr class="m-y-md">
  <p>这是个广告屏，充满了整个父标签。注意这是一个圆角边的。</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

要想让这个广告屏占满屏幕宽度、不带有圆角，请添加.jumbotron-fluid修饰类，并在里面添加一个.container 或 .container-fluid类。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">
        <p>div class="jumbotron jumbotron-fluid"</p>
        <p>--> class="container"</p>
        <p>--> --> 正文内容。</p>
    </p>
  </div>
</div>

PS：放在首页宣传不错，或者放在二级页面的上部。