Bootstrap 提供了一种简单且易于定制的进度条组件,可以用来展示任务完成的进度或者加载状态。进度条可以是带标签的,也可以是动画的。
基本用法
要创建一个基本的进度条,只需要在 HTML 中添加以下代码:
---- ----------------- ---- -------------------- ------------------ ------------------ ----------------- ------------------- ------------- ------ --- ------ ------
在上面的代码中,我们使用了 progress
和 progress-bar
类来创建进度条。progress-bar
元素中的 style
属性用于设置进度条的宽度,aria-valuenow
属性用于设置当前进度值,aria-valuemin
和 aria-valuemax
属性用于设置最小和最大值。
进度条样式
Bootstrap 进度条提供了多种样式,可以通过添加不同的类来改变进度条的外观。以下是一些常用的样式类:
progress-bar-success
:成功状态的进度条progress-bar-info
:信息状态的进度条progress-bar-warning
:警告状态的进度条progress-bar-danger
:危险状态的进度条
---- ----------------- ---- ------------------- --------------------- ------------------ ------------------ ----------------- ------------------- ------------- ------ --- ------ ------
动画效果
Bootstrap 进度条还支持动画效果,只需要在 progress-bar
元素中添加 active
类即可:
---- ----------------- ---- ------------------- ----------------- ------- ------------------ ------------------ ----------------- ------------------- ------------- ------ --- ------ ------
通过以上示例,你可以快速创建并定制 Bootstrap 进度条,使你的页面更加动态和吸引人。