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>

尝试一下

输出结果如下：

绿色

橙色

红色

默认进度条

进度条高度

进度栏标签

彩色进度条

条纹进度条

动画进度条

多个进度条

相关页面