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