©
이 문서에서는PHP 중국어 웹사이트 매뉴얼풀어 주다
进度组件由两个HTML元素构建,一些CSS用来设置宽度,还有一些属性。我们不使用HTML 5元素,确保您可以堆叠进度条,使其动画化,并在其上放置文本标签。
我们使用.progress
作为一个包装器来指示进度条的最大值。
我们使用内部.progress-bar
来说明目前为止的进展。
大.progress-bar
需要内联样式、实用程序类或自定义CSS来设置其宽度。
大.progress-bar
也需要一些role
和aria
属性使其可访问。
把所有这些放在一起,你就有了下面的例子。
引导程序提供了几个设置宽度的实用程序根据您的需要,这些可能有助于快速配置进度。
将文本放置在.progress-bar
...
我们只设置了height
值的.progress
,所以如果您更改了内部的值.progress-bar
将自动调整大小。
使用背景实用工具类更改单个进度条的外观。
如果需要,在进度组件中包含多个进度条。
加.progress-bar-striped
给任何人.progress-bar
要通过CSS渐变在进度条的背景色上应用条纹,请执行以下操作。
条纹梯度也可以动画。加.progress-bar-animated
到.progress-bar
通过CSS 3动画从右向左动画。
动画进度条在Opera 12中不工作-因为他们不支持CSS 3动画。
© 2011–2017 Twitter, Inc.
©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。