4.16.3　条纹样式

与其他组件只提供多种颜色不同，Bootstrap还为进度条提供了一种条纹样式，并且不同的颜色可以显示不同的条纹。示例用法如下：

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>

上述示例的运行效果如图4-77所示。

图4-77　条纹进度条效果

通过示例代码和运行效果可以看出，只是在容器元素上附加了一个新的progress-striped样式，该样式的实现是利用CSS3的线性渐变特性linear-gradient来实现的。源码如下：

// 源码4546行
.progress-striped .progress-bar {       /* 下面是根据不同的浏览器进行线性渐变的设置，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);
  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);
  background-size: 40px 40px;   /* 以每40像素为一个块进行背景显示 */
}

而其他颜色下的条纹样式，因为都已经设置了颜色，所以也会相应地变化。

Bootstrap在上述4个背景颜色设置的时候也重复了线性渐变的代码，但其实是没必要的，因为.progress-striped .progress-bar样式已经设置了，而有了其他颜色设置的时候，这两个颜色也是存在的，所以不需要多此一举。