Bootstrap进度条 样式及数据传输最全攻略

一：进度条样式

• 1.最简易进度条

（它提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式）
添加一个带有 .progress 类的 div
接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:40%” 表示进度条在40% 的位置。

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

效果如图：

• 3.带有标签进度条

role属性作用：告诉搜索引擎这个div的作用是进度条；
aria-valuenow=”30”属性作用：当前进度条的进度为40%；
aria-valuemin=”0”属性作用：进度条的最小值为0%；
aria-valuemax=”100”属性作用：进度条的最大值为100%；

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

效果如图：

• 3.彩色进度条

Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

☑ progress-bar-danger：表示错误进度条，进度条颜色为红色