Bootstrap 官方无内置步骤条组件，必须用 nav+ol 语义化结构配合 aria-current="step"、CSS 伪元素图标、border-right/flex-grow 连线及表单校验同步实现，否则破坏无障碍与维护性。
bootstrap 官方没有 .steps、.step-bar 或带状态图标的内置步骤条组件。所谓“响应式步骤进度条”，必须用语义化结构（nav+ol）+ 自定义 css + 状态驱动逻辑实现，硬套 .progress 会破坏无障碍、键盘导航和表单联动——这不是省事，是给后续维护埋坑。
用 nav + ol 搭语义化结构，别用 div 堆砌
步骤条本质是导航控件，不是数值反馈器。必须用 nav 包裹有序列表，每步用 li + a，靠 aria-current="step" 标记当前项：
-
aria-current="step"是唯一被屏幕阅读器识别的“当前步”方式；class="active"对读屏软件不可读，也不符合 Bootstrap 5+ 推荐实践 - 每步
a的href应指向对应表单区域（如#step-2），支持浏览器前进/后退和锚点跳转 - 禁用未激活项时，不用
disabled（它砍掉键盘焦点），改用tabindex="-1"+pointer-events: none - 服务端渲染时，确保
aria-current属性由后端准确输出，否则 React/Vue hydrate 易错位
状态图标用伪元素 ::before 实现，不插额外 DOM
图标（圆点、对勾、数字等）应通过 CSS 生成，避免污染语义结构。关键点在属性选择器驱动样式：
- 当前步：
[aria-current="step"]::before { content: "●"; color: #0d6efd; } - 已完成步：
[aria-current="true"]::before { content: "✓"; color: #198754; }（注意：不要混用"true"和"step"） - 未开始步：
:not([aria-current])::before { content: counter(step); }配合counter-reset自增编号 - 图标大小和垂直对齐需设
line-height和vertical-align: middle，否则基线错位
响应式连线用 border-right + flex-grow，别用伪元素画线
连接线随步骤推进延伸，靠纯 CSS 动态撑开最稳：
- 横排时：给非末项的
.nav-link加border-right: 2px solid #e9ecef，再设flex-grow: 1让箭头自动填满剩余空间 - 竖排时（
@media (max-width: 576px)）：移除border-right，改用border-bottom+margin-bottom: 1rem - 绝对定位或
::after画线易在断点错位，尤其文字折行后连线偏移 - 小屏下重置
gap和padding：.step-nav { gap: 1rem; }，别依赖gap-3这类工具类——flex column 下对齐不稳定
状态同步必须绑定表单校验，不能只改 UI
用户点“下一步”时，UI 走到第 3 步但第 2 步字段为空，这是典型逻辑断裂。必须同步校验：
- 点击事件里调用
checkStepValidity()，而不是等submit才校验 - 校验失败时，用
focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过：
btn.disabled = true，别只加opacity: 0.5 - 异步校验（如用户名可用性）时，按钮进
loading状态，且禁止重复点击
真正难的不是画出连线或图标，而是让 aria-current、表单校验、键盘焦点、响应式断点四者始终同步——漏掉任意一环，移动端用户或残障用户就卡在某一步无法推进。
