## 進度條
通過這些簡單、靈活的進度條,為當前工作流程或動作提供實時反饋。
**注意:** 進度條組件使用了 CSS3 的 transition 和 animation 屬性來完成一些特效。這些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中沒有被支持。Opera 12 不支持 animation 屬性。
**默認樣式進度條**
實現原理:需要兩個容器,外容器使用類名.progress,子容器使用類名.progress-bar;其中.progress用來設置進度條容器的背景色,容器的高度,間距等;而.progress-bar設置進度方向,進度條的背景色和過度效果。
```html
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
```

*****
**帶有提示標簽的進度條**
將設置了`.sr-only`類的`<span>`標簽從進度條組件中移除 類,從而讓當前進度顯示出來。
```html
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
<span>60% Complete</span>
</div>
</div>
```

在展示很低的百分比時,如果需要讓文本提示能夠清晰可見,可以為進度條設置`min-width`屬性。
```html
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;">
<span>0% Complete</span>
</div>
</div>
```

*****
**根據情境變化效果**
進度條組件使用與按鈕和警告框相同的類,為了能給用戶一個更好的體驗,也根據不同的狀態配置了不同的進度條顏色,主要包括以下四種:
| 類 | 狀態 |
| --- | --- |
| `.progress-bar-info` | 表示信息進度條,藍色 |
| `.progress-bar-success` | 表示成功進度條,綠色|
| `.progress-bar-warning` | 表示警告進度條,黃色 |
| `.progress-bar-danger` | 表示錯誤進度條,紅色 |
```html
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span>40% Complete</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: 60%;">
<span>60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span>80% Complete</span>
</div>
</div>
```

*****
**條紋效果進度條**
通過漸變可以為進度條創建條紋效果,IE9 及更低版本不支持。條紋進度條采用css3的線性漸變來實現,并未借助任何圖片,使用條紋進度條只需在進度條的容器.progress基礎上追加類名”progress-striped”,如果要進度條紋像彩色進度一樣,具有彩色效果,只需在進度條上增加相應得顏色類名。
```html
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span>40% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span>80% Complete</span>
</div>
</div>
```

*****
**動畫效果**
給`.progress-bar-striped`添加`.active`類,使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。
```html
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
</div>
```
你需要復制以上代碼實際操作才可以展現出進度條的動態效果。
*****
**堆疊效果**
層疊進度可以將不容狀態的進度條放在一起,按水平方式排列,也就是把多個進度條放入同一個`.progress`中,使它們呈現水平排列堆疊的效果。
```html
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span>20% Complete</span>
</div>
</div>
```

- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)