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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JavaScript实现拖拽功能
Feb 11 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
numpy中矩阵合并的实例
2018/06/15 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
如何在python中执行另一个py文件
2020/04/30 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
班组拓展活动方案
2014/08/14 职场文书
内科护士节演讲稿
2014/09/11 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle