Bootstrap 进度条
在本教程中，您将学习如何使用 Bootstrap 创建进度条。
使用 Bootstrap 创建进度条
进度条可用于向用户显示任务或操作的进度。 以下示例将向您展示如何创建一个带有垂直渐变的简单进度条。
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>— 上面示例的输出将如下所示：
使用标签创建进度条
您还可以通过将文本放在 .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 属性来设置它的高度，像这样 ：
<!-- 1px 高度的进度条 -->
<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<!-- 20px 高度的进度条 -->
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>— 上面示例的输出将如下所示：
创建剥离的进度条
要创建剥离的进度条，只需在 .progress-bar 元素中添加一个额外的类 .progress-bar-striped，如下例所示：< /p>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
</div>— 上面示例的输出将如下所示：
创建动画进度条
您还可以为剥离的进度条设置动画。 将类 .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 进度条的状态。
<!-- 进度条 HTML -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
</div>
<!-- jQuery Script -->
<script type="text/javascript">
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>— 上面示例的输出将如下所示：
带有重点类的进度条
Bootstrap 还为进度条提供了一些强调实用程序类，可以进一步用于通过颜色传达含义，如下例所示：
<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>— 上面示例的输出将如下所示：
Advertisements