一：默认的进度条

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

  • 添加一个带有 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. C语言 · 比较字符串

    算法训练 比较字符串   时间限制:1.0s   内存限制:512.0MB      编程实现两个字符串s1和s2的字典序比较.(保证每一个字符串不是另一个的前缀,且长度在100以内).若s1和s2相 ...

  2. Oracle锁表查询和解锁方法

    数据库操作语句的分类 DDL:数据库模式定义语言,关键字:create DML:数据操纵语言,关键字:Insert.delete.update DCL:数据库控制语言 ,关键字:grant.remov ...

  3. 俞军的PM12条

     俞军的PM12条:1.PM首先是用户2.站在用户角度看待问题3.用户体验是一个完整的过程4.追求效果,不做没用的东西5.发现需求,而不是创造需求6.决定不做什么,往往比决定做什么更重要7.用户是很难 ...

  4. jQuery源代码解析（3）—— ready载入、queue队列

    ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...

  5. windows10删除开始菜单中的xbox、人脉、邮件等应用

    1.右键单击PowerShell,选择“以管理员身份运行” 2.输入下面的命令回车,会列出系统中所有已安装应用列表. Get-AppxPackage -AllUsers 从列表中找到你要卸载的应用,并 ...

  6. Ubuntu free以及Linux内存占用大的解释

    -bash-3.00$ free total used free shared buffers cached Mem: 514020 465932 48088 0 15864 348844 -/ bu ...

  7. 微信小程序滚动Tab实现左右可滑动切换

    --------------------------------------------------------wxml---------------------------------------- ...

  8. JAVA内部线程2

    GC Daemon JVM GC Daemon线程是JVM为RMI提供远程分布式GC使用的,GC Daemon线程里面会主动调用System.gc()方法,对服务器进行Full GC. 其初衷是当RM ...

  9. 实验二 C#程序设计 总结

    通过本次实验,我按照书上的例子,一个例子一个例子地写下来,前七点感觉和C语言差不多,除了语法稍稍不同外,大体上是一样的.到了第八点,对异常的处理,另我十分印象深刻.因为我做例3.21的时候,按照例子要 ...

  10. c++ const 用法总结

    最近第二次学习c++ , 却总是忘记const的一些用法, 所以记录一下笔记 忒困! A: const指针位于 * 的左边 A : const 修饰指针指向的内容, 则内容为不可变量但指针可变: 称其 ...