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中的107个基础知识收集整理 推荐
Mar 29 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
js实现弹幕飞机效果
Aug 27 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/01/02 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
php的常量和变量实例详解
2017/06/27 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python写的一个简单监控系统
2015/06/19 Python
python中的错误处理
2016/04/10 Python
python的re正则表达式实例代码
2018/01/24 Python
python日志模块logbook使用方法
2019/09/19 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Django中的AutoField字段使用
2020/05/18 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
计生工作先进事迹
2014/08/15 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
稽核岗位职责
2015/02/10 职场文书
加强党性修养心得体会
2016/01/21 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL