如何使用 Bootstrap 创建多步进度条？

在使用 Bootstrap 创建多步进度条时，我们可以使用 Bootstrap 提供的 nav 和 progress 类，并结合 JavaScript 实现进度条的交互效果。

Step 1: 引入 Bootstrap 样式库

在 HTML 文件中引入 Bootstrap 的样式库：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

Step 2: 创建多步进度条结构

使用 nav 和 progress 类创建多步进度条的基本结构。进度条的步骤数量可以根据实际情况进行调整。

<!-- 多步进度条 -->
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-step1-tab" data-bs-toggle="tab" data-bs-target="#nav-step1" type="button" role="tab" aria-controls="nav-step1" aria-selected="true">Step 1</button>
    <button class="nav-link" id="nav-step2-tab" data-bs-toggle="tab" data-bs-target="#nav-step2" type="button" role="tab" aria-controls="nav-step2" aria-selected="false">Step 2</button>
    <button class="nav-link" id="nav-step3-tab" data-bs-toggle="tab" data-bs-target="#nav-step3" type="button" role="tab" aria-controls="nav-step3" aria-selected="false">Step 3</button>
    <button class="nav-link" id="nav-step4-tab" data-bs-toggle="tab" data-bs-target="#nav-step4" type="button" role="tab" aria-controls="nav-step4" aria-selected="false">Step 4</button>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-step1" role="tabpanel" aria-labelledby="nav-step1-tab">
    <h3>Step 1</h3>
    <p>Step 1 content goes here.</p>
  </div>
  <div class="tab-pane fade" id="nav-step2" role="tabpanel" aria-labelledby="nav-step2-tab">
    <h3>Step 2</h3>
    <p>Step 2 content goes here.</p>
  </div>
  <div class="tab-pane fade" id="nav-step3" role="tabpanel" aria-labelledby="nav-step3-tab">
    <h3>Step 3</h3>
    <p>Step 3 content goes here.</p>
  </div>
  <div class="tab-pane fade" id="nav-step4" role="tabpanel" aria-labelledby="nav-step4-tab">
    <h3>Step 4</h3>
    <p>Step 4 content goes here.</p>
  </div>
</div>

Step 3: 实现 JavaScript 交互

接着，我们需要使用 JavaScript 实现进度条的交互效果。具体实现方式如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

<script>
  $(document).ready(function() {
    // 获取进度条节点
    var progressBar = $('.progress-bar');
    // 获取步骤数量
    var stepCount = $('#nav-tab button').length;
    // 获取每个步骤节点的宽度
    var stepWidth = 100 / stepCount;
    // 初始化进度条宽度
    progressBar.width(stepWidth + '%');

    // 点击步骤按钮时更新进度条宽度
    $('#nav-tab button').on('click', function() {
      // 获取当前步骤的索引值
      var index = $(this).index();
      // 计算进度条应有的宽度
      var progressWidth = (index + 1) * stepWidth;
      // 更新进度条的宽度
      progressBar.width(progressWidth + '%');
    });
  });
</script>

Step 4: 功能演示

至此，我们已经成功创建了一个多步进度条，并且实现了交互效果。接下来，我们可以试着点击各个步骤的按钮，看看进度条宽度是否跟随变化。

图片演示

步骤 1：

步骤 2：

步骤 3：

步骤 4：

以上图片演示来自 https://www.runoob.com/bootstrap5/bootstrap5-multi-step-progress-bar.html

在线演示

我们也可以通过以下在线演示来更直观地感受多步进度条的交互效果：

https://www.runoob.com/try/try.php?filename=trybs5_multi-step-progress_bar&stacked=h