Bootstrap 进度条
基本进度条
进度条可以显示用户任务的完成过程。
Bootstrap 提供了几种类型的进度条。
Bootstrap 中的默认进度条如下所示:
要创建默认进度条，请添加一个带有 .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-* 属性。
进度条标签
可以在进度条内添加文本，如进度的百分比:
从进度栏中删除 .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
以下示例显示了如何使用不同的上下文类创建进度条:
实例
<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>
亲自试一试 »
有条纹的进度条
使用 .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>
亲自试一试 »
动画进度条
使用 .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>
亲自试一试 »
