Bootstrap 官方无内置步骤条组件，必须用语义化 nav+ol 结构配合 aria-current、CSS 伪元素和 JavaScript 状态同步实现；.progress 不适用，因其专为百分比设计，无法支持离散步骤导航、焦点控制与动态步数映射。
Bootstrap 官方没有 .steps、.step-bar 或任何内置步骤进度指示器组件，所谓“响应式 + 图标变化”的进度条，必须用语义化 nav+ol 结构 + CSS 伪元素生成图标 + JavaScript 同步状态实现。硬套 .progress 或第三方封装，会破坏键盘导航、屏幕阅读器识别和表单联动逻辑。
为什么不能用 .progress 改造成步骤条
.progress 是为百分比型数值反馈设计的：aria-valuenow 表示 0–100 的连续值，不是离散步骤编号。强行复用会导致三个硬伤：
- 屏幕阅读器只读 “进度 60%”，无法告知用户 “当前在第二步”
- 每个步骤无法独立设置
href、焦点区域或点击行为，交互能力归零 - 步骤数动态变化（比如跳过第 3 步）时，
max/value很难准确映射，JS 同步成本高且易错位
nav+ol 结构怎么写才语义正确
步骤条本质是导航控件，不是装饰性 UI。必须用 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——后者会砍掉键盘焦点
图标变化怎么用伪元素安全实现
图标（圆点、对勾、数字）必须通过 CSS ::before 生成，避免污染语义结构。关键在属性选择器驱动样式：
- 当前步：
[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高度撑开导致行距失衡
连线怎么画才不拉伸变形
连接线随步骤推进延伸，靠纯 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 下行为不稳定）
真正容易被忽略的是状态同步时机：用户点“下一步”不能只改 aria-current 或样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。校验必须在点击事件里实时触发，且失败时要 focus() 到第一个无效字段——UI 和数据状态必须严格一致，否则无障碍和表单完整性都会崩掉。
