Bootstrap 提供了简单易用的进度条组件,你可以通过以下代码来创建一个基本的进度条:
<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