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着。