：

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. node对称加密（转载）

    https://www.cnblogs.com/laogai/p/4664917.html

  2. Linux 下的基本命令

    Linux 下的基本命令 1. ls 命令 格式 : ls [OPTION]... [FILE]... 用途 : 显示目录下的内容 [OPTION] : -l : 列出详细信息 -d : 显示目录本身 ...

  3. 编码GBK和GB2312、Unicode、UTF-8

    一.编码GBK和GB2312 随着计算机发展,各国已经不满足于单纯用ASCII码: 对于我们来说能在计算机中显示中文字符是至关重要的,所以我们还需要一张关于中文和数字对应的关系表: 一个字节8位二进制 ...

  4. Python实现8中常用排序算法

    L = [2,6,4,7,9,1,3,5,8] # 1.插入排序 def insert_sort(List): n = len(List) for i in range(1,n): # 得到索引 j ...

  5. 微信系列之公众号Token验证

    微信系列之公众号Token验证 pycharm连接线上服务器开发 开发过程笔记 参考资料 python3安装web.py可以选择安装`pip install web.py==0.40.dev0 pyc ...

  6. 世界对一名颓废者的惩罚——SDOI2019R1游记

    在清明节前,我仿佛已经成为了一名退役选手 一个月做五道题,10天不碰电脑 终日只知颓废 SDOI2019,希望能引起我的警戒吧 Day 0 不说了. 晚上做了三道斯波题(包括去年多省联考的D1T1), ...

  7. poj 3469 最小割模板sap+gap+弧优化

    /*以核心1为源点,以核心2为汇点建图,跑一遍最大流*/ #include<stdio.h> #include<string.h> #include<queue> ...

  8. 解决ubuntu下wordpress设置固定链接后文章无法打开

    1.首先查看是否开启了Apache的rewrite功能,新建一个phpinfo的php文档 <?php phpinfo(); ?> 保存为info.php文件 放在www目录下并用浏览器打 ...

  9. maven 自动部署到tomcat

    使用maven的自动部署功能可以很方便的将maven工程自动部署到远程tomcat服务器,减少部署时间,方便快捷. 一.配置tomcat manager 1.编辑tomcat目录下,conf/tomc ...

  10. HDU 4521

    就是那个O(nlogn)的LIS算法. #include <iostream> #include <cstdio> using namespace std; int dt[10 ...