Bootstrap框架中對(duì)于進(jìn)度條提供了一個(gè)基本樣式，一個(gè)100%寬度的背景色，然后個(gè)高亮的色表示完成進(jìn)度。其實(shí)制作這樣的進(jìn)度條非常容易，一般是使用兩個(gè)容器，外容器具有一定的寬度，并且設(shè)置一個(gè)背景顏色，他的子元素設(shè)置一個(gè)寬度，比如完成度是30%（也就是父容器的寬度比例值），同時(shí)給其設(shè)置一個(gè)高亮的背景色。

使用方法：

Bootstrap框架中也是按這樣的方式實(shí)現(xiàn)的，他提供了兩個(gè)容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來(lái)設(shè)置進(jìn)度條的容器樣式，而progress-bar用于限制進(jìn)度條的進(jìn)度。使用方法非常的簡(jiǎn)單：

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

運(yùn)行效果如下：

實(shí)現(xiàn)原理：

前面也說(shuō)了，這樣的基本進(jìn)度條主要分成兩部分：

progress樣式主要設(shè)置進(jìn)度條容器的背景色，容器高度、間距等：

/*bootstrap.css文件第4516行～第4524行*/
.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

而progress-bar樣式在設(shè)置進(jìn)度方向，重要的是設(shè)置了進(jìn)度條的背景顏色和過(guò)渡效果：

/*bootstrap.css文件第4525行～第4538行*/
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
          transition: width .6s ease;
}

結(jié)構(gòu)優(yōu)化：

雖然這樣實(shí)現(xiàn)了基本進(jìn)度條效果，但對(duì)于殘障人員瀏覽網(wǎng)頁(yè)有點(diǎn)困難，所以我們可以將結(jié)構(gòu)做得更好些（語(yǔ)義化更友好些）：

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

1、role屬性作用：告訴搜索引擎這個(gè)div的作用是進(jìn)度條。

2、aria-valuenow="40"屬性作用：當(dāng)前進(jìn)度條的進(jìn)度為40%。

3、aria-valuemin="0"屬性作用：進(jìn)度條的最小值為0%。

4、aria-valuemax="100"屬性作用：進(jìn)度條的最大值為100%。