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进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!