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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
javascript new fun的执行过程
Aug 05 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP如何使用Memcached
2016/04/05 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python栈类实例分析
2015/06/15 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python字典一键多值实例代码分享
2019/06/14 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
法律进机关实施方案
2014/03/12 职场文书
爱情寄语大全
2014/04/09 职场文书
出国英文推荐信
2014/05/10 职场文书
药剂专业求职信
2014/06/20 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
昆虫记读书笔记
2015/06/26 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
python实现双向链表原理
2022/05/25 Python