怎樣創(chuàng)建一個(gè)進(jìn)度條 嘱函？
- 為外部
<div>設(shè)置.progress類，作為進(jìn)度槽 - 為內(nèi)部
<div>設(shè)置.progress-bar作為進(jìn)度條，進(jìn)度在style中設(shè)置 - 可以在進(jìn)度條內(nèi)部添加文字瘦黑，也可以添加輔助文本
<div class="progress">
<div class="progress-bar" style="width: 60%;">
60%
</div>
</div>
<!-- 輔助文本 -->
<div class="progress">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
01.PNG
怎樣創(chuàng)建帶斜紋的進(jìn)度條 ？
在進(jìn)度槽上增加一個(gè) .progress-striped 類即可
<div class="progress progress-striped">
......
</div>
02.PNG
怎樣創(chuàng)建其他顏色的進(jìn)度條 奇唤？
在進(jìn)度槽上增加 .progress-bar-* 類幸斥， * 可以是 success, info, warning, danger
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
......
</div>
</div>
03.PNG
什么是堆疊進(jìn)度條？
堆疊進(jìn)度條就是一個(gè)進(jìn)度條分為好幾段咬扇，每段的顏色不同
<div class="progress">
<!-- 第一段：40% -->
<div class="progress-bar progress-bar-success" style="width: 40%">
......
</div>
<!-- 第二段：25% -->
<div class="progress-bar progress-bar-warning" style="width: 25%">
......
</div>
<!-- 第三段：15% -->
<div class="progress-bar progress-bar-danger" style="width: 15%">
......
</div>
</div>
04.PNG
怎么給進(jìn)度條添加動(dòng)畫效果睡毒？
給條紋進(jìn)度條增加 .active 樣式就可以出現(xiàn)動(dòng)畫效果
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 45%">
......
</div>
</div>
05.PNG
