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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
YUI模块开发原理详解
Nov 18 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
微信小程序 页面跳转和数据传递实例详解
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自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
拓展训练激励口号
2014/06/17 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS