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 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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 遍历文件实现代码
2011/05/04 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
javascript实现密码验证
2015/11/10 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python 写一个文件分发小程序
2020/12/05 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
高二政治教学反思
2014/02/01 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
师范生自荐信模板
2014/05/28 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
工作试用期自我评价
2015/03/10 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server