使用 Bootstrap 自定义进度条的文档和示例,支持堆叠条、动画背景和文本标签。
这个怎么运作
Progress 组件由两个 HTML 元素、一些用于设置宽度的 CSS 和一些属性构建而成。我们不使用HTML5<progress>
元素,确保您可以堆叠进度条、为其设置动画并在其上放置文本标签。
- 我们使用
.progress
作为包装器来指示进度条的最大值。
- 我们使用内部
.progress-bar
来表示到目前为止的进度。
- 这
.progress-bar
需要内联样式、实用程序类或自定义 CSS 来设置它们的宽度。
.progress-bar
还需要一些role
和aria
属性才能使其可访问。
将所有这些放在一起,您就有以下示例。
Bootstrap 提供了一些用于设置宽度的实用程序。根据您的需要,这些可能有助于快速配置进度。
标签
通过在.progress-bar
.
高度
我们只height
在 上设置了一个值.progress
,因此如果您更改该值,内部.progress-bar
将自动相应地调整大小。
背景
使用后台实用程序类来更改各个进度条的外观。
多个酒吧
如果需要,可以在进度组件中包含多个进度条。
有条纹的
添加.progress-bar-striped
到任何.progress-bar
以通过 CSS 渐变在进度条的背景颜色上应用条纹。
动画条纹
条纹渐变也可以设置动画。添加.progress-bar-animated
到.progress-bar
通过 CSS3 动画从右到左为条纹设置动画。