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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
解读Vue组件注册方式
May 15 Vue.js
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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
深入解析php之sphinx
2013/05/15 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python urllib爬虫模块使用解析
2019/09/05 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
自荐信的格式
2014/03/10 职场文书
多媒体教室标语
2014/06/26 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
检讨书格式
2015/05/07 职场文书
防卫过当辩护词
2015/05/21 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python