进度条 Progress
进度条用外层 .progress 作为轨道、内层 .progress-bar 作为填充，配合宽度、背景色、条纹动画等类，组合出标签、堆叠段与不同高度等常见形态。
基础进度条
外层 .progress 需带 role="progressbar" 与 aria-valuenow / min / max 保证无障碍；内层 .progress-bar 用内联样式设置宽度，展示 25%、50%、75%、100% 四档。
HTML 示例
带百分比标签
直接在 .progress-bar 内写入文本，即可把百分比标签显示在进度条内部；浅色背景上的文字记得加 text-dark 保证可读。
HTML 示例
多种颜色
给 .progress-bar 叠加 bg-* 背景工具类，就能切换成成功、说明、警告、危险等语义色。
HTML 示例
条纹与动画
progress-bar-striped 用 CSS 渐变画出斜纹底色；再叠加 progress-bar-animated，条纹就会从右向左滚动，常用于「加载中」状态。
HTML 示例
多段堆叠
在 .progress-stacked 容器内放多个 .progress，就组成一条分段进度条；注意此时宽度要写在每个 .progress 上，而不是内层 .progress-bar。
HTML 示例
不同高度
只需在外层 .progress 上设置 height（如 1px 细线、20px 常规条），内层进度条会自动撑满。
HTML 示例