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 相关文章推荐
JavaScript中的property和attribute介绍
Dec 26 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
JS如何生成随机验证码
Mar 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
如何运行Python程序的方法
2013/04/21 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python实现飞机大战
2018/09/11 Python
python三引号如何输入
2020/07/06 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
实习期自我鉴定
2013/10/11 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
追悼会悼词大全
2015/06/23 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
合作意向书怎么写
2019/06/24 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis