Bootstrap官方无内置步骤组件，必须用<nav>+<ol>语义化结构、aria-current标记状态、伪元素生成图标与连线、JS同步校验实现；硬套<progress>或第三方封装会破坏无障碍与表单联动。
Bootstrap 官方没有 .steps、.step-bar 或任何内置的步骤进度指示器组件，所谓“响应式 + 状态变化”的效果，必须用语义化结构（<nav> + <ol>）+ CSS 伪元素驱动图标 + JavaScript 同步状态实现。硬套 <progress> 或第三方封装，会破坏键盘导航、屏幕阅读器识别和表单联动逻辑。
用 <nav> + <ol> 搭语义化结构，别用 div 堆砌
步骤条本质是导航控件，不是数值反馈器。必须用 <nav aria-label="表单步骤"> 包裹有序列表，每步用 <li class="nav-item"> + <a class="nav-link">，靠 aria-current 标记状态：
-
aria-current="step"是唯一被屏幕阅读器识别的“当前步”方式；class="active"对读屏软件不可读，也不符合 Bootstrap 5+ 推荐实践 - 每步
<a>的href应指向对应表单区域 ID（如#step-2），确保浏览器前进/后退和锚点跳转可用 - 服务端渲染时，
aria-current必须由后端准确输出；否则 React/Vue hydrate 易错位 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，而不是disabled——后者会砍掉键盘焦点
状态图标用 ::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: step;自增编号 - 图标大小和垂直对齐需设
line-height和vertical-align: middle，否则基线错位 - 字体大小建议移动端降到
0.875rem，防止nav-link高度撑开导致行距失衡
连线用 border-right + flex-grow，别用 transform 或固定宽度
连接线随步骤推进延伸，靠纯 CSS 动态撑开最稳：
- 横排时：给非末项的
.nav-link加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，避免底部多一条线 - 小屏下重置
gap和padding：.step-nav { gap: 1rem; }，别依赖gap-3（它在flex-column下行为不稳定）
切换前必须同步校验，不能只改 UI
用户点“下一步”不能只加 aria-current 或改样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。真实流程必须：
- 在点击事件里调用
checkStepValidity()，而不是等最终submit时才校验 - 校验失败时，用
input.focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过：
nextBtn.disabled = true，别只加opacity: 0.5 - 若某步含异步校验（如用户名可用性检查），按钮需进
loading状态，并设disabled防重复提交
最容易被忽略的是：状态变更和表单校验必须强绑定，且 aria-current 的值必须与 DOM 实际可聚焦状态严格一致——哪怕只是视觉上“看起来对了”，只要键盘无法按 Tab 键顺序进入当前步，或屏幕阅读器读不出“正在填写第 2 步”，整个流程就已失效。
