bootstrap多种样式进度条展示


Posted in Javascript onDecember 20, 2016

为大家分享了多种多样的bootstrap进度条样式,供大家参考,具体内容如下

1、默认的进度条
添加一个带有class .progress 的div,在其内添加一个带有 class .progress-bar 的空div,为空div添加一个以百分比表示的style属性,如 style="60%"表示进度条在60%的位置。 

2、不同样式的进度条
添加一个带有class .progress 的div,在其内添加一个带有class .progress-bar 和class .progress-bar-*(*可以是success、info、warning、danger) 的空div,为空div添加一个以百分比表示的style属性,如 style="60%"表示进度条在60%的位置。 

3、条纹的进度条
添加一个带有class .progress 和class .progress-striped以及class .active的div,在其内添加一个带有class .progress-bar 的空div,为空div添加一个以百分比表示的style属性,如 style="60%"表示进度条在60%的位置。 

4、动画的进度条
添加一个带有class .progress 和class .progress-striped的div,在其内添加一个带有 class .progress-bar  的空div,为空div添加一个以百分比表示的style属性,如 style="60%"表示进度条在60%的位置。 

5、堆叠的进度条
把多个进度条放在相同的 .progress 中即可实现堆叠。

<div id="out"> 
 默认的进度条: 
 <div class="progress"> 
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 不同样式的进度条: 
 <div class="progress"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 条纹的进度条: 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 动画的进度条: 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 堆叠的进度条: 
 <div class="progress"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"></div> 
 </div> 
</div>

效果图:

bootstrap多种样式进度条展示

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
js里的prototype使用示例
Nov 19 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
JS封装通过className获取元素的函数示例
Dec 20 #Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 #Javascript
jquery+html仿翻页相册功能
Dec 20 #Javascript
JS实现拖拽的方法分析
Dec 20 #Javascript
JS实现Ajax的方法分析
Dec 20 #Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 #Javascript
自学实现angularjs依赖注入
Dec 20 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
德生PL550的电路分析
2021/03/02 无线电
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
索趣科技的答案
2007/02/07 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
详解python 内存优化
2020/08/17 Python
python装饰器代码深入讲解
2021/03/01 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
剪枝的学问教学反思
2014/02/07 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书