首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

艺术就是爆炸

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
提交表单时执行func方法实现代码
Mar 17 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
OpenLayers实现图层切换控件
Sep 25 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
android studio(3) Fragment(1) EventBus(1) Spring-Retry(1) 多维数组(1) OpenLayer(1) 多线程(6) Sqlite(2) Spring Boot(5) IDEA(2)
You might like
短波的认识
2021/03/01 无线电
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
layui表格数据重载
2019/07/27 Javascript
Python Deque 模块使用详解
2014/07/04 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python实现词法分析器
2019/01/31 Python
Django框架模板用法入门教程
2019/11/04 Python
Python制作数据预测集成工具（值得收藏）
2020/08/21 Python
澳大利亚儿童精品仓库：Goo & Co.
2019/06/20 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
股票投资建议书
2014/05/19 职场文书
商铺门前三包责任书
2014/07/25 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS