Bootstrap 3 之 Bootstrap 进度条

Bootstrap 提供了一种简单且易于定制的进度条组件,可以用来展示任务完成的进度或者加载状态。进度条可以是带标签的,也可以是动画的。

基本用法

要创建一个基本的进度条,只需要在 HTML 中添加以下代码:

---- -----------------
  ---- -------------------- ------------------ ------------------ ----------------- ------------------- ------------- ------
    ---
  ------
------

在上面的代码中,我们使用了 progressprogress-bar 类来创建进度条。progress-bar 元素中的 style 属性用于设置进度条的宽度,aria-valuenow 属性用于设置当前进度值,aria-valueminaria-valuemax 属性用于设置最小和最大值。

进度条样式

Bootstrap 进度条提供了多种样式,可以通过添加不同的类来改变进度条的外观。以下是一些常用的样式类:

  • progress-bar-success:成功状态的进度条
  • progress-bar-info:信息状态的进度条
  • progress-bar-warning:警告状态的进度条
  • progress-bar-danger:危险状态的进度条
---- -----------------
  ---- ------------------- --------------------- ------------------ ------------------ ----------------- ------------------- ------------- ------
    ---
  ------
------

动画效果

Bootstrap 进度条还支持动画效果,只需要在 progress-bar 元素中添加 active 类即可:

---- -----------------
  ---- ------------------- ----------------- ------- ------------------ ------------------ ----------------- ------------------- ------------- ------
    ---
  ------
------

通过以上示例,你可以快速创建并定制 Bootstrap 进度条,使你的页面更加动态和吸引人。


上一篇:Bootstrap 警告
下一篇:Bootstrap 多媒体对象