：

2.3版               3.0版

.bar .progress-bar
.bar-* .progress-bar-*

2、代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" href="dist/css/bootstrap.css" >
  6. <script src="dist/js/bootstrap.js"></script>
  7. <title>无标题文档</title>
  8. </head>
  9. <body style="margin:200px;">
  10. <span>普通的进度条</span>
  11. <div class="progress">
  12. <div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
  13. <span class="sr-only">60% Complete</span>
  14. </div>
  15. </div>
  16. <span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>
  17. <div class="progress progress-striped">
  18. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  19. <span class="sr-only">40% Complete (success)</span>
  20. </div>
  21. </div>
  22. <div class="progress progress-striped">
  23. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  24. <span class="sr-only">20% Complete</span>
  25. </div>
  26. </div>
  27. <div class="progress progress-striped">
  28. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  29. <span class="sr-only">60% Complete (warning)</span>
  30. </div>
  31. </div>
  32. <div class="progress progress-striped">
  33. <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  34. <span class="sr-only">80% Complete (danger)</span>
  35. </div>
  36. </div>
  37. <span>炫动进度条 加active（不支持各个IE版本）</span>
  38. <div class="progress progress-striped active">
  39. <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
  40. <span class="sr-only">45% Complete</span>
  41. </div>
  42. </div>
  43. </body>
  44. </html>

3、相对应的效果图：

 
 

bootstrap3的 progress 进度条的更多相关文章

  1. 微信小程序组件解读和分析：六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序 progress 进度条 内部圆角及内部条渐变色

    微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...

  3. Bootstrap3.0（进度条、媒体对象、列表组、面板）

    Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...

  4. android中progress进度条的使用

    activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  5. progress 进度条

      进度条.  属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...

  6. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

  7. [Cocos2d-x For WP8]Progress 进度条

    Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...

  8. 使用div实现progress进度条

    在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*)  可以在CSS里改样式,可以JS里改进度. <div cla ...

  9. html。PROGRESS进度条使用测试

    效果图 : 代码: ----------------------------------- //本文来自:https://www.cnblogs.com/java2sap/p/11199126.htm ...

随机推荐

  1. JavaEE el表达式中三目运算符的使用

    也可以通过在bean对象中写getter方法通过对象.属性进行调用

  2. 学习Linux服务的方法

    1.服务的概述:名字.功能.特点.原理.端口号 2.安装 3.配置文件的位置 4.服务器启动.关闭的脚本,查看端口 5.此服务的使用方法 6.修改配置文件,案例部署 7.排错调优

  3. Python学习笔记之文件处理

    1.打开和关闭 要打开文件可以使用函数 open(),它位于自动导入模块 io 中.函数将文件名作为唯一不可缺少的函数,并返回一个文件对象.它还有一个名叫 mode 的参数,用于指定文件模式,其可取值 ...

  4. mysql中使用order 出现错误

  5. ACDream - k-GCD

    先上题目: B - k-GCD Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Sub ...

  6. Seaside HDU 3665 【Dijkstra】

    Problem Description XiaoY is living in a big city, there are N towns in it and some towns near the s ...

  7. oracle 数据库开发面试题

    近期參加了数场面试,总结一下竞聘oracle 开发岗位最常问到哪些问题: 1.delete 与 truncate 差别? 1)truncate 是DDL语句.delete 是DML语句: 2)trun ...

  8. Aizu/Aoj 0033 Ball

    题目大意: 有编号1到10共10个球,从上方丢下去,入口处可以选择进入左边或者右边,最后10个球全部落下去后如果左右两侧都是从小到大的顺序,则输出YES:否则输出NO. 题目原本的标签枚举,复杂度是2 ...

  9. [MSSQL]採用pivot函数实现动态行转列

    环境要求:2005+ 在日常需求中常常会有行转列的事情需求处理.假设不是动态的行,那么我们能够採取case when 罗列处理. 在sql 2005曾经处理动态行或列的时候,通常採用拼接字符串的方法处 ...

  10. H3C路由器查看序列号信息

    H3C MSR系列的路由器,查看本机的MAC地址.序列号信息和生产日期信息等可以使用dis device manuinfo 命令查看,以下是执行结果: slot 0 DEVICE_NAME       ...