Bootstrap 进度条
基本进度条
进度条可用于告知用户他们在一个过程中的进度。
Bootstrap 提供了几种类型的进度条。
Bootstrap 中的默认进度条如下所示
要创建默认进度条，请将 `.progress` 类添加到 `
` 元素中
示例
<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-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>
自己动手试一试 »
