Bootstrap进度条实现代码解析


Posted in Javascript onMarch 07, 2017

本文实例为大家分享了Bootstrap进度条的具体代码,供大家参考,具体内容如下

基本结构

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

默认的进度条:

创建一个基本的进度条的步骤如下:
(1)添加一个带有 .progress 的 <div>。
(2)在上面的 <div> 内,添加一个带有 .progress-bar 的空的 <div>。
(3)添加一个带有百分比表示的宽度的 style 属性,例如 style=”60%”; 表示进度条在 60% 的位置。

创建不同样式的进度条:
(1)添加一个带有 class .progress 的 <div>。
(2)接着,在上面的 <div> 内,添加一个带有 .progress-bar 和 progress-bar- 的空的 <div>。其中, 可以是 success、info、warning、danger。
(3)添加一个带有百分比表示的宽度的 style 属性,例如 style=”60%”; 表示进度条在 60% 的位置。

创建一个条纹的进度条:
(1)添加一个带有 class .progress 和 .progress-striped 的 <div>。
(2)在上面的 <div> 内,添加一个带有 .progress-bar 和 progress-bar-* 的空的 <div>。其中,* 可以是 success、info、warning、danger。
(3)添加一个带有百分比表示的宽度的 style 属性,例如 style=”60%”; 表示进度条在 60% 的位置。

创建一个动画的进度条:
(1)添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 .active。
(2)接着,在上面的 <div> 内,添加一个带有 .progress-bar 的空的 <div>。
(3)添加一个带有百分比表示的宽度的 style 属性,例如 style=”60%”; 表示进度条在 60% 的位置。

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

 <div class="progress-bar progress-bar-info" role="progressbar"
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
   style="width: 30%;">
  <span class="sr-only">30% 完成(信息)</span>
 </div>

 <div class="progress-bar progress-bar-warning" role="progressbar"
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
   style="width: 20%;">
  <span class="sr-only">20% 完成(警告)</span>
 </div>
</div>

效果图:

Bootstrap进度条实现代码解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
浅谈Django REST Framework限速
2017/12/12 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
pygame实现打字游戏
2021/02/19 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
创业计划书如何编写
2014/02/06 职场文书
护士个人自我鉴定
2014/03/24 职场文书
2014年督导工作总结
2014/11/19 职场文书