进度条
这是关于 Bootstrap 的自定义进度条(progress bar)相关的文档和示例。进度条(progress bar)支持堆叠、动画背景和文本标签。
工作原理
进度条(progress)组件由两个 HTML 元素、一些用于设置宽度的 CSS 样式和一些其它属性组成。我们并未使用 HTML5 的 <progress>
元素,以确保可以堆叠进度条(progress bar)并添加动画效果,以及在其上面放置文本标签。
- 我们使用
.progress
作为最外层元素,用于指示进度条(progress bar)的最大值。 - 我们在内部使用
.progress-bar
来指示到目前为止的进度。 .progress-bar
需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。.progress-bar
还需要一些role
和aria
属性来实现其可访问性。
将上面这些组合到一起,就是以下这些示例:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
Bootstrap 提供了几个用于设置宽度的工具类。根据你自己的需求,这些工具类可能有助于你快速设置进度。
<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
标签
通过在 .progress-bar
元素内添加文本,就可以为进度条(progress bar)添加标签。
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div>
高度
我们只为 .progress
设置了一个 height
值,因此,如果你改变了该值,内部的 .progress-bar
将自动地调整尺寸。
<div class="progress" style="height: 1px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
背景色
通过使用背景色相关的工具类可以改变单个进度条(progress bar)的外观。
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
多个进度条
如果需要,可以在一个进度条(progress)组件内可以添加多个进度条(progress bar)。
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>
条纹进度条
为任何 .progress-bar
添加 .progress-bar-striped
即可添加条纹样式,这是通过 CSS 的渐变功能在进度条(progress bar)的背景色上应用条纹效果实现的。
<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
动画条纹
条纹渐变也可以有动画效果。为 .progress-bar
添加 .progress-bar-animated
即可利用 CSS3 动画功能添加条纹从右到左滚动的动画效果。
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div>