Bootstrap进度条组件详解--688IT编程网

Bootstrap进度条组件详解

⾸先需要导⼊相关bootsrap的组件包：bootstrap.min.css、jquery.min.js、bootstrap.min.js 等，这个就不多说了

在⽹页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使⽤了css3的transition和animation属性来完成⼀些特效，这些特效在IE9及IE9以下版本、Firefox的⽼版本中并不⽀持，Opera 12 不⽀持 animation 属性。

进度条和其他独⽴组件⼀样，开发者可以根据⾃⼰的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使⽤类名.progress，⼦容器使⽤类名.progress-bar；其中.progress⽤来设置进度条容器的背景⾊，容器的⾼度，间距等；⽽.progress-bar设置进度⽅向，进度条的背景⾊和过度效果；下⾯是css源码：

.progress {

height: 20px;

margin-bottom: 20px;

overflow: hidden;

background-color: #f5f5f5;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

}

.progress-bar {

float: left;

width: 0;

height: 100%;

font-size: 12px;

line-height: 20px;

color: #fff;

text-align: center;

background-color: #428bca;

-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);

box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);

webkit-transition: width .6s ease;

transition: width .6s ease;

}

例⼦：

</div>

role属性作⽤：告诉搜索引擎这个div的作⽤是进度条；

aria-valuenow=”30”属性作⽤：当前进度条的进度为40%；

aria-valuemin=”0”属性作⽤：进度条的最⼩值为0%；

aria-valuemax=”100”属性作⽤：进度条的最⼤值为100%；

可以将设置了.sr-only类的<span>标签从进度条组件中移除，⽽让当前进度显⽰出来；

</div>

彩⾊进度条

彩⾊进度条和警告进度条⼀样，为了能给⽤户⼀个更好的体验，也根据不同的状态配置了不同的进度条颜⾊，主要包括以下四种：

progress-bar-info：表⽰信息进度条，蓝⾊

progress-bar-success：表⽰成功进度条，绿⾊

progress-bar-warning：表⽰警告进度条，黄⾊

progress-bar-danger：表⽰错误进度条，红⾊

css源码：

.progress-bar-success {

background-color: #5cb85c;

}

.progress-bar-info {

background-color: #5bc0de;

}

.progress-bar-warning {

background-color: #f0ad4e;

}

.progress-bar-danger {

background-color: #d9534f;

}

使⽤⽅法：

只需要在基础进度条上增加对应的类名即可

例⼦：

jquery是什么功能组件<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>

</div>

</div>

</div>

</div>

效果如下：

条纹进度条

条纹进度条采⽤css3的线性渐变来实现，并未借助任何图⽚，使⽤条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”，如果要进度条纹像彩⾊进度⼀样，具有彩⾊效果，只需在进度条上增加相应得颜⾊类名

下⾯是.progress-striped样式源码：

.progress-striped .progress-bar {

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);