Bootstrap制作步骤条Step Bar Bootstrap如何实现步骤指示器-Bootstrap教程-PHP中文网

bootstrap 官方无 .step 类，需用 list-group + flex 自建步骤条；推荐语义化结构、aria-current 标记、工具类控制状态，避免误用 progress 组件或未经验证的第三方库。

用 `bootstrap` 的 `.step` 类？别找了，它根本不存在

bootstrap 官方 css 框架里没有叫 .step 或 .step-bar 的内置组件。你搜到的所谓“bootstrap 步骤条”基本是第三方扩展、自定义样式，或是老版本（v4 以前）社区写的插件。v5.x 完全不提供原生步骤指示器，得自己搭结构 + 写 css 或借助工具类组合。

用 `list-group` + `flex` 快速搭一个语义清晰的步骤条

最轻量、兼容性好、无障碍支持到位的做法：用无序列表 <ol></ol> 或 <ul></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"> 当步骤条用——能显示进度，但本质是数值型反馈控件，不适合多步流程导航。问题很实际：<ul> <li> <code>aria-valuenow 表示的是百分比，不是步骤编号，对键盘用户和读屏软件不友好

无法给每个步骤加独立链接或点击区域，交互受限

当步骤数动态变化（比如跳过某步），max/value 很难映射准确

Bootstrap 的 .progress-bar 默认是连续色块，硬塞圆点图标会破坏视觉节奏

第三方库如 `bs-stepper` 值不值得引入？看这三点

bs-stepper 是目前最常用的 Bootstrap 步骤条补充库，但它不是官方维护，v5 兼容性需手动验证。是否接入，取决于你项目的真实约束：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

如果已有 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 就不达标。