一：默认的进度条

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

  • 添加一个带有 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. [notes] some code tips

    genericizing-codehtml, body {overflow-x: initial !important;}html { font-size: 14px; } body { margin ...

  2. centos7 安装oracle jdk 与openjdk 实现切换

    1. 分别安装oraclejdk 与openjdk #下载安装oraclejdk rpm -ivh --prefix=/usr.java/java1.8 ***.rpm #安装openjdk su - ...

  3. STM32 ADC多通道转换

    描述:用ADC连续采集11路模拟信号,并由DMA传输到内存.ADC配置为扫描并且连续转换模式,ADC的时钟配置为12MHZ.在每次转换结束后,由DMA循环将转换的数据传输到内存中.ADC可以连续采集N ...

  4. Tomcat配置JMX远程监控(Windown7 Linxu)

    一:Window7下配置方式. 1.配置catalina.bat 在第一行加入下面配置 注意下面这些配置要在一行,注意包含空格. set JAVA_OPTS=-Dcom.sun.management. ...

  5. linux使用指导-debian/archlinux/LFS

    debian系统参考配置手册:https://www.debian.org/doc/manuals/debian-reference/index.en.html ArchLinux系统参考配置手册:s ...

  6. [开发笔记]-实现winform半透明毛玻璃效果

    亲测win7下可用,win8下由于系统不支持Aero效果,所以效果不是半透明的. 代码: 博客园插入不了代码了..... public partial class Form1 : Form { int ...

  7. ubuntu14.04 64位JDK安装

    1 官网下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html jdk-8u ...

  8. Java知多少（17）强调一下编程风格

    讲完了Java的基础语法,大家就可以编写简单的程序代码了,这里有必要强调一下编程风格. 代码风格虽然不影响程序的运行,但对程序的可读性却非常重要.自己编写的程序要让别人看懂,首先在排版方面要非常注意. ...

  9. R语言学习笔记 (入门知识)

    R免费使用:统计工具:# 注释,行注释块注释:anything="这是注释的内容"常用R语言编辑器:Rsutdio,Tinn-R,Eclipse+StatET:中文会有乱码帮助:? ...

  10. SQL server 分页方法小结

    这里面介绍一下常用的分页方法: 1.使用top来分页 select top @pageSize * from table where id not in (select top @pageSize*( ...