：

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. Linux系统学习之 二：新手必须掌握的Linux命令2

    2018-10-03 22:20:48 一.文件目录管理命令 1.touch 命令 用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. 参数: -a :仅修改“读取时间(at ...

  2. SPU、SKU、ARPU是什么，我来记录一下我的理解

    在电商系统里经常会提到“商品”.“单品”.“SPU”.“SKU”这几个词,那么这几个词到底是什么意思呢? 既然不知道是什么,那么我们就查一下:SPU = Standard Product Unit ( ...

  3. 嵌入式linux实现NAT端口映射

    场景: 1.嵌入式linux系统内已经在2个网卡,分别为eth0(内网物理网卡,ip地址:192.168.1.4)以及ppp1(VPN客户端通过PPTP协议拨号生成的虚拟网卡,ip地址:192.168 ...

  4. 0912MySQL 执行计划explain详解

    转自http://blog.itpub.net/29773961/viewspace-1767044/ 该博客内容是比较全的,虽然写的比较晦涩,多读几遍还是不错的 explain命令是查看查询优化器如 ...

  5. MySQL出现no mycat database selected的问题分析

    1.先抛开mycat来处理 2.在查询表时,要指定是哪个数据库,然后再查询. ①.如果再MySQL Workbench中,先使用use tablename;,然后在执行操作语句:或者在语句上指定要查询 ...

  6. Spring Boot上传文件

    我们使用Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0. <parent> <groupId>org.springframework.boot& ...

  7. HDU 2296

    很明显的DP状态了,设dp[i][j],设当前在状态点i,经过j步能得到的最大分值.也是从root直接扩展就可以了. 至于字符串,实在有点困难,开始想着记录路径,但后来发现路径从后往前回溯不一定是字典 ...

  8. keil uV4一个project内各个后缀名文件的作用

    1 test1 无后缀文件,这个是终于生成的文件.仅仅要有这个文件KEIL就能够软件仿真,不能打开 2 test1.hex 这个文件能够直接下载到单片机里,他就是从无后缀文件test1里提取的,去掉了 ...

  9. CodeForces 19D Points（离散化+线段树+单点更新）

    题目链接: huangjing 题意:给了三种操作 1:add(x,y)将这个点增加二维坐标系 2:remove(x,y)将这个点从二维坐标系移除. 3:find(x,y)就是找到在(x,y)右上方的 ...

  10. spring 源码解析

    1. [文件] spring源码.txt ~ 15B     下载(167) ? 1 springн┤┬вио╬Ш: 2. [文件] spring源码分析之AOP.txt ~ 15KB     下载( ...