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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
浅析Python中的join()方法的使用
2015/05/19 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python实现梯度下降算法
2020/03/24 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
计算机专业毕业生自荐信范文
2014/03/06 职场文书
毕业生就业意向书
2014/04/01 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
大连星海广场导游词
2015/02/10 职场文书
会计出纳岗位职责
2015/03/31 职场文书
公司催款律师函
2015/05/27 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python