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间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
基于vue实现分页效果
Nov 06 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
js实现幻灯片轮播图
Aug 14 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
PHP5 安装方法
2006/10/09 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
json数据的列循环示例
2013/09/06 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python 网络爬虫初级实现代码
2016/02/27 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
python excel和yaml文件的读取封装
2021/01/12 Python
什么是servlet
2012/05/08 面试题
平面设计自荐信
2013/10/07 职场文书
高中自我评价范文
2014/01/27 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL