Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

进度条

使用一些额外的类和一些巧妙的浏览器特有的CSS,样式化the HTML5 的<progress> 元素。确保你阅读了浏览器支持。

内容

示例

0% 25% 50% 75% 100%
<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>

IE9 支持

Internet Explorer 9 不支持HTML5的<progress>元素,但是我们可以绕过它:

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

上下文的替代品

进度条使用一些与按钮以及alert相同的类,以统一样式。

25% 50% 75% 100%
<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>

条纹

使用渐变以创建条纹效果。

10% 25% 50% 75% 100%
<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动画。

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