Bootstrap 3 进度条的实现


Posted in Javascript onFebruary 22, 2017

基本样式

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 <span class="sr-only">60% Complete</span>
 </div>
</div>

自带进度

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 60%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
 0%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
 2%
 </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%">
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 <span class="sr-only">20% Complete</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

条纹

<div class="progress">
 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 <span class="sr-only">20% Complete</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

动态

<div class="progress">
 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
 <span class="sr-only">45% Complete</span>
 </div>
</div>

堆叠

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 35%">
 <span class="sr-only">35% Complete (success)</span>
 </div>
 <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 <span class="sr-only">20% Complete (warning)</span>
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 10%">
 <span class="sr-only">10% Complete (danger)</span>
 </div>
</div>

以上所述是小编给大家介绍的Bootstrap 3 进度条的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
You might like
php中目录,文件操作详谈
2007/03/19 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
详解Python locals()的陷阱
2019/03/26 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python如何进入交互模式
2020/07/06 Python
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
工程造价专业求职信
2014/07/17 职场文书
计生工作先进事迹
2014/08/15 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年宣传工作总结
2015/04/08 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书