Bootstrap 进度条
简介
在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
基本的、条纹的和动画的进度条实例
实例
<div class="container">
<div class="row">
<div class="span4">
<h3>一个基本的垂直方向进度条</h3>
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
<h3>条纹进度条,使用梯度来创建一个条纹的效果</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>一个动画进度条</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>
<hr>
</div> <!-- /container -->
<div class="row">
<div class="span4">
<h3>一个基本的垂直方向进度条</h3>
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
<h3>条纹进度条,使用梯度来创建一个条纹的效果</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>一个动画进度条</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>
<hr>
</div> <!-- /container -->
在线查看实例
请注意，如果要显示第三种进度条，请添加 '.active' class 来让它具有运动感。Bootstrap 使用 css3 过渡效果创建这个动画。您也可以通过 JavaScript 动态地调整进度条的宽度。这样，就可以掌握进度行为。
在创建进度条时，您可以使用其他的颜色。