Bootstrap官方无内置步骤组件，必须用nav+ol语义结构、aria-current属性驱动状态、border-right/flex-grow实现连接线、伪元素生成图标，并严格同步表单校验与无障碍属性。
Bootstrap 官方没有 .steps、.step-bar 或任何内置的步骤进度指示器组件。所谓“带连接线和状态色的响应式步骤条”，必须用语义化结构 + 属性驱动 CSS + 状态同步逻辑实现，硬套 progress 或第三方封装会破坏键盘导航、屏幕阅读器识别和表单校验一致性。
用 nav + ol 搭语义化结构，别用 div 或 list-group
步骤条本质是导航控件，不是数值反馈器。必须用 <nav aria-label="步骤导航"> 包裹有序列表，每步为 <li class="nav-item"><a href="#step-2" class="nav-link">确认订单</a></li>。
-
aria-current="step"是唯一被屏幕阅读器识别的“当前进行中”状态；class="active"对辅助技术不可见，也不符合 Bootstrap 5+ 推荐实践 - 每项
href必须指向对应表单锚点（如#step-2），否则浏览器前进/后退和键盘Tab导航会失效 - 服务端渲染时，
aria-current属性必须由后端准确输出；React/Vue hydrate 若没同步该属性，状态就会错位 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，而不是disabled—— 后者直接砍掉键盘焦点能力
border-right + flex-grow 实现动态连接线，别用 ::after 画箭头
横排时连接线要随容器宽度自适应伸缩，不能靠固定宽度、transform: scaleX() 或伪元素硬写路径——这些在小屏文字折行后极易错位或拉长变形。
- 只对非末项画线：
.nav-item:not(:last-child) .nav-link上设border-right: 2px solid #e9ecef，再配合flex-grow: 1让右侧空间自动撑开 - 移动端竖排时，在
@media (max-width: 576px)中移除border-right，改用border-bottom: 2px solid #e9ecef+margin-bottom: 1rem - 别依赖
gap-3这类工具类：在flex-column下它们会导致间距爆炸、连线偏移、基线不对齐 - 文字换行时，确保
.nav-link的line-height和vertical-align: middle一致，否则圆点图标会悬空或下沉
状态色由 aria-current 属性选择器驱动，禁用 class 切换
颜色变化必须与语义状态严格绑定，不能靠 JS 动态加 class 再写样式——这会导致无障碍属性缺失、服务端/客户端状态不一致。
- 当前步：
[aria-current="step"] { color: #0d6efd; }+[aria-current="step"]::before { background-color: #0d6efd; } - 已完成步：
[aria-current="true"] { color: #198754; }+[aria-current="true"]::before { content: "✓"; }（注意：不要混用"true"和"step"） - 未开始步：
:not([aria-current])::before { content: counter(step); counter-increment: step; }配合counter-reset: step; - 图标尺寸统一用
rem（如width: 1.25rem），避免像素固定导致缩放失真
响应式布局必须分层控制，不是简单加 d-flex flex-column
直接给父容器加 d-flex flex-column 会导致小屏下文字折行、连线拉长、nav-link 高度塌陷、点击区域变小——这不是断点切换，是布局逻辑断裂。
- 大屏横向靠
flex-row+col-*控制各步宽度分配，避免某步内容过长挤占其他项 - 小屏竖排时重置
gap、padding和font-size：.nav-link { padding: 0.75rem 1rem; font-size: 0.875rem; } - 竖排时
.step-nav要设flex-direction: column; gap: 1rem;，且gap值必须显式声明，不能依赖工具类 - 所有状态同步（比如用户点“下一步”）必须先校验当前表单字段有效性，再更新
aria-current—— UI 走到第 3 步但第 2 步邮箱为空，就是典型的状态与数据脱节
最容易被忽略的是：状态色和连线视觉变化，必须与表单字段校验结果严格同步。很多项目只改了 UI，却没拦截无效提交，导致后端收到残缺数据——这不是样式问题，是状态管理漏洞。
