Bootstrap官方无内置分步组件，必须用<nav>+<ol>语义结构、aria-current标记状态、CSS伪元素生成图标、JS同步校验与焦点；硬套.progress或第三方封装会导致无障碍失效、图标与状态脱节。
Bootstrap 官方没有内置分步引导表单组件，所谓“响应式 + 动态图标进度”，必须用 <nav> + <ol> 语义结构、aria-current 驱动状态、CSS 伪元素生成图标、JavaScript 同步校验与焦点——任何硬套 .progress 或第三方封装，都会让键盘导航失效、屏幕阅读器读不出“第几步”，且图标与状态脱节。
怎么搭语义结构才不被读屏软件跳过
步骤条不是装饰，是导航控件。必须用 <nav aria-label="注册流程"> 包裹 <ol class="nav nav-pills">，每步是 <li class="nav-item"><a href="#step-2" class="nav-link">账户设置</a></li>。
-
aria-current="step"是唯一被读屏软件识别的“当前步”，写成class="active"或data-step="2"都无效 - href 必须指向真实锚点（如
#step-2），否则浏览器前进/后退、键盘 Tab 跳转会断掉 - 服务端渲染时，
aria-current必须由后端输出；若前端 JS 动态加，React/Vue hydrate 容易错位，导致“UI 显示第三步，但读屏器仍读第二步” - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用disabled——后者会让键盘焦点直接跳过该链接
图标怎么用 CSS 生成才不破坏语义和响应式
所有图标（圆点、对勾、数字）必须用 ::before 伪元素生成，不能插 <i> 或 SVG，否则语义污染、小屏错位、缩放偏移。
-
.nav-link::before统一设为display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; - 状态靠属性选择器：
[aria-current="step"]::before { background-color: #0d6efd; }、[aria-current="true"]::before { content: "✓"; color: #198754; }、:not([aria-current])::before { content: counter(step); }（配合counter-reset: step;） - 移动端字体缩小到
font-size: 0.875rem，否则nav-link行高撑开，图标基线漂移 - 别用
position: absolute塞图标——文字折行时图标会叠在文字上，尤其小屏
连线怎么画才不随断点拉伸变形
连接线是进度指示的核心，不能靠固定宽度或 transform: scaleX()，否则缩放、横竖切换时连线断裂或偏移。
- 横排时：给非末项加
border-right: 2px solid #e9ecef，再设flex-grow: 1让它自动填满剩余空间 - 竖排时（
@media (max-width: 576px)）：移除border-right，改用border-bottom: 2px solid #e9ecef+margin-bottom: 1rem - 关键过滤：只对
.nav-item:not(:last-child) .nav-link生效，避免底部多一条线 - 别用
::after画箭头——它依赖父容器高度，文字折行后箭头位置飘移；border方案更稳
为什么点了“下一步”图标没变、进度卡住
常见错误是只改 UI 不同步状态：JS 只调了 el.classList.add("active")，但没更新 aria-current，也没校验表单，结果“视觉走到第三步，邮箱字段还是空的”。
- 点击“下一步”必须先调
checkStepValidity()，失败就input.focus()定位第一个错误字段，别只弹alert - 校验通过后，手动设
prevLink.removeAttribute("aria-current")、nextLink.setAttribute("aria-current", "step")，再触发scrollIntoView() - 若某步含异步校验（如用户名查重），按钮要进 loading 状态：
nextBtn.disabled = true+nextBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 检查中...' - 进度值不能只靠 CSS 动画模拟——真实进度必须绑定表单字段有效性，否则用户刷新页面后状态丢失
最易被忽略的是：动态图标变化必须和 aria-current 属性严格同步，而这个属性又必须和表单字段校验结果一致。三者脱节，就会出现图标对、进度错，或读屏器读错、键盘焦点乱跳的情况。
