Bootstrap 进度条


基本进度条

进度条可以显示用户任务的完成过程。

Bootstrap 提供了几种类型的进度条。

Bootstrap 中的默认进度条如下所示:

70% Complete

要创建默认进度条,请添加一个带有 .progress 类的 <div> 元素:

实例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>
亲自试一试 »

注意: Internet Explorer 9 及更早版本不支持进度条(它们使用 CSS3 转换和动画来实现某些效果)。

注释: 为了帮助提高使用屏幕阅读器的人的可访问性,您应该包括 aria-* 属性。


进度条标签

可以在进度条内添加文本,如进度的百分比:

70%

从进度栏中删除 .sr-only 类以显示可见百分比:

实例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>
亲自试一试 »


不同颜色的进度条

Bootstrap 还提供了以下颜色的进度条:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% 完成(成功)
50% 完成(信息)
60% 完成(警告)
70% 完成(危险)

以下示例显示了如何使用不同的上下文类创建进度条:

实例

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% 完成(成功)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% 完成(信息)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% 完成(警告)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% 完成(危险)
  </div>
</div>
亲自试一试 »

有条纹的进度条

40% 完成(成功)
50% 完成(信息)
60% 完成(警告)
70% 完成(危险)

使用 .progress-bar-striped 类来设置条纹进度条:

实例

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% 完成(成功)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% 完成(信息)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% 完成(警告)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% 完成(危险)
  </div>
</div>
亲自试一试 »

动画进度条

40%

使用 .active 类可以为进度条添加动画:

实例

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>
亲自试一试 »

堆叠的进度条

进度条也可以堆叠:

可用空间
警告
危险

通过将多个进度条放入同一个 <div class="progress"> 创建堆叠的进度条:

实例

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>
亲自试一试 »

学习训练

练习题:

添加正确的类,使此 HTML 代码表现为进度条。

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>

开始实验