bootstrap 官方无内置分步表单组件，必须用语义化结构（+）+自定义css+状态同步js实现；需用aria-current标记步骤状态、伪元素绘制连线与图标、小屏竖排适配、切换前校验表单、服务端准确输出aria-current。
Bootstrap 官方没有 .steps、.step-bar 或任何内置分步表单组件，所谓“响应式分步表单进度条”，必须用语义化结构 + 自定义 CSS + 状态同步 JS 实现。硬套 .progress 组件或第三方封装，会破坏键盘导航、读屏支持和步骤状态一致性。
用 <nav></nav> + <ol></ol> 搭语义化步骤结构
步骤条本质是导航控件，不是数值反馈器。必须用 <nav aria-label="表单步骤"></nav> 包裹有序列表，每步用 <li class="nav-item">，链接用 <a></a> 并通过 aria-current 标记状态：
-
aria-current="step"表示当前进行中（屏幕阅读器可读，Bootstrap 5+ 推荐） -
aria-current="true"或自定义data-status="completed"表示已完成（仅当需区分“完成”与“进行中”时） - 别用
class="active"——它对辅助技术不可见，也不参与状态绑定 - 每个
<a href="#step-2"></a>必须指向对应表单区域 ID，确保浏览器前进/后退和锚点跳转可用
连线与状态图标用伪元素实现，别写死宽度
连接线和状态圆点不能靠绝对定位或内联 style.width 控制，否则小屏错位、缩放偏移、动画卡顿。推荐方案：
- 连线用
.nav-item:not(:last-child) .nav-link::after+flex-grow: 1动态撑开，避免最后一项多画一条线 - 状态图标统一用
::before生成圆点：.nav-link::before { content: ""; display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-right: 0.5rem; } - 样式由属性驱动：
[aria-current="step"]::before设主色，[aria-current="true"]::before设完成色，:not([aria-current])::before设灰阶未激活色 - 小屏竖排时重置布局：
@media (max-width: 576px) { .step-nav { flex-direction: column; gap: 1rem; } .nav-link { padding: 0.75rem 1rem; font-size: 0.875rem; } }
切换前必须同步校验，不能只改 UI
用户点“下一步”不能只加 aria-current 或改样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。真实流程必须：
- 在点击事件里调用
checkStepValidity()，而不是等最终submit时才校验 - 校验失败时，用
input.focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过：
nextBtn.disabled = true，别只加opacity: 0.5 - 若某步含异步校验（如用户名可用性检查），按钮需进 loading 状态，并设
disabled防重复提交
服务端渲染时 aria-current 必须由后端准确输出
React/Vue hydrate 过程容易导致状态错位：比如 SSR 渲染出 aria-current="step" 在第 1 步，但客户端 JS 初始化后误标为第 2 步。关键点：
- 后端模板必须根据当前步骤动态输出
aria-current属性，不能靠 JS 后补 - 客户端 JS 切换步骤时，应以 DOM 上的
aria-current值为唯一可信源，而非内部 state 变量 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用disabled——后者会砍掉键盘焦点
真正难的不是画线或变色，而是让每一步的 DOM 状态、无障碍属性、表单校验、URL 锚点、服务端输出全部严格对齐。少一个环节，键盘用户就卡住，读屏软件就报错，后端就收不到完整数据。
