进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下:
添加一个带有 .progress 类的
进度条高度默认为 16px。我们可以使用 CSS 的 height
属性来修改他:
可以在进度条内添加文本,如进度的百分比:
实例
默认情况下进度条为蓝色,Bootstrap4 还提供了以下颜色的进度条:
实例
可以使用 .progress-bar-striped
类来设置条纹进度条:
使用 .progress-bar-animated
类可以为进度条添加动画:
进度条可以设置多种颜色:
实例