Bootstrap源码学习笔记之bootstrap进度条
基本样式
要实现进度条效果要使用两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。例如：
<divclass="progress"> <divclass="progress-bar"style="width:40%"></div> </div>
progress样式主要设置进度条容器的背景色，容器高度、间距等，progress-bar样式设置进度，主要是设置了进度条的背景颜色和过渡效果。实现源码如下：
.progress{
height:20px;
margin-bottom:20px;
overflow:hidden;
background-color:#f5f5f5;
border-radius:4px;
-webkit-box-shadow:inset01px2pxrgba(0,0,0,.1);
box-shadow:inset01px2pxrgba(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:inset0-1px0rgba(0,0,0,.15);
box-shadow:inset0-1px0rgba(0,0,0,.15);
-webkit-transition:width.6sease;
-o-transition:width.6sease;
transition:width.6sease;
}
彩色进度条
在基础的进度条上追加对应的类名即可：
.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%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
-webkit-background-size:40px40px;
background-size:40px40px;
}
.progress-striped.progress-bar-success{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-striped.progress-bar-info{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-striped.progress-bar-warning{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-striped.progress-bar-danger{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
动态条纹进度条
在进度条“progressprogress-striped”两个类的基础上再加入“active”类名即可。例如：
<divclass="progressprogress-stripedactive"> <divclass="progress-barprogress-bar-success"style="width:40%"></div> </div>
实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。动画的实现源码如下：
@-webkit-keyframesprogress-bar-stripes{
from{
background-position:40px0;
}
to{
background-position:00;
}
}
@-o-keyframesprogress-bar-stripes{
from{
background-position:40px0;
}
to{
background-position:00;
}
}
@keyframesprogress-bar-stripes{
from{
background-position:40px0;
}
to{
background-position:00;
}
}
调用动画的实现源码如下：
.progress.active.progress-bar,
.progress-bar.active{
-webkit-animation:progress-bar-stripes2slinearinfinite;
-o-animation:progress-bar-stripes2slinearinfinite;
animation:progress-bar-stripes2slinearinfinite;
}
层叠进度条
层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列。例如：
<divclass="progress"> <divclass="progress-barprogress-bar-success"style="width:20%"></div> <divclass="progress-barprogress-bar-info"style="width:10%"></div> <divclass="progress-barprogress-bar-warning"style="width:30%"></div> <divclass="progress-barprogress-bar-danger"style="width:15%"></div> </div>
我们可以发现，层叠进度条并没有额外的样式代码，之所以这样就能生效是因为在“progress-bar”上有一个左浮动的样式。要注意，层叠进度条宽度之和不能大于100%。
带Label的进度条
要实现带Label的进度条，只需要在进度条中添加你需要的值即可。例如：
<divclass="progress"> <divclass="progress-barprogress-bar-success"style="width:20%">20%</div> </div>
要是那进度条的值为0%时，可以这么写：
<divclass="progress"> <divclass="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">0%</div> </div>
以上所述是小编给大家介绍的Bootstrap源码学习笔记之bootstrap进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！