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%</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>
自己试试 »
彩色进度条
上下文类用于通过颜色提供 "意义"。
可用于进度条的上下文类为
.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%">
空闲空间
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
警告
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
危险
</div>
</div>
自己试试 »
