Bootstrap 进度条
最后更新于：2022-03-26 23:04:53
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>
<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 动态地调整进度条的宽度。这样，就可以掌握进度行为。
在创建进度条时，您可以使用其他的颜色。
带有其他颜色的进度条实例
实例
<div class=”container”>
<div class=”row”>
<div class=”span4″>
<h3>进度条也可能有其他颜色</h3>
<div class=”progress progress-info progress-striped” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 20%”></div>
</div>
<div class=”progress progress-success progress-striped active” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 40%”></div>
</div>
<div class=”progress progress-warning progress-striped” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 60%”></div>
</div>
<div class=”progress progress-danger progress-striped active” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 80%”></div>
</div>
</div>
</div>
</div>
<hr>
</div> <!– /container –>
<div class=”row”>
<div class=”span4″>
<h3>进度条也可能有其他颜色</h3>
<div class=”progress progress-info progress-striped” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 20%”></div>
</div>
<div class=”progress progress-success progress-striped active” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 40%”></div>
</div>
<div class=”progress progress-warning progress-striped” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 60%”></div>
</div>
<div class=”progress progress-danger progress-striped active” style=”margin-bottom: 9px;”>
<div class=”bar” style=”width: 80%”></div>
</div>
</div>
</div>
</div>
<hr>
</div> <!– /container –>
浏览器支持
我们已经在不同的浏览器中测试了上面的两个实例。我们发现，在 Firefox 12 和 Chrome 19.0.1084.52 中能正常显示，但是在 Opera 11.62 中不能显示动画效果，即便您可以看到条纹和梯度。在 Internet Explorer 8 中，所有的显示效果都不佳，没有动画，也没有条纹和梯度。