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 相关文章推荐
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
Angular4 反向代理Details实践
May 30 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
了解重排与重绘
2019/05/29 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python验证码识别的实例详解
2016/09/09 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python 正则表达式的高级用法
2016/12/04 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python实现简易学生信息管理系统
2020/04/05 Python
python能做什么 python的含义
2019/10/12 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
11月红领巾广播稿
2014/01/17 职场文书
服务行业演讲稿
2014/09/02 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
司机个人年终总结
2015/03/03 职场文书
教师节座谈会主持词
2015/07/03 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
vue 实现上传组件
2021/05/31 Vue.js