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


Posted in Javascript onDecember 24, 2016

基本样式

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

<div class="progress">
  <div class="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: 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;
    -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”类名即可。例如:

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

实现原理主要通过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;
}

层叠进度条

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%"></div>
  <div class="progress-bar progress-bar-info" style="width:10%"></div>
  <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

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

带Label的进度条

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%">20%</div>
</div>

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

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

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

Javascript 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 #Javascript
Bootstrap php制作动态分页标签
Dec 23 #Javascript
前端JS面试中常见的算法问题总结
Dec 23 #Javascript
Bootstrap源码解读导航条(7)
Dec 23 #Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 #Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 #Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 #Javascript
You might like
自己写了一个php检测文件编码的函数
2014/04/21 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript实现的网页局布刷新效果
2008/12/01 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python实现学生信息管理系统源码
2021/02/22 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
总经理秘书工作职责
2013/12/26 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
慰问信范文
2015/02/14 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
家长反馈意见及建议
2015/06/03 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Golang 字符串的常见操作
2022/04/19 Golang
mysql全面解析json/数组
2022/07/07 MySQL