第十五谈：分页和进度条

本节课我们来开始学习 Bootstrap 的提供的分页和进度条功能。

一．分页

1. 通过.pagination 和.page-item、.page-link 构建一个列表模式分页；

      <ul class="pagination">
          <li class="page-item">
              <a href="#" class="page-link">首页</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">1</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">2</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">3</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">4</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">5</a>
          </li>
          <li class="page-item">
              <a href="#" class="page-link">尾页</a>
          </li>
      </ul>

2. 在 li 标签下使用.disabled，可以禁用某个分页项目；

          <li class="page-item disabled">
              <a href="#" class="page-link">3</a>
          </li>

3. 直接将 a 标签替换为 span 标签，直接使链接失效但不会显示禁用的灰色样式；

          <li class="page-item">
              <span class="page-link">3</a></span>
          </li>

4. 通过.pagination-lg(或其它)来实现，分页样式的大小；

      <ul class="pagination pagination-lg">

5. 通过.justify-content-center(或其它)来实现，分页对齐方式；

      <ul class="pagination justify-content-center">

二．进度条

1. 通过.progress 和.progress-bar 构建一个进度条；

      <div class="progress">
          <div class="progress-bar" style="width:25%"></div>
      </div>

2. 使用.w-50 样式，也可以实现项目进度，只不过数值有局限；

      <div class="progress">
          <div class="progress-bar w-50"></div>
      </div>

3. 设置进度条高度，使用普通高度样式即可；

      <div class="progress" style="height: 20px;">
          <div class="progress-bar w-75"></div>
      </div>

4. 在进度条项目中，可以设置进度条的颜色；

      <div class="progress">
          <div class="progress-bar w-50 bg-danger"></div>
      </div>

5. 使用多组嵌套，可以实现进度条的进度样式；

      <div class="progress">
          <div class="progress-bar w-25 bg-success"></div>
          <div class="progress-bar w-25 bg-info"></div>
          <div class="progress-bar w-25 bg-warning"></div>
      </div>

6. 使用.progress-bar-striped 实现条纹进度条；

      <div class="progress">
          <div class="progress-bar progress-bar-striped w-75 bg-danger"></div>
      </div>

7. 在条纹进度条的基础上，使用.proress-bar-animated 实现动画效果；

      <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-danger">
              
          </div>
      </div>