：

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. HDU1087 - Super Jumping! Jumping! Jumping!【动态规划】

    zh成功的在他人的帮助下获得了与小姐姐约会的机会,同时也不用担心被非"川大"的女票发现了,可是如何选择和哪些小姐姐约会呢?zh希望自己可以循序渐进,同时希望挑战自己的极限,我们假定 ...

  2. 将项目上传到Github之使用git命令上传

    1,先从GitHub网页上建立一个数据仓库 2,安装git 下载地址:https://www.git-scm.com/download/win 3,找到本地要上传的项目目录,右键点击Git Bash ...

  3. NumPy常见的元素操作函数

    ceil(): 向上最接近的整数,参数是 number 或 array floor(): 向下最接近的整数,参数是 number 或 array rint(): 四舍五入,参数是 number 或 a ...

  4. mysql查询昨天 一周前 一月前 一年前的数据

    mysql 昨天 一周前 一月前 一年前的数据 这里主要用到了DATE_SUB, 参考如下 代码如下: SELECT * FROM yh_contentwhere inputtime>DATE_ ...

  5. EditorLineEnds.ttr的困扰

    DELL的n年的商用机电脑硬盘坏了,措手不及. 256ssd+1tb企业级.机器快乐很多.一小步,让机器快了一大步. 但是2007出问题了,每次启动EditorLineEnds.ttr被占用.原来有那 ...

  6. ExtJs之Ajax模式的表单数据加载

    简单: <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-e ...

  7. POJ 1679

    求一次最小成树,求一次小生成树,若相等,则不唯一.否则,唯一. #include <iostream> #include <cstdio> #include <cstri ...

  8. With Storm Spouts, when is declareOutputFields( ) called?

    The method IComponent.declareOutputFields(...) is called on the client machine when the client code ...

  9. EditText焦点问题

    1.在一个Activity中加入一个EditText后,每次进入这个Activity时输入法都会自己主动弹出来.非常烦,找了些资料,在此记下解决的方法: 方法:在EditText的父控件中获得焦点.这 ...

  10. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...