bootstrap 5 无原生步骤条组件，须用语义化 或 结构配合伪元素绘制连接线，并通过 js 动态管理 aria-current、tabindex 及响应式连线方向。
步骤条不是progress，别用.progress-bar硬套
Bootstrap 5 根本没有原生步骤条（steps/wizard）组件。.progress 是数值型反馈控件，语义上只表达“已完成 60%”，不表达“当前在第 2 步、第 1 步已提交、第 3 步不可点击”。强行把 aria-valuenow="40" 当步骤编号用，会导致屏幕阅读器读成“百分之四十”，而非“第二步”。
真正可用的起点是语义化结构：用 <ol></ol> 或 <nav></nav> 包裹步骤项，每个步骤用 <li> 或 <li><a></a></li>，再靠伪元素画连接线。
用::before画水平连接线，关键在position: absolute和transform
连接线必须脱离文档流，否则会撑开容器高度或破坏 flex 布局。最稳妥做法是给每个步骤项加 position: relative，然后用 ::before 绘制从左到右的线段：
- 只给非首项添加
::before，避免首项左侧多出半截线 -
content: ""+position: absolute+top: 50%+left: -50%+width: 100%+height: 2px - 用
transform: translateY(-50%)居中，而不是靠margin-top—— 后者在 flex 容器里容易错位 - 线的颜色和状态联动：当前步之前用
bg-success，之后用bg-muted，通过 JS 切换父级 class 控制
响应式下flex-column切换时，伪元素方向要重置
小屏竖排时，连接线得从上往下走，但很多人忘了改伪元素的定位逻辑——仍用 left: -50% 和 width: 100%，结果线跑到了左边空白处。
正确做法是用媒体查询重置：
- 竖排时把
::before的left改为top，width改为height -
transform: translateX(-50%)→transform: translateY(-50%) - 确保父容器在竖排时有足够高度容纳连线，别让
flex-fill把步骤项压扁
状态样式不能只靠颜色，要同步控制aria-current和tabindex
仅用 text-success 或 bg-success 不足以满足可访问性要求。键盘用户 tab 导航时，未激活步骤若没设 tabindex="-1"，会误入不可操作项；屏幕阅读器若没识别当前步，会跳过整个流程。
必须配合 JS 动态管理：
- 当前步骤加
aria-current="step"，并确保tabindex="0" - 已完成步骤加
tabindex="-1"，禁用聚焦但保留语义 - 未开始步骤移除
tabindex，或显式设为-1并加aria-disabled="true" - 别依赖 CSS
pointer-events: none拦截点击——它不阻止键盘触发，也不影响读屏软件
伪元素画线这事看着轻量，但一旦混进状态切换、响应式、可访问性三重约束，稍一松懈就变成看不见的坑。最常被忽略的是：竖屏连线方向没重置、aria-current 没随 JS 状态同步、以及把 .progress-bar 当步骤节点用——这三处错，会让整条步骤流在辅助技术下彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
