Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。

Internet Explorer 9 及之前的版本号和旧版的 Firefox 不支持该特性，

Opera 12 不支持动画。

默认的进度条

创建一个主要的进度条的过程例如以下：

  • 加入一个带有 class .progress 的 <div>。
  • 接着。在上面的 <div> 内。加入一个带有 class .progress-bar 的空的 <div>。
  • 加入一个带有百分比表示的宽度的 style 属性，比如 style="60%"; 表示进度条在 60% 的位置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width = device-width,initial-scale = 1.0"><link rel="stylesheet" href="bootstrap.min.css"><script src = "js/jquery-1.11.2.min.js"></script><script src = "js/bootstrap.min.js"></script><title>CSSDemo</title>
</head>
<body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完毕</span></div><div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">20%完毕</span></div><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完毕</span></div><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完毕</span></div></div></div>
</body>
</html>

条纹的进度条

创建一个条纹的进度条的过程例如以下：

  • 加入一个带有 class .progress 和 .progress-striped 的 <div>。
  • 接着，在上面的 <div> 内，加入一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。当中，* 能够是 success、info、warning、danger。
  • 加入一个带有百分比表示的宽度的 style 属性，比如 style="60%"; 表示进度条在 60% 的位置。
<body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">50%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完毕</span></div></div></div>
</body>

动画的进度条

创建一个动画的进度条的过程例如以下：

  • 加入一个带有 class .progress 和 .progress-striped 的 <div>。同一时候加入 class .active。
  • 接着，在上面的 <div> 内，加入一个带有 class .progress-bar 的空的 <div>。
  • 加入一个带有百分比表示的宽度的 style 属性，比如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

<body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress progress-striped active"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完毕</span></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">50%完毕</span></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完毕</span></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完毕</span></div></div></div>
</body>

堆叠的进度条

把多个进度条放在同样的 .progress 中就可以实现堆叠

<body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">20%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完毕</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完毕</span></div></div></div>
</body>

Bootstrap进度条相关推荐

  1. ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    很多时候,我们执行页面上某个URL请求的时候,需要有等待的时间.如果是直接的页面跳转,浏览器会有缓冲进度展示,但是如果是AJAX,我觉得应该自己加上进度条,等待数据全部接收到之后,进度条消失,展示页面 ...

  2. Bootstrap 进度条堆叠

    进度条堆叠 只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起显示.如: <div class="progress">   < ...

  3. Bootstrap 进度条

    进度条 Bootstrap提供了多种漂亮的进度条,可以使用进度条来表示加载.跳转等正在执行中的状态.进度条本身只是一个静态元素,要让它拥有交互能力,还需要JavaScript代码的配合. 基本进度条 ...

  4. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  5. Bootstrap进度条堆叠

    进度条堆叠 Bootstrap3中,只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起,使它们呈现堆叠的效果.如: <div class="prog ...

  6. Bootstrap进度条的颜色

    进度条的颜色 除了默认的蓝色进度条之外,Bootstrap还为进度条提供了一组情景样式类,包括 .progress-bar-success..progress-bar-info..progress-b ...

  7. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

  8. bootstrap进度条媒体对象和Well组件

    学习笔记 一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 ...

  9. php 做更新进度条,PHP exec()后更新Bootstrap进度条

    我使用PHP来运行一个python脚本,并且在脚本执行后需要更新一个进度条.进度条更新后,将执行另一个脚本,依此类推. 这里是我的代码如此的票价.我试图用JavaScript来实现.它没有解决 But ...

最新文章

  1. 关于 android 加载 res 图片 out of memory 问题 解决 同样适用于 sd卡图片
  2. 语法：MySQL中INSERT IGNORE INTO和REPLACE INTO的使用
  3. 01.CSS动画--transform
  4. Filter_细节_过滤器链(多个过滤器)
  5. 电脑技巧：键盘上的这几个键，不常用，但有必要了解一下！
  6. 讲的真透彻！还有人不知道什么是AndroidX的吗？已拿offer入职
  7. 用html+css+js实现一个无限级树形控件
  8. mongodb更新操作符$rename
  9. java 异常处理向处机制笔记
  10. 解决GitHub上的博客无法被百度收录的问题
  11. JS中同时支持切割中英文符号,例如分号,冒号
  12. 计算机软件著作权登记证书
  13. 阿里云物联网平台总结
  14. 微信小程序中，将一张图设置成背景图的几种方式
  15. 对逻辑斯蒂回归的一些细节剖析
  16. 幼儿园计算机应用研修日志,信息技术教师研修日志三篇
  17. Android Studio模拟器如何设置中文输入法
  18. 课程设计题十：简易电子琴设计
  19. 引导滤波（guidedFilter）与边窗盒式滤波(sideWindowBoxFilter)的C++与OpenCV实现
  20. linux sata硬盘热交换,浅谈希捷7200.7硬盘热交换数据恢复教程.pdf

热门文章

  1. java中抽象类和接口的作用与区别
  2. The application's PagerAdapter changed the adapter's contents without calling notifyDataSetChanged
  3. 一个方法可解决两个问题：1：Unity打开时一直加载，不能NEW，只能OPEN； 2:Unity 出现license error,re-active时一直循环报错
  4. 安卓9.0刷linux,Ubuntu系统下编译Android 9.0系统
  5. ubuntu镜像添加jdk_Ubuntu16.0.4安装jdk8
  6. Matlab中cq是什么,Matlab中gradient函数（梯度计算原理）
  7. 北师计算机应用基础离线作业2,[北京师范大学]18秋《计算机应用基础(专科)》 离线作业2...
  8. 纯c语言贪吃蛇,纯C语言贪吃蛇 求助
  9. 抢红包算法 c++_十大排序算法（一）：冒泡排序法
  10. 使用SSH+SFTP操作终端全解析，告别XShell