bootstrap基础知识（五）－－进度条

进度条

1）基本样式

一般用两个容器进行存储

第一个容器类名为“progress”用来设计进度条样式

第二个容器名为“progress－bar”用来限制进度条

改进：

虽然能够实现进度条，但是对于残障人士阅读浏览器有困难，故将结构做得更好，例如：

代码如下：

<div class=“progress”>

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

</div>

1、role属性作用：告诉搜索引擎这个div的作用是进度条。

2、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3、aria-valuemin="0"属性作用：进度条的最小值为0%。

4、aria-valuemax=“100"属性作用：进度条的最大值为100%。

2）彩色进度条

使用方法：

在progress－bar后加上类名

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

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

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

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

3)条纹进度条

需要在progress的div添加类名“progress－striped”

<div class=“progress progress-striped”>

<div class=“progress-bar progress-bar-info” style=“50%”>

</div>

</div>

4）动态条纹进度条

使用方法：在progress progress－striped后添加active

5)层叠进度条

仅需要在第一个容器中装自己想要的第二个容器，但是不能超过100%

6）带lable的进度条

在第二个容器的div中写上百分比，默认居中