<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% 完成(成功)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% 完成(信息)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% 完成(警告)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% 完成(危险)</span>
</div>
</div>

role:语义化属性,无显示上的效果

aria-valuenow
aria-valuemin
aria-valuemax

  

3个属性无显示上的效果,标识进度值范围和当前进度值,可以用于js设置和获取进度:

object.setAttribute("aria-valuenow",value);

var value = object.getAttribute("aria-valuenow");

style="width: 90%;"

定义进度条宽度

progress-bar-success
progress-bar-info
 progress-bar-warning
progress-bar-danger

4个class定义不同进度下的进度条颜色显示,比如danger时显示红色警醒

bootstrap组件---进度条的更多相关文章

  1. Bootstrap(10) 进度条媒体对象和 Well 组件

    一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  2. Bootstrap 各种进度条详解

    一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...

  3. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

  4. Bootstrap学习 进度条

    本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...

  5. 高级组件——进度条 JProgressBar

    JProgressBar pro=new JProgressBar(); pro.setIndeterminate(boolean); 设置不确定性        false,确定的进度条(显示进度, ...

  6. vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因

    自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...

  7. BackgroundWorker 组件 -- 进度条

    代码: BackgroundWorker bw = new BackgroundWorker(); public MainWindow() { InitializeComponent(); bw.Wo ...

  8. bootstrap.css 进度条没有动画效果

    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选

  9. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

随机推荐

  1. Python中的open()方法总结

    总结Python中的open()方法 message= {'企业即时通信': 'aaa', '企业名称': 'bbb'} with open("..\\r.txt", " ...

  2. OGG bi-directional replication for Oracle DB

    Overview of an Active-Active Configuration Oracle GoldenGate supports an active-active bi-directiona ...

  3. Java语法进阶16-Lambda-Stream-Optional

    Lambda 大年初二,大门不出二门不迈.继续学习! 函数式接口 Lambda表达式其实就是实现SAM接口的语法糖,所谓SAM接口就是Single Abstract Method,即该接口中只有一个抽 ...

  4. PSP第一次总结

    项目计划总结 周活动总结表 姓名:王金萱                                                                                 ...

  5. 【javaWeb】sendRedirect和forward原理及区别总结

    一.原理.  1. Forward        该图的交互过程如下: ① 浏览器访问Servlet1. ② Servlet1想让Servlet2对客户端的请求进行响应,于是调用forward()方法 ...

  6. Dynamics CRM 快速获取custom entity

    我们可以使用Command来实现快速获取custom entity的值. 创建cmd  并且在nuget中引用 CRMSDK 复制下面的代码. userName 为登陆CRM的email passwo ...

  7. Docker三剑客之Machine

    前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...

  8. 1222: 计算x^1+x^2+x^3+……+x^n的值

    #include <stdio.h>int main(){ int x,n,i,j; long long sum,g;while(scanf("%d%d",&x ...

  9. 为什么Netflix没有运维岗位?

    Netflix 是业界微服务架构的最佳实践者,其基于公有云上的微服务架构设计.持续交付.监控.稳定性保障,都为业界提供了大量可遵从的原则和实践经验. 在运维这个细分领域,Netflix 仍然是最佳实践 ...

  10. 练习2-15 求简单交错序列前N项和 (15 分)

    练习2-15 求简单交错序列前N项和 (15 分) 本题要求编写程序,计算序列 1 - 1/4 + 1/7 - 1/10 + ... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格 ...