前面的话

　　在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等，通过简单、灵活的进度条，可以为当前工作流程或动作提供实时反馈。本文将详细介绍Bootstrap进度条

基本样式

　　Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后一个高亮的颜色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色

　　Bootstrap框架中也是按这样的方式实现的，它提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度

  1. .progress {
  2.   height: 20px;
  3.   margin-bottom: 20px;
  4.   overflow: hidden;
  5.   background-color: #f5f5f5;
  6.   border-radius: 4px;
  7.   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  8.           box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  9. }
  10. .progress-bar {
  11.   float: left;
  12.   width:;
  13.   height: 100%;
  14.   font-size: 12px;
  15.   line-height: 20px;
  16.   color: #fff;
  17.   text-align: center;
  18.   background-color: #428bca;
  19.   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  20.           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  21.   -webkit-transition: width .6s ease;
  22.           transition: width .6s ease;
  23. }
  1. <div class="progress">
  2.        <div class="progress-bar" style="width:40%"></div>
  3. </div>

　　无障碍性更好的写法如下

  1. <div class="progress">
  2.     <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  3.         <span class="sr-only">40% Complete</span>
  4.     </div>
  5. </div>

　　role属性告诉搜索引擎这个div的作用是进度条；aria-valuenow="40"属性告知当前进度条的进度为40%；aria-valuemin="0"属性告知进度条的最小值为0%；aria-valuemax="100"属性告知进度条的最大值为100%

彩色进度条

　　Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

　　☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

　　☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

　　☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

　　☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

　　具体使用非常简单，只需要在基础的进度上增加对应的类名即可，彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化

  1. .progress-bar-success {
  2.   background-color: #5cb85c;
  3. }
  4. .progress-bar-info {
  5.   background-color: #5bc0de;
  6. }
  7. .progress-bar-warning {
  8.   background-color: #f0ad4e;
  9. }
  10. .progress-bar-danger {
  11.   background-color: #d9534f;
  12. }
  1. <div class="progress">
  2.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>
  4. <div class="progress">
  5.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  6. </div>
  7. <div class="progress">
  8.     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  9. </div>
  10. <div class="progress">
  11.     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  12. </div>

条纹进度条

　　在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果要让进度条条纹像彩色进度一样，具有彩色效果，只需要在进度条上增加相应的颜色类名

　　[注意]通过渐变可以为进度条创建条纹效果，IE9-浏览器不支持

  1. .progress-striped .progress-bar {
  2.   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  3.   background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  4.   background-size: 40px 40px;
  5. }
  1. .progress-striped .progress-bar-success {
  2.   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  3.   background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  4. }
  5. .progress-striped .progress-bar-info {
  6.   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  7.   background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  8. }
  9. .progress-striped .progress-bar-warning {
  10.   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  11.   background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  12. }
  13. .progress-striped .progress-bar-danger {
  14.   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  15.   background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  16. }
  1. <div class="progress progress-striped">
  2.     <div class="progress-bar" style="width:70%"></div>
  3. </div>
  4. <div class="progress progress-striped">
  5.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  6. </div>
  7. <div class="progress progress-striped">
  8.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  9. </div>
  10. <div class="progress progress-striped">
  11.     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  12. </div>
  13. <div class="progress progress-striped">
  14.     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  15. </div>

动态条纹

　　为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

　　[注意]IE9-浏览器不支持

  1. @-webkit-keyframes progress-bar-stripes {
  2.   from {
  3.     background-position: 40px 0;
  4.   }
  5.   to {
  6.     background-position: 0 0;
  7.   }
  8. }
  9. @keyframes progress-bar-stripes {
  10.   from {
  11.     background-position: 40px 0;
  12.   }
  13.   to {
  14.     background-position: 0 0;
  15.   }
  16. }

　　在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效，使其呈现出由右向左运动的动画效果

  1. .progress.active .progress-bar {
  2.   -webkit-animation: progress-bar-stripes 2s linear infinite;
  3.           animation: progress-bar-stripes 2s linear infinite;
  4. }
  1. <div class="progress progress-striped active">
  2.     <div class="progress-bar" style="width:70%"></div>
  3. </div>
  4. <div class="progress progress-striped active">
  5.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  6. </div>
  7. <div class="progress progress-striped active">
  8.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  9. </div>
  10. <div class="progress progress-striped active">
  11.     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  12. </div>
  13. <div class="progress progress-striped active">
  14.     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  15. </div>

层叠进度条

　　Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条。层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列

　　把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果

  1. <div class="progress">
  2.   <div class="progress-bar progress-bar-success" style="width: 35%">
  3.     <span class="sr-only">35% Complete (success)</span>
  4.   </div>
  5.   <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
  6.     <span class="sr-only">20% Complete (warning)</span>
  7.   </div>
  8.   <div class="progress-bar progress-bar-danger" style="width: 10%">
  9.     <span class="sr-only">10% Complete (danger)</span>
  10.   </div>
  11. </div>

　　[注意]层叠的进度条之和不能大于100%

  1. <div class="progress">
  2.   <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  3.   <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  4.   <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
  5. </div>

提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

  1. <div class="progress">
  2.     <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
  3. </div>

　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

  1. <div class="progress">
  2.     <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
  3. </div>
  4. <div class="progress">
  5.     <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
  6. </div>
  7. <div class="progress">
  8.     <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div>
  9. </div>
  10. <div class="progress">
  11.     <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div>
  12. </div>

Bootstrap进度条的更多相关文章

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

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

  2. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

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

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

  4. Ajax文件上传并添加Bootstrap进度条

    1.项目中需要用到文件上传和显示进度,网上各种插件搞得头晕,决定自己实现一个 三个步骤:Ajax上传文件,获取上传进度,显示进度 html: <!DOCTYPE HTML> <htm ...

  5. Bootstrap 进度条媒体对象和条组

    列表组组件 列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...

  6. Bootstrap <基础二十六>进度条

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

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

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

  8. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  9. Bootstrap学习 进度条

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

随机推荐

  1. Natas Wargame Level 15 Writeup(Content-based Blind SQL Injection)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq4AAACGCAYAAAAcnwh0AAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  2. CoreOS, Kubernetes, etcd

    CoreOS CoreOS Container Linux is the leading container operating system, designed to be managed and ...

  3. vue+vux+axios+vuex+vue-router的项目的理解

    本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...

  4. Tomcat 连接池详解

    (转) JDBC 连接池 org.apache.tomcat.jdbc.pool 是Apache-Commons DBCP连接池的一种替换或备选方案. 那究竟为何需要一个新的连接池? 原因如下: Co ...

  5. Javaweb---服务器Tomcat配置

    1.文件下载 Tomcat官方地址:http://tomcat.apache.org/ 2.文件解压 将下载好文件解压在你想放置的位置即可 解压后的文件: 3.进行配置 一般都要配置这两个参数: 1) ...

  6. socket聊天室（服务端）（多线程）（TCP）

    #include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...

  7. 一个web应用的诞生(13)--冲向云端

    有句话叫所有的乐趣都在部署之前,也许这个小应用还有很多缺陷,也许它还不够完美,但是,仔细想想,其实没有什么能比自己的网站在互联网中上线更令人满足的了,但是满足的背后,总是存在着很多的风险,以至于几乎所 ...

  8. 推荐xamlspy

    xamlspy(http://xamlspy.com/) 如果在win32时代用过spy++的,都应该在silverlight/wpf时代用一下xamlspy,让你重新找到用spy++看别人程序的UI ...

  9. Dubbo有意思的特性介绍

    Duboo 不单让我们可以像使用本地服务一样的使用远程服务,还设计了很多特性来满足我们平时开发时常见的场景,省却了我们不少麻烦,真是一款有良心的框架,下面针对这些场景和解决方案来具体解释下: 1.接口 ...

  10. zookeeper 应用场景概述

    Zookeeper主要可以干哪些事情:配置管理,名字服务,提供分布式同步以及集群管理. 一 .配置管理 在我们的应用中除了代码外,还有一些就是各种配置.比如数据库连接,远程服务访问地址等.一般我们都是 ...