4.1五、Bootstrap V4自學之路-----組件---進度條

示例

<progress class="progress" value="0" max="100">0%</progress>
<progress class="progress" value="25" max="100">25%</progress>
<progress class="progress" value="50" max="100">50%</progress>
<progress class="progress" value="75" max="100">75%</progress>
<progress class="progress" value="100" max="100">100%</progress>

PS：這感受是挺開心的。雖然用到的地方可能很少，可是用到的話，必定很贊！

IE9 支持

Internet Explorer 9 不支持HTML5的<progress>元素，可是咱們能夠繞過它：

<progress class="progress" value="25" max="100">
  <div class="progress">
    <span class="progress-bar" style="width: 25%;">25%</span>
  </div>
</progress>

IE9,你好！再見！

若是爲了IE9，所有都這樣去寫兼容，感受有些被拖累。若是是作產品的話這個方法必定不能少。說着說，爲了作產品，確定還會用BSv3吧。

補一張IE9不兼容的樣子。

上下文的替代品

進度條使用一些與按鈕以及alert相同的類，以統同樣式。

是使用 .progress-success類等。 還記得嗎？

<progress class="progress progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-danger" value="100" max="100">100%</progress>

PS：我本來只想是顏色用起來比較豐富。但看了subtitle，我以爲全部的*-success等類，都是能夠用在樣式統一上的。

條紋

使用漸變以建立條紋效果。使用條紋.progress-striped類 達到條紋色彩的效果。 striped 英文是，條紋。

<progress class="progress progress-striped" value="10" max="100">10%</progress>
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>

會動的條紋

條紋漸變還能夠動起來。在.progress中添加.progress-animated，能夠利用CSS3動畫讓條紋從右向左滾動。

會動的進度條在IE9和Opera12中不起做用，由於它們不支持CSS3動畫。animated，英文是，動畫，活生生的。

<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>

這個我失敗了。FF下不會動。chrome下也不會動。英文文檔也沒有介紹。且行且看吧，mark着。