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语言中的Literal Syntax特性分析
Mar 08 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
使用js画图之饼图
2015/01/12 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python爬取音频下载的示例代码
2020/10/19 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
自我评价范文
2013/12/22 职场文书
《开国大典》教学反思
2014/04/19 职场文书
保护环境倡议书500字
2014/05/19 职场文书
党支部综合考察材料
2014/05/19 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
python 闭包函数详细介绍
2022/04/19 Python