bootstrap 官方无内置分步进度条，需用语义化 nav+ol 结构、aria-current 属性标记状态、css 伪元素生成图标、javascript 同步表单有效性与焦点位置，确保可访问性与响应式体验。
Bootstrap 官方没有 .steps、.step-bar 或任何内置带图标分步进度条组件，所谓“响应式 + 图标变化”的进度条，必须用语义化 nav+ol 结构 + CSS 伪元素生成图标 + JavaScript 同步状态实现。硬套 .progress 或第三方封装，会破坏键盘导航、屏幕阅读器识别和表单联动逻辑。
用 nav+ol+aria-current 搭语义化结构
步骤条本质是导航控件，不是数值反馈器。必须用 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 实现，别用固定宽度
连接线随步骤推进延伸，靠纯 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，避免底部多一条线 - 绝对定位或
::after画线易在断点错位，尤其文字折行后连线偏移
切换前必须同步校验，不能只改 UI
用户点“下一步”不能只加 aria-current 或改样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂：
- 在点击事件里调用
checkStepValidity()，而不是等最终submit时才校验 - 校验失败时，用
input.focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过：
nextBtn.disabled = true，别只加opacity: 0.5 - 若某步含异步校验（如用户名可用性检查），按钮需进 loading 状态，并设
disabled防重复提交
真正难的不是画出圆点和连线，而是让 aria-current 始终与表单字段有效性、焦点位置、URL 锚点三者严格同步——漏掉任一环，可访问性和用户体验就塌了一半。
