Bootstrap 进度条



  • 默认进度条

    进度条可用于向用户显示它在过程中走了多远/占了多少空间。
    要创建默认进度条,请将 .progress 类添加到容器元素,并将 .progress-bar 类添加到其子元素。 使用 CSS width 属性设置进度条的宽度:
    <div class="container-fluid">
       <div class="progress">
          <div class="progress-bar" style="width:30%"></div>
       </div>
       <div class="progress">
          <div class="progress-bar" style="width:50%"></div>
       </div>
       <div class="progress">
          <div class="progress-bar" style="width:90%"></div>
       </div>
    </div>
    
    输出结果如下:
  • 进度条高度

    默认情况下,进度条的高度为16px;使用 CSS height 属性进行更改;请注意,必须为进度容器和进度栏设置相同的高度:
    <div class="container-fluid">
       <div class="progress">
          <div class="progress-bar" style="width:30%"></div>
       </div>
       <div class="progress" style="height:20px">
          <div class="progress-bar" style="width:50%;height:20px"></div>
       </div>
       <div class="progress" style="height:40px">
          <div class="progress-bar" style="width:70%;height:40px"></div>
       </div>
    </div>
    
    输出结果如下:
  • 进度栏标签

    在进度栏中添加文本以显示可见的百分比:
    <div class="container-fluid">
       <div class="progress">
         <div class="progress-bar" style="width:70%">70%</div>
       </div>
    </div>
    
    输出结果如下:
    70%
  • 彩色进度条

    默认情况下,进度条为蓝色(主要); 使用 Bootstrap 背景类改变进度条的颜色:
    <div class="container-fluid">
     <div class="progress">
       <div class="progress-bar" style="width:10%">蓝色</div>
     </div>
     <div class="progress">
       <div class="progress-bar bg-success" style="width:20%">绿色</div>
     </div>
     <div class="progress">
       <div class="progress-bar bg-info" style="width:30%">绿松石</div>
     </div>
     <div class="progress">
        <div class="progress-bar bg-warning" style="width:40%">橙色</div>
     </div>
     <div class="progress">
       <div class="progress-bar bg-danger" style="width:50%">红色</div>
     </div>
     <div class="progress border">
       <div class="progress-bar bg-white" style="width:60%">白色</div>
     </div>
     <div class="progress">
       <div class="progress-bar bg-secondary" style="width:70%">灰色</div>
     </div>
     <div class="progress border">
       <div class="progress-bar bg-light" style="width:80%">浅灰色</div>
     </div>
     <div class="progress">
       <div class="progress-bar bg-dark" style="width:90%">深灰色</div>
     </div>
    </div>
    
    输出结果如下:
    蓝色
    绿色
    绿松石
    橙色
    红色
    白色
    灰色
    浅灰色
    深灰色
  • 条纹进度条

    使用 .progress-bar-striped 类向进度条添加条纹:
    <div class="container-fluid">
        <div class="progress">
          <div class="progress-bar progress-bar-striped" style="width:30%"></div>
        </div>
        <div class="progress">
           <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
        </div>
        <div class="progress">
           <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
        </div>
    </div>
    
    输出结果如下:
  • 动画进度条

    添加 .progress-bar-animated 类为进度条设置动画:
    <div class="container-fluid">
       <div class="progress">
         <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
       </div>
    </div>
    
    输出结果如下:
  • 多个进度条

    进度条也可以堆叠:
    <div class="container-fluid">
      <div class="progress">
        <div class="progress-bar bg-success" style="width:40%">
          绿色
        </div>
        <div class="progress-bar bg-warning" style="width:10%">
          橙色
        </div>
        <div class="progress-bar bg-danger" style="width:20%">
          红色
        </div>
     </div>
    </div>
    
    输出结果如下:
    绿色
    橙色
    红色