直接在.progress-bar内写文字即可显示百分比，文字随进度自然居中跟随，需同步更新aria-valuenow与width值确保无障碍一致，多段进度条须各自配置文字和ARIA属性。
直接在 .progress-bar 里写文字就能显示百分比
bootstrap 的进度条本身不自动渲染文字，但支持直接把文本塞进 <div class="progress-bar">60%</div> ——浏览器会原样显示。这是最轻量、兼容性最好的做法，不需要额外 js 或 css。
- 文字默认居中对齐，字体大小继承父级，若太小可加
font-size: 0.875rem调整 - 注意留白：当进度很窄（比如
width: 5%）时，文字可能被截断或溢出，建议搭配overflow: hidden; text-overflow: ellipsis; - 别用
<span></span>包文字——它会破坏默认的 flex 居中逻辑，导致文字偏移
aria-valuenow 必须和实际 width 保持一致
这是无障碍关键点：屏幕阅读器靠 aria-valuenow 读出数值，而视觉进度靠 style="width: X%" 渲染。两者不一致会导致残障用户听到的和看到的完全对不上。
- 错误示例：
aria-valuenow="75"但style="width: 40%"→ 用户以为完成 75%，实际只走了 40% - 动态更新时，必须同步改两个值，例如：
$el.attr('aria-valuenow', 82).css('width', '82%').text('82%') - Bootstrap 5 默认已加
role="progressbar"，漏掉这个属性会让部分读屏器直接忽略该元素
百分比文字随进度“贴着动”，不是固定位置
文字是 .progress-bar 的子内容，天然跟随宽度缩放和定位。也就是说，它不会像绝对定位那样悬在右边，而是始终“长在进度条上”——进度到哪，文字就显到哪。
- 想让文字始终可见？确保
.progress-bar最小宽度够容纳两位数（如min-width: 2em），否则 5% 时文字会被压扁 - 不想文字被进度条颜色盖住？默认文字是白色，但若用了浅色背景类（如
bg-light），得手动加color: #212529 - 动画条纹（
progress-bar-striped+progress-bar-animated）不影响文字渲染，可放心叠加
多段进度条里，每段都要单独配文字和 ARIA 值
一个 .progress 容器内放多个 .progress-bar（比如表示不同任务阶段），每段都是独立控件，不能共用一套 ARIA 属性。
- 错误写法：只给第一个
.progress-bar加aria-valuenow，其余没加 → 其余段对读屏器不可见 - 正确做法：每段都带完整 ARIA，且
aria-valuenow是该段自身占比（不是累计值） - 示例中三段总和为 90%，但每段的
aria-valuemin/max仍应是0/100，因为每段代表独立子任务的完成度
