一：默认的进度条

创建一个基本的进度条的步骤如下：

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

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="60"

    aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

 

二：交替的进度条

创建不同样式的进度条的步骤如下：

  • 添加一个带有 class .progress 的 <div>。
  • 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 交替的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 90%;">

    <span class="sr-only">90% 完成（成功）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 10%;">

    <span class="sr-only">10% 完成（危险）</span>

    </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% 的位置。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 条纹的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 90%;">

    <span class="sr-only">90% 完成（成功）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-danger" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 10%;">

    <span class="sr-only">10% 完成（危险）</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

 

四：动画的进度条

创建一个动画的进度条的步骤如下：

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

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

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 动画的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress progress-striped active">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

 

五：堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 堆叠的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

 

Bootstrap 各种进度条详解的更多相关文章

  1. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  2. 27.QT-QProgressBar动态实现多彩进度条(详解)

    如下图所示: 效果如下: (gif录制的动画效果不好,所以颜色有间隙) 介绍 通过qss实现,只需要一个多彩背景图,通过QImage获取颜色,然后来设置进度条,便可以实现动态多彩进度条(根据图片设定颜 ...

  3. 转载 JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...

  4. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  5. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

  6. Bootstrap(10) 进度条媒体对象和 Well 组件

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

  7. Bootstrap学习 进度条

    本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...

  8. bootstrap组件---进度条

    <div class="progress"> <div class="progress-bar progress-bar-success" r ...

  9. Bootstrap Table 表格参数详解

    表格参数 名称   标签   类型   默认   描述   - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

随机推荐

  1. Spring高级装配(二) 条件化的bean

    如果你希望一个bean在特定的条件下才会出现: 应用的类路径下包含特定的库时才创建 只有当某个特定的bean也声明之后才会创建 某个特定的环境变量设定之后才创建某个bean 在Spring 4之前,很 ...

  2. virtualbox 安装 USB 扩展功能

    virtualbox USB 扩展包下载 扩展包下载地址: http://download.virtualbox.org/virtualbox/ 选择你的 virtualbox 版本 看版本在 vir ...

  3. CPP_封装_继承_多态

    类的三方法:封装,继承,多态.封装:使用一整套方法去创建一个新的类型,这叫类的封装.继承:从一个现有的类型基础上,稍作改动,得到一个新的类型的方法,叫类的继承.多态:当有几个不同的子类对象时,对象调用 ...

  4. 利用python的KMeans和PCA包实现聚类算法

    题目: 通过给出的驾驶员行为数据(trip.csv),对驾驶员不同时段的驾驶类型进行聚类,聚成普通驾驶类型,激进类型和超冷静型3类 . 利用Python的scikit-learn包中的Kmeans算法 ...

  5. Java虚拟机（JVM）体系结构概述及各种性能参数优化总结

    转自:http://blog.csdn.net/zhongwen7710/article/details/39213377 第一部分:相关的概念 数据类型 Java虚拟机中,数据类型可以分为两类:基本 ...

  6. SpringBoot系列三：SpringBoot基本概念（统一父 pom 管理、SpringBoot 代码测试、启动注解分析、配置访问路径、使用内置对象、项目打包发布）

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.了解SpringBoot的基本概念 2.具体内容 在之前所建立的 SpringBoot 项目只是根据官方文档实现的一个基础程 ...

  7. Mybatis接口注解

    在上一章中,我们已经搭建了 myeclipse,mybatis,mysql 的开发环境,并且实现了 mybatis 的一个简单的查询.要注意的是,这种方式是用 SqlSession 实例来直接执行在U ...

  8. 为什么运行PHP就会出现404错误？

    2007-05-09 12:40Googfox | 分类:浏览器 | 浏览8146次 我在IIS中安装了Zend Core 2.0,IIS中用主机头值设置了许多80端口的网站,但是不管在这些网站中的哪 ...

  9. linux自动启动的示例

    linux作为服务器,经常希望一启动即可提供服务,以下命令为程序启动时,启动lhx用户下的程序: echo "su – lhx -c \"这里写入你的启动命令,Python建议使用 ...

  10. memcache -- 使用场景

    memcache:分布式缓存机制 使用场景: 1.对数据的存储要求不高,就算丢失也关系不大(因为memcache是非持久化存储) 2.不适合单机使用,即不适合将memcache和数据库等都放到同一台机 ...