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 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
教你一步步实现一个简易promise
Nov 02 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
2006/10/09 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python自动翻译实现方法
2016/05/28 Python
名片管理系统python版
2018/01/11 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python匿名函数的使用方法解析
2019/10/10 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
保荐人的岗位职责
2013/11/19 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
社区务虚会发言材料
2014/10/20 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
士兵突击观后感
2015/06/16 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏