Bootstrap 进度条
在本教程中，您将学习如何使用 Bootstrap 创建进度条。
使用 Bootstrap 创建进度条
进度条可用于向用户显示任务或操作的进度。
以下示例将向您展示如何创建一个带有垂直渐变的简单进度条。
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>— 上面示例的输出将如下所示：
注意： 包装器，即 .progress 元素表示进度条的最大值，而内部的 .progress-bar 元素表示到目前为止的进度。 此外，.progress-bar 需要内联样式或自定义 CSS 来设置其宽度。
使用标签创建进度条
您也可以将进度状态显示为百分比标签，只需将文本放在 .progress-bar 元素中即可，如下例所示：
<div class="progress">
<div class="progress-bar" style="width: 60%">
60%
</div>
</div>— 上面示例的输出将如下所示：
如果您正在显示百分比标签，您还应该将 min-width 应用于进度条，以确保即使百分比较低，标签文本仍然可读，如下所示：
<div class="progress">
<div class="progress-bar" style="min-width: 20px;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="min-width: 20px; width: 2%;">
2%
</div>
</div>设置进度条的高度
进度条的默认高度是16px，但你也可以根据需要设置它的高度，方法是在.progress元素上设置CSS height属性，像这样 ：
<!-- Progress bar with 2px height -->
<div class="progress" style="height: 2px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<!-- Progress bar with 20px height -->
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>— 上面示例的输出将如下所示：
创建剥离的进度条
要创建剥离的进度条，只需向 .progress-bar 元素添加一个额外的类 .progress-bar-striped，如下例所示：
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
</div>— 上面示例的输出将如下所示：
提示：条纹是通过 CSS 渐变在进度条背景颜色上生成的。 请参阅 CSS3 渐变上的教程以了解如何使用 CSS 创建渐变颜色。
创建动画进度条
您还可以为剥离的进度条设置动画。 将类 .progress-bar-animated 添加到 .progress-bar 元素中，它将通过CSS3 动画从右到左为条纹设置动画。
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>— 上面示例的输出将如下所示：
动态更改进度条值
静态进度条不是很令人印象深刻。 下面的示例将让您大致了解如何使用 jQuery 动态更新 Bootstrap 进度条的状态。
<script>
var i = 0;
function makeProgress(){
if(i < 100){
i = i + 1;
$(".progress-bar").css("width", i + "%").text(i + "%");
}
// 在再次运行此脚本之前等待一段时间
setTimeout("makeProgress()", 100);
}
makeProgress();
</script>创建堆叠进度条
您还可以在一个进度组件中放置多个进度条以堆叠它们。
这是一个演示它实际工作原理的示例。
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">
Program Files (40%)
</div>
<div class="progress-bar bg-warning" style="width: 25%">
Residual Files (25%)
</div>
<div class="progress-bar bg-danger" style="width: 15%">
Junk Files (15%)
</div>
</div>— 上面示例的输出将如下所示：
创建不同颜色的进度条
您还可以使用背景颜色实用程序类创建各种颜色的进度条，以通过颜色传达含义，如下例所示：
<div class="progress">
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 90%"></div>
</div>— 上面示例的输出将如下所示：
制作不同颜色的条纹进度条
与纯色类似，您也可以使用相同的背景颜色实用程序类创建不同颜色的条纹进度条。 让我们看一下下面的例子：
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
</div>— 上面示例的输出将如下所示：
