<p>Bootstrap 5 中进度条颜色需用 bg-* 类加在 .progress-bar 上，高度须同步设置两层容器，动态更新时需处理边界值并同步 aria-valuenow。</p>
怎么用 class 快速改进度条颜色
bootstrap 5 已弃用 progress-bar-success 这类旧类名，直接用 bg-* 背景色类即可生效，且必须加在 .progress-bar 元素上。
- 写成
<div class="progress-bar bg-warning"></div>才有效；写在外层.progress容器上没用 - 支持的色值类包括：
bg-primary、bg-success、bg-danger、bg-info、bg-warning、bg-secondary、bg-dark、bg-light - 若需自定义颜色（比如 #ff6b35），别硬套 class，直接用
style="background-color: #ff6b35;"更可靠——Bootstrap 的bg-*类可能被 CSS 优先级覆盖或主题重置
为什么设高度要同时改两层容器
进度条默认高 1rem（约 16px），但只改 .progress 或只改 .progress-bar 都会出视觉错位：前者留白，后者被裁切。
- 必须同步设置两者高度，例如：
<div class="progress" style="height: 24px;"> <div class="progress-bar" style="height: 24px; width: 65%;"></div> </div>
- 如果用 SCSS 或全局 CSS，建议统一定义：
.progress, .progress-bar { height: 20px; }，避免漏掉某一层 - 注意：Bootstrap 5 不再支持
progress-sm/progress-lg这类尺寸类，全靠手动控制 height
动态改色时容易忽略的逻辑断点
纯靠 PHP 或 JS 根据数值切换颜色时，常见错误不是语法，而是阈值边界和 class 冲突。
- 比如判断
if ($percent < 30) echo 'bg-danger'; elseif ($percent < 70) echo 'bg-warning'; else echo 'bg-success';，但没处理$percent === 0或100的极端情况，导致空进度条颜色异常 - JS 动态更新时，若重复添加 class（如多次执行
el.classList.add('bg-success')），不会报错但可能堆积冗余 class，建议先清空：el.className = 'progress-bar'; el.classList.add(newColorClass); - ARIA 属性（
aria-valuenow）必须随 width 同步更新，否则屏幕阅读器读出的数值和视觉不一致——这不是样式问题，是可访问性硬要求
动画和条纹效果现在怎么开
Bootstrap 5 移除了 progress-striped 和 active 这两个 class，条纹和动画得靠 CSS 自定义实现。
- 要条纹效果：给
.progress-bar加background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%), linear-gradient(45deg, transparent 50%, rgba(255,255,255,.15) 50%), linear-gradient(45deg, rgba(255,255,255,.15) 75%, transparent 75%), linear-gradient(45deg, transparent 100%); background-size: 1rem 1rem; - 要循环动画：额外加
animation: progress-bar-stripes 1s linear infinite;，并定义@keyframes progress-bar-stripes - 注意：这些 CSS 必须作用于
.progress-bar，且不能被 Bootstrap 的 background-color 覆盖——建议把渐变写在 color 类之后，或用!important（仅限兜底）
.progress 和 .progress-bar 的 height 必须严格一致，或者 JS 更新 width 后忘了同步更新 aria-valuenow。这两处一错，UI 看着正常，但自动化测试或读屏软件就会报错。 
