麦子学院 2016-07-03 00:03

Bootstrap进度条组件学习教程

回复:0 查看:2599

今天给大家分享一个 Bootstrap 教程http://www.maiziedu.com/course/543/，是关于进度条组件的。众所周知，在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了 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;

}

使用方法：

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

例子：

<h1> 彩色进度条 </h1>

</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);