<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
在这个例子中,进度条的宽度通过 style 属性设置为 50%,表示进度的一半。你可以调整这个值来表示不同的进度。
如果你想要一个带有标签的进度条,可以像下面这样使用 span 元素:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">75% Complete</span>
</div>
</div>
这个例子中,sr-only 类被用于屏幕阅读器用户,以确保它们能够访问到进度的信息。
如果你希望进度条具有动画效果,你可以添加 progress-bar-animated 类:
<div class="progress">
<div class="progress-bar progress-bar-animated" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
以上代码片段展示了 Bootstrap 中的基本进度条用法。你可以根据具体需求自定义样式、颜色和其他属性。确保引入了正确版本的 Bootstrap 样式文件,以便进度条正常显示。
转载请注明出处:http://www.zyzy.cn/article/detail/12624/Bootstrap