Bootstrap 3 之 Bootstrap 进度条

Bootstrap 提供了一种简单且易于定制的进度条组件，可以用来展示任务完成的进度或者加载状态。进度条可以是带标签的，也可以是动画的。

基本用法

要创建一个基本的进度条，只需要在 HTML 中添加以下代码：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
    50%
  </div>
</div>

在上面的代码中，我们使用了 progress 和 progress-bar 类来创建进度条。progress-bar 元素中的 style 属性用于设置进度条的宽度，aria-valuenow 属性用于设置当前进度值，aria-valuemin 和 aria-valuemax 属性用于设置最小和最大值。

进度条样式

Bootstrap 进度条提供了多种样式，可以通过添加不同的类来改变进度条的外观。以下是一些常用的样式类：

• progress-bar-success：成功状态的进度条
• progress-bar-info：信息状态的进度条
• progress-bar-warning：警告状态的进度条
• progress-bar-danger：危险状态的进度条

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
    75%
  </div>
</div>

动画效果

Bootstrap 进度条还支持动画效果，只需要在 progress-bar 元素中添加 active 类即可：

<div class="progress">
  <div class="progress-bar progress-bar-info active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    25%
  </div>
</div>

通过以上示例，你可以快速创建并定制 Bootstrap 进度条，使你的页面更加动态和吸引人。