Bootstrap 官方无 .step 类，需用 list-group + flex 自建步骤条；推荐语义化 <ol> 结构、aria-current 标记、工具类控制状态，避免误用 progress 组件或未经验证的第三方库。
用 bootstrap 的 .step 类？别找了，它根本不存在
bootstrap 官方 css 框架里没有叫 .step 或 .step-bar 的内置组件。你搜到的所谓“bootstrap 步骤条”基本是第三方扩展、自定义样式，或是老版本（v4 以前）社区写的插件。v5.x 完全不提供原生步骤指示器，得自己搭结构 + 写 css 或借助工具类组合。
用 list-group + flex 快速搭一个语义清晰的步骤条
最轻量、兼容性好、无障碍支持到位的做法：用无序列表 <ol> 或 <ul> 做结构，靠 display: flex 和 Bootstrap 的间距/颜色工具类控制布局和状态。
- 每个步骤用
<li>包裹，用aria-current="step"标记当前项（屏幕阅读器可读） - 用
text-success、text-muted、bg-success等工具类区分完成/进行/未开始状态 - 连接线用伪元素
::before实现，避免额外 DOM；Bootstrap v5 的flex-fill可辅助等分空间 - 响应式断点下建议改用垂直排列（
flex-column），否则小屏会挤成一团
<ol class="d-flex align-items-center list-unstyled">
<li class="flex-fill text-center position-relative">
<div class="bg-success text-white rounded-circle w-10 h-10 d-flex align-items-center justify-content-center">1</div>
<div class="mt-2 text-success">填写信息</div>
</li>
<li class="flex-fill text-center position-relative">
<div class="bg-success text-white rounded-circle w-10 h-10 d-flex align-items-center justify-content-center">2</div>
<div class="mt-2 text-success">确认订单</div>
</li>
<li class="flex-fill text-center position-relative">
<div class="bg-muted text-white rounded-circle w-10 h-10 d-flex align-items-center justify-content-center">3</div>
<div class="mt-2 text-muted">支付完成</div>
</li>
</ol>用 progress 组件强行改造成步骤条？小心语义错乱
有人把 <div class="progress"> 当步骤条用——能显示进度，但本质是数值型反馈控件，不适合多步流程导航。问题很实际：
-
aria-valuenow表示的是百分比，不是步骤编号，对键盘用户和读屏软件不友好 - 无法给每个步骤加独立链接或点击区域，交互受限
- 当步骤数动态变化（比如跳过某步），
max/value很难映射准确 - Bootstrap 的
.progress-bar默认是连续色块，硬塞圆点图标会破坏视觉节奏
第三方库如 bs-stepper 值不值得引入？看这三点
bs-stepper 是目前最常用的 Bootstrap 步骤条补充库，但它不是官方维护，v5 兼容性需手动验证。是否接入，取决于你项目的真实约束：
- 如果已有 jQuery 依赖且步骤逻辑复杂（含表单校验、异步加载、返回上一步），它省事
- 如果项目已用 ES modules + 现代构建工具（Vite/Webpack），它的 UMD 格式可能引发 tree-shaking 问题
- 注意它的默认 CSS 会覆盖部分 Bootstrap 工具类（比如
text-*color），要检查冲突 - v5.3+ 的
data-bs-*属性命名和它旧版不一致，初始化时容易报Cannot read property 'addEventListener' of null
真正容易被忽略的是：步骤状态变更后，bs-stepper 不自动更新 aria-current 和 tabindex，需要手写回调补全，否则 WCAG 2.1 AA 就不达标。
