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 window对象属性整理
Oct 24 Javascript
Dojo 学习要点
Sep 03 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
layui选项卡效果实现代码
May 19 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php url路由入门实例
2014/04/23 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
夜大自我鉴定
2013/10/31 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
敬老模范事迹
2014/05/21 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
茶花女读书笔记
2015/06/29 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js