第十六谈：大块屏和旋转特效

本节课我们来开始学习 Bootstrap 的提供的旋转特效和大块屏功能。

一．大块屏

1. 大块屏.jumbotron 是为了展示一些核心内容或广告内容的区域；

      <div class="jumbotron">
          <h1 class="display-4">Bootstrap4.x</h1>
          <p class="text-muted">这里是标题简介！</p>
          <hr>
          <p class="lead">这里是各种内容区域！</p>
          <p class="lead">
              <button class="btn btn-success btn-lg">按钮</button>
          </p>
      </div>

二．旋转特效

1. 通过.spinner-border 实现类 loading...的旋转特效的功能；

      <div class="spinner-border"></div>

2. 使用.text-success(或其它)给旋转特效增加各种颜色；

      <div class="spinner-border text-success"></div>
      <div class="spinner-border text-info"></div>
      <div class="spinner-border text-warning"></div>
      <div class="spinner-border text-danger"></div>

3. 使用.spinner-grow 可以实现渐变式 loading...特效；

      <div class="spinner-grow"></div>

4. 使用.m-5(margin)外边距来跳转距离，如果精确就用普通的 CSS；

      <div class="spinner-grow m-5"></div>

5. 通过.spinner-broder-sm 或.spinner-grow-sm 实现特效尺寸的大小；

      <div class="spinner-border spinner-border-sm"></div>
      <div class="spinner-grow spinner-grow-sm"></div>

6. 通过.text-center，将特效当作文本进行左中右排列，flex 方式雷同；

      <div class="text-center">
          <div class="spinner-border"></div>
      </div>

7. 结合 button 按钮和文本，实现禁用状态下的 loading...；

      <button class="btn btn-info" disabled>
          <div class="spinner-border spinner-border-sm"></div>
          <span>
              Loading...
          </span>
      </button>