Bootstrap源码学习笔记之bootstrap进度条

Bootstrap源码学习笔记之bootstrap进度条

基本样式

要实现进度条效果要使用两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。例如：

progress样式主要设置进度条容器的背景色，容器高度、间距等，progress-bar样式设置进度，主要是设置了进度条的背景颜色和过渡效果。实现源码如下：

.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-barERHaTVQxru {

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;

-o-transition: width .6s ease;

transition: width .6s ease;

}

彩色进度条

在基础的进度条上追加对应的类名即可：

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

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

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

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

实现源码如下：

.progress-bar-success {

background-color: #5cb85c;

}

.progress-bar-info {

background-color: #5bc0de;

}

.progress-bar-warning {

background-color: #f0ad4e;

}

.progress-bar-danger {

background-color: #d9534f;

}

条纹进度条

要实现条纹进度条效果只需要在进度条的容器“progress”基础上增加类名“progress-striped”即可。

实现源码如下：

.progress-striped .progress-bar,

.progress-bar-striped {

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

background-image: -o-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);

background-image: 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);

-webkit-background-size: 40px 40px;

background-size: 40px 40px;

}

.progress-striped .progress-bar-success {

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

background-image: -o-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);

background-image: 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);

}

.progress-striped .progress-bar-info {

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

background-image: -o-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);

background-image: 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);

}

.progress-striped .progress-bar-warning {

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

background-image: -o-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);

background-image: 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);

}

.progress-striped .progress-bar-danger {

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

background-image: -o-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);

background-image: 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);

}

动态条纹进度条

在进度条“progress progress-striped”两个类的基础上再加入“active”类名即可。例如：

实现原理主要通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。动画的实现源码如下：

@-webkit-keyframes progress-bar-stripes {

from {

background-position: 40px 0;

}

to {

background-position: 0 0;

}

}

@-o-keyframes progress-bar-stripes {

from {

background-position: 40px 0;

}

to {

background-position: 0 0;

}

}

@keyframes progress-bar-stripes {

from {

background-position: 40px 0;

}

to {

background-position: 0 0;

}

}

调用动画的实现源码如下：

.progress.active .progress-bar,

.progress-bar.active {

-webkit-animation: progress-bar-stripes 2s linear infinite;

-o-animation: progress-bar-stripes 2s linear infinite;

animation: progress-bar-stripes 2s linear infinite;

}

层叠进度条

层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列。例如：

我们可以发现，层叠进度条并没有额外的样式代码，之所以这样就能生效是因为在“progress-bar”上有一个左浮动的样式。要注意，层叠进度条宽度之和不能大于100%。

带Label的进度条

要实现带Label的进度条，只需要在进度条中添加你需要的值即可。例如：

要是那进度条的值为0%时，可以这么写：

以上所述是给大家介绍的 Bootstrap源码学习笔记之bootstrap进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。