Bootstrap 进度条

在 Bootstrap 5.3.3（截至 2025 年 10 月 11 日的最新版本），进度条（Progress Bars） 是一个轻量级组件，用于以可视化的方式展示任务、加载或操作的进度。Bootstrap 的进度条组件支持多种样式（如颜色、动画、标签）和交互功能，适用于文件上传、表单提交或加载状态等场景。以下是对Bootstrap 进度条的中文讲解，涵盖核心功能、类名、用法和示例。

1. Bootstrap 进度条概述

Bootstrap 的进度条（Progress Bars）通过条形图显示进度，通常用于：

任务进度：如文件上传或表单处理。
加载状态：如页面或数据加载。
状态指示：如完成百分比或步骤。

主要特点：

轻量级：仅依赖 CSS，动态更新需 JavaScript。
主题化：支持多种颜色主题（如成功、警告、危险）。
灵活性：支持标签、动画、堆叠和不同高度。
响应式：适配各种屏幕尺寸。
可访问性：内置 ARIA 属性，优化屏幕阅读器体验。

进度条通常由 <div> 组成，结合 .progress 和 .progress-bar 类实现。

2. 核心进度条类

以下是Bootstrap 进度条的主要类和用法：

(1) 基本进度条

使用 .progress 作为容器，.progress-bar 定义进度条，宽度由 style="width: X%" 或 .w-{size} 控制。

用法：

  <div class="progress" role="progressbar" aria-label="基本进度条" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%"></div>
  </div>

必要属性：
role="progressbar"：提供可访问性。
aria-label：描述进度条用途。
aria-valuenow、aria-valuemin、aria-valuemax：定义当前值和范围。

(2) 主题化进度条

使用背景色类（如 .bg-success、.bg-danger）改变进度条颜色。

用法：

  <div class="progress" role="progressbar" aria-label="成功进度条" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 50%"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="危险进度条" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 75%"></div>
  </div>

背景色类：
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

(3) 带标签的进度条

在 .progress-bar 中添加文本显示进度百分比。

用法：

  <div class="progress" role="progressbar" aria-label="带标签的进度条" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 60%">60%</div>
  </div>

(4) 动画进度条

使用 .progress-bar-animated 和 .progress-bar-striped 添加条纹和动画效果。

用法：

  <div class="progress" role="progressbar" aria-label="动画进度条" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 75%"></div>
  </div>

(5) 不同高度

通过 .progress 的 height 属性或 CSS 调整进度条高度。

用法：

  <div class="progress" style="height: 20px;" role="progressbar" aria-label="高进度条" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 50%"></div>
  </div>

(6) 堆叠进度条

在一个 .progress 容器中包含多个 .progress-bar，表示多段进度。

用法：

  <div class="progress" role="progressbar" aria-label="堆叠进度条" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 30%"></div>
    <div class="progress-bar bg-warning" style="width: 20%"></div>
    <div class="progress-bar bg-danger" style="width: 25%"></div>
  </div>

(7) 响应式进度条

结合响应式工具类（如 .d-none、.d-md-block）控制显示。

用法：

  <div class="progress d-none d-md-block" role="progressbar" aria-label="响应式进度条" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%"></div>
  </div>

3. 完整示例

以下是一个综合示例，展示多种进度条风格，包括基本、带标签、动画、堆叠和响应式进度条：

Bootstrap 进度条示例

基本进度条

带标签

75%

动画进度条

不同高度

40%

堆叠进度条

响应式进度条

仅中等屏幕显示

4. 动态进度条

进度条通常是静态的，但在动态场景中，可通过 JavaScript 动态更新进度。

示例（动态更新进度）：

  const progressBar = document.querySelector('.progress-bar');
  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    progressBar.style.width = `${progress}%`;
    progressBar.setAttribute('aria-valuenow', progress);
    progressBar.textContent = `${progress}%`;
    if (progress >= 100) clearInterval(interval);
  }, 1000);

注意：更新 aria-valuenow 以保持可访问性。

5. 定制进度条

进度条的样式基于 Sass 变量和 CSS 变量，可通过以下方式定制：

背景：$progress-bg、$progress-bar-bg。
高度：$progress-height。
圆角：$progress-border-radius。
动画：$progress-bar-animation-timing。

Sass 定制示例：

// custom.scss
$progress-bg: #f8f9fa;
$progress-bar-bg: #ff5733;
$progress-height: 1.5rem;
$progress-border-radius: 0.5rem;

@import "node_modules/bootstrap/scss/bootstrap";

<link href="custom.css" rel="stylesheet">

6. 注意事项

可访问性：
使用 role="progressbar" 和 aria-* 属性（如 aria-valuenow）。
为进度条添加 aria-label 描述用途。
动态更新：动态进度条需同步更新 style 和 aria-valuenow。
颜色对比：确保 .progress-bar 的背景色与 .progress 的背景色对比度符合 WCAG 标准。
响应式测试：在小屏幕上测试进度条，确保不溢出。
性能：避免过多动画或复杂堆叠进度条，保持 DOM 简洁。

7. 与早期版本的区别

Bootstrap 3：
使用 .progress-bar-success 等主题类（现为 .bg-success）。
较少工具类支持。
Bootstrap 4/5：
统一为 .bg-* 主题类，增强工具类和可访问性。
动画和条纹效果更流畅。

8. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/components/progress/
中文教程：https://www.bootcss.com/（非官方，可能包含旧版信息）
X 平台：搜索“Bootstrap 进度条”或“Bootstrap Progress Bars”查看社区分享。

如果你需要更详细的进度条讲解（例如动态加载、结合 AJAX）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！