bootstrap 官方无内置分步组件，必须用语义化 nav+ol 结构、aria-current 标记状态、css 伪元素生成图标、border-right/flex-grow 实现连线，并在校验通过后同步更新 aria-current。
Bootstrap 官方没有 .steps、.step-bar 或任何内置的分步进度指示器组件，所谓“响应式 + 图标变化”的进度条，必须用语义化结构（nav + ol）+ CSS 伪元素驱动图标 + JavaScript 同步状态实现。硬套 .progress 或第三方封装，会破坏键盘导航、屏幕阅读器识别和表单联动逻辑。
用 nav + ol 搭语义化结构，别用 div 堆砌
步骤条本质是导航控件，不是数值反馈器。必须用 nav 包裹有序列表，每步用 li + a，靠 aria-current 标记状态：
-
aria-current="step"是唯一被屏幕阅读器识别的“当前步”方式；class="active"对读屏软件不可读，也不符合 Bootstrap 5+ 推荐实践 - 每步
a的href应指向对应表单区域（如#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+margin-bottom: 1rem - 只在非最后一项画线：
.nav-item:not(:last-child) .nav-link::after，避免底部多一条线 - 小屏下重置
gap和padding：.step-nav { gap: 1rem; }，别依赖gap-3这类工具类——flex column 下对齐不稳定 - 绝对定位或
::after画线易在断点错位，尤其文字折行后连线偏移
状态同步必须绑定表单校验，不能只改 UI
用户点“下一步”时，UI 走到第 3 步但第 2 步字段根本没填，这种逻辑断裂比样式错位更致命：
- 点击事件里必须调用
checkStepValidity()，而不是等最终submit时才校验 - 校验失败时，用
focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过校验：
btn.disabled = true，别只加opacity: 0.5 - 如果某步异步校验（比如检查用户名是否可用），按钮要进 loading 状态，且禁止重复点击
- 进度指示的视觉反馈，关键在
aria-current更新时机——必须在校验通过后才设置，不能提前
最容易被忽略的是：状态图标和连线样式完全依赖 aria-current 的存在与值，一旦 JS 更新顺序错乱（比如先改 DOM 再校验）、或服务端与客户端 hydrate 不一致，整个步骤条就会“看起来对，实际不可用”。这不是样式问题，是交互契约的断裂。
