BootStrap组件之进度条的基本用法


Posted in Javascript onJanuary 19, 2017

1、进度条基本用法

主要依赖.progress和.progress-bar

aria-valuenow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

width:60%表示当前进度条位置

<div class="progress">
  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>

2、带有提示标签的进度条

<div class="progress">
  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

3、根据情境变化效果

BootStrap组件之进度条的基本用法

<div class="progress">
  <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-warning

4、条纹效果

.progress-bar-striped可以和其他状态的类一起使用

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

5、动画效果

为 .progress-bar-striped 添加 .active 类,使其呈现出由右向左运动的动画效果。

<div class="progress">
  <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

6、堆叠效果

把多个进度条放入同一个 .progress 中,使它们呈现堆叠的效果。

<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组件之进度条的基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 #Javascript
js实现符合国情的日期插件详解
Jan 19 #Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 #Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 #Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
You might like
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
js操作textarea 常用方法总结
2012/12/03 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python进行文件对比的方法
2018/12/24 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python文字转语音实现过程解析
2019/11/12 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
软件测试常见笔试题
2012/02/04 面试题
百度软件工程师职位
2013/02/14 面试题
销售总经理岗位职责
2014/03/15 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
法律意见书范本
2015/06/04 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL