详解Bootstrap进度条组件 - 洛水三千-html教學-PHP中文網

首頁

web前端

html教學

详解Bootstrap进度条组件 - 洛水三千

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 04:49 PM

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

进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：

<span style="color: #800000">.progress </span>{<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  margin-bottom</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f5f5f5</span>;<span style="color: #ff0000">
  border-radius</span>:<span style="color: #0000ff"> 4px</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;
}

<span style="color: #800000">.progress-bar </span>{<span style="color: #ff0000">
  float</span>:<span style="color: #0000ff"> left</span>;<span style="color: #ff0000">
  width</span>:<span style="color: #0000ff"> 0</span>;<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 100%</span>;<span style="color: #ff0000">
  font-size</span>:<span style="color: #0000ff"> 12px</span>;<span style="color: #ff0000">
  line-height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000">
  text-align</span>:<span style="color: #0000ff"> center</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #428bca</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
  -webkit-transition</span>:<span style="color: #0000ff"> width .6s ease</span>;<span style="color: #ff0000">
          transition</span>:<span style="color: #0000ff"> width .6s ease</span>;
}

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>
             <span style="color: #0000ff"><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sr-only"</span><span style="color: #0000ff">>3</span>0%<span style="color: #0000ff"></span><span style="color: #800000">span</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

role属性作用：告诉搜索引擎这个div的作用是进度条；

aria-valuenow=”30”属性作用：当前进度条的进度为40%；

aria-valuemin=”0”属性作用：进度条的最小值为0%；

aria-valuemax=”100”属性作用：进度条的最大值为100%；

可以将设置了.sr-only类的标签从进度条组件中移除，而让当前进度显示出来；

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span> <span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span>

彩色进度条

彩色进度条和警告进度条一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色，主要包括以下四种：

progress-bar-info:表示信息进度条，蓝色

progress-bar-success:表示成功进度条，绿色

progress-bar-warning:表示警告进度条，黄色

progress-bar-danger:表示错误进度条，红色

css源码：

<span style="color: #800000">.progress-bar-success </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5cb85c</span>;
}<span style="color: #800000">

.progress-bar-info </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5bc0de</span>;
}<span style="color: #800000">

.progress-bar-warning </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f0ad4e</span>;
}<span style="color: #800000">

.progress-bar-danger </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #d9534f</span>;
}

使用方法：

只需要在基础进度条上增加对应的类名即可

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>彩色进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

效果如下：

条纹进度条

条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样，具有彩色效果，只需在进度条上增加相应得颜色类名

下面是.progress-striped样式源码：

<span style="color: #800000">.progress-striped .progress-bar </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;<span style="color: #ff0000">
  background-size</span>:<span style="color: #0000ff"> 40px 40px</span>;
}

条纹进度对应的每种状态也有不同的颜色

<span style="color: #800000">.progress-striped .progress-bar-success </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-info </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-warning </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-danger </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}

下面来看看条纹进度条的运用：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

动态条纹进度条

在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。

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

下面是css源码：

<span style="color: #800000">@-webkit-keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}
@keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}</span>

@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效

调用动画对应的样式代码如下：

<span style="color: #800000">.progress.active .progress-bar </span>{<span style="color: #ff0000">
  -webkit-animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;<span style="color: #ff0000">
  animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;
}

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>动态条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:10%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-striped progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>