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

基本样式

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

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

彩色进度条

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

.progress-bar-info：信息进度条，进度条颜色为蓝色 .progress-bar-success：成功进度条，进度条颜色为绿色 .progress-bar-warning：警告进度条，进度条颜色为黄色 .progress-bar-danger：错误进度条，进度条颜色为红色

实现源码如下：

条纹进度条

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

动态条纹进度条

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

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

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

层叠进度条

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

以上所述是小编给大家介绍的 Bootstrap源码学习笔记之bootstrap进度条。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!