步骤条 · Bootstrap 6.0 中文文档

示例

Stepper 是使用 CSS Grid 和 <ol> 元素构建的。默认情况下，步骤是垂直显示的。你可以使用响应式修饰类将它们转换为水平列表。

基础

这是一个简单的垂直步骤器示例。

创建账户
确认邮箱
更新资料
完成

HTML

<ol class="stepper">
  <li class="stepper-item active">Create account</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

响应式

可以使用父元素上的contains-inline工具类并在步进器上添加响应式.stepper-horizontal-{breakpoint}修饰类，使步进器在特定断点处水平排列。使用容器查询时，需要额外的父元素。

创建账户
确认邮箱
更新资料
完成

HTML

<div class="contains-inline">
  <ol class="stepper sm:stepper-horizontal">
    <li class="stepper-item active">Create account</li>
    <li class="stepper-item active">Confirm email</li>
    <li class="stepper-item">Update profile</li>
    <li class="stepper-item">Finish</li>
  </ol>
</div>

间隙

使用覆盖 --bs-stepper-gap CSS 变量的样式来自定义间距。

创建账户
确认邮箱
更新资料
完成

HTML

<ol class="stepper" style="--bs-stepper-gap: 3rem">
  <li class="stepper-item active">Create account</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

变体

创建账户
确认邮箱
更新资料
完成

HTML

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active theme-accent">Create account</li>
  <li class="stepper-item">Confirm email</li>
  <li class="stepper-item active theme-success">Update profile</li>
  <li class="stepper-item active theme-danger">Finish</li>
</ol>

溢出

将你的水平步骤器包裹在一个.stepper-overflow容器中，当步骤器溢出其父元素时，可以启用水平滚动。使用container-type: inline-size来支持容器查询，而不是基于视口的媒体查询。

创建账户
验证电子邮件地址
完成个人资料设置
添加付款方式
审核并确认
完成入职

HTML

<div class="stepper-overflow">
  <ol class="stepper stepper-horizontal">
    <li class="stepper-item active">Create account</li>
    <li class="stepper-item active">Verify email address</li>
    <li class="stepper-item">Complete profile setup</li>
    <li class="stepper-item">Add payment method</li>
    <li class="stepper-item">Review and confirm</li>
    <li class="stepper-item">Finish onboarding</li>
  </ol>
</div>

复杂

在每个步骤中添加超出标签的额外内容，以提供更多的上下文，例如描述、辅助信息、状态指示器或其他装饰性元素。

创建
创建一个账户。
确认
确认你的邮箱。
设置
配置你的个人资料。
完成
欢迎登机！

HTML

<ol class="stepper stepper-vertical">
  <li class="stepper-item align-items-start active">
    <div class="pt-1">
      <div class="fw-semibold">Create</div>
      <small class="fg-3">Create an account.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start active">
    <div class="pt-1">
      <div class="fw-semibold">Confirm</div>
      <small class="fg-3">Confirm your email.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start">
    <div class="pt-1">
      <div class="fw-semibold">Set-up</div>
      <small class="fg-3">Configure your profile.</small>
    </div>
  </li>
  <li class="stepper-item align-items-start">
    <div class="pt-1">
      <div class="fw-semibold">Finish</div>
      <small class="fg-3">Welcome aboard!</small>
    </div>
  </li>
</ol>

与其他组件混合使用，例如徽章，以及我们的主题辅助工具，以创建更独特的步骤条。

创建账户
完成
确认邮箱
完成
更新资料
进行中
完成
待处理

HTML

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item theme-success active">
    <div>
      <div>Create account</div>
      <div class="badge badge-subtle">Complete</div>
    </div>
  </li>
  <li class="stepper-item theme-success active">
    <div>
      <div>Confirm email</div>
      <div class="badge badge-subtle">Complete</div>
    </div>
  </li>
  <li class="stepper-item theme-primary active">
    <div>
      <div>Update profile</div>
      <div class="badge badge-subtle">In-progress</div>
    </div>
  </li>
  <li class="stepper-item theme-secondary">
    <div>
      <div>Finish</div>
      <div class="badge badge-subtle">Pending</div>
    </div>
  </li>
</ol>

对齐

使用文本对齐工具（因为我们使用display: inline-grid）来对齐步骤。内联网格排列允许我们保持步骤宽度一致，并确保连接线正确呈现。

默认步进器
确认邮箱
更新资料
完成

HTML

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active">Default stepper</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

中心踏板
确认邮箱
更新资料
完成

HTML

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active">Center stepper</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

结束步进器
确认邮箱
更新资料
完成

HTML

<ol class="stepper stepper-horizontal">
  <li class="stepper-item active">End stepper</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

将.w-100应用于步进器以使其全宽。步进器的项目将被拉伸以填充可用空间。对齐方式不会影响全宽步进器。

创建账户
确认邮箱
更新资料
完成

HTML

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item active">Create account</li>
  <li class="stepper-item active">Confirm email</li>
  <li class="stepper-item">Update profile</li>
  <li class="stepper-item">Finish</li>
</ol>

带锚点

如果步骤指示器跨多个页面链接，请使用锚点元素来构建。如果你在同一文档的不同部分之间链接，请添加role="button"或使用<button>元素。

考虑使用我们的链接工具来快速控制颜色。

创建账户确认邮箱更新资料完成

HTML

<div class="stepper">
  <a href="#" role="button" class="stepper-item active">Create account</a>
  <a href="#" role="button" class="stepper-item active">Confirm email</a>
  <a href="#" role="button" class="stepper-item theme-secondary">Update profile</a>
  <a href="#" role="button" class="stepper-item theme-secondary">Finish</a>
</div>

CSS

变量

Stepper 在 .stepper 上使用本地 CSS 变量进行实时自定义。CSS 变量的值由每个组件独有的 Sass map生成，并应用于上述类。

scss/_stepper.scss

// stylelint-disable-next-line scss/dollar-variable-default
$stepper-tokens: defaults(
  (
    --stepper-size: 2rem,
    --stepper-gap: 1rem,
    --stepper-font-size: var(--font-size-sm),
    --stepper-text-gap: .5rem,
    --stepper-track-size: .125rem,
    --stepper-bg: var(--bg-2),
    --stepper-active-color: var(--primary-contrast),
    --stepper-active-bg: var(--primary-bg),
  ),
  $stepper-tokens
);

Sass mixin

scss/_stepper.scss

@mixin stepper-horizontal() {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;

  .stepper-item {
    grid-template-rows: var(--stepper-size) auto;
    grid-template-columns: auto;
    align-items: start;
    justify-items: center;
    text-align: center;

    &::after {
      inset-block-start: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
      inset-block-end: auto;
      inset-inline-start: 50%;
      inset-inline-end: 100%;
      width: calc(100% + var(--stepper-gap));
      height: var(--stepper-track-size);
    }

    &:last-child::after {
      right: 100%;
    }
  }
}

溢出包装器

scss/_stepper.scss

.stepper-overflow {
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  > .stepper {
    width: max-content;
    min-width: 100%;
  }
}