如何使用Bootstrap创建多步进度栏？(1)

📌 相关文章

📜 如何使用Bootstrap创建多步进度栏？(1)

📅 最后修改于: 2023-12-03 15:38:06.625000 🧑 作者: Mango

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

Bootstrap是一个非常流行的前端开发框架，它提供了很多组件和工具，使得前端开发变得更加容易和便捷。其中，进度栏是一个很常用的组件，可以用于展示任务进度、流程进度等等。在这篇文章中，我们将介绍如何使用Bootstrap创建一个多步进度栏。

步骤一：引入Bootstrap库

首先，我们需要在页面中引入Bootstrap的CSS和JS库。可以选择在CDN上获取链接，也可以从官网下载文件到本地引入。示例如下：

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

步骤二：创建HTML结构

接下来，我们需要使用Bootstrap提供的结构，创建多步进度栏。这里我们使用<ol>标签和<li>标签来创建多个步骤，<div>标签用于放置进度条的容器。示例如下：

<div class="progress">
  <ol class="progress-bar-container">
    <li class="progress-bar-item">
      <div class="progress-bar progress-bar-active"></div>
    </li>
    <li class="progress-bar-item">
      <div class="progress-bar"></div>
    </li>
    <li class="progress-bar-item">
      <div class="progress-bar"></div>
    </li>
    <li class="progress-bar-item">
      <div class="progress-bar"></div>
    </li>
    <li class="progress-bar-item">
      <div class="progress-bar"></div>
    </li>
  </ol>
</div>

步骤三：为多步进度栏添加样式

现在我们已经创建了HTML结构，但是还需要为多步进度栏添加一些样式。这里我们使用CSS进行样式的设置。需要注意的是，Bootstrap框架中的进度栏使用的是Flex布局，为了保证显示效果，我们也需要将多步进度栏容器的display属性设置为Flex。示例如下：

.progress {
  display: flex;
  justify-content: center;
}

.progress-bar-container {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.progress-bar-item {
  flex-basis: 0;
  flex-grow: 1;
  position: relative;
}

.progress-bar {
  height: 2px;
  background-color: #ccc;
}

.progress-bar-active {
  background-color: #007bff;
}

步骤四：完善多步进度栏

现在我们已经完成了基本的多步进度栏的创建和样式设置。但是，我们需要添加一些JS代码，使得进度栏能够根据步骤的完成情况动态更新。这里我们可以通过给每个<li>标签添加一个data-index属性，并在JS中获取当前步骤的索引，改变进度条的样式从而实现动态更新。示例如下：

var progressBarItems = document.querySelectorAll('.progress-bar-item');

progressBarItems.forEach(function(item, index) {
  item.addEventListener('click', function() {
    var currentIndex = parseInt(this.getAttribute('data-index'));
    for (var i = 0; i < currentIndex; i++) {
      progressBarItems[i].querySelector('.progress-bar').classList.add('progress-bar-active');
    }
    for (var i = currentIndex; i < progressBarItems.length; i++) {
      progressBarItems[i].querySelector('.progress-bar').classList.remove('progress-bar-active');
    }
  });
});

完整代码片段

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多步进度栏</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <style>
        .progress {
            display: flex;
            justify-content: center;
        }

        .progress-bar-container {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .progress-bar-item {
            flex-basis: 0;
            flex-grow: 1;
            position: relative;
        }

        .progress-bar {
            height: 2px;
            background-color: #ccc;
        }

        .progress-bar-active {
            background-color: #007bff;
        }
    </style>
</head>
<body>
<div class="progress">
    <ol class="progress-bar-container">
        <li class="progress-bar-item" data-index="0">
            <div class="progress-bar progress-bar-active"></div>
        </li>
        <li class="progress-bar-item" data-index="1">
            <div class="progress-bar"></div>
        </li>
        <li class="progress-bar-item" data-index="2">
            <div class="progress-bar"></div>
        </li>
        <li class="progress-bar-item" data-index="3">
            <div class="progress-bar"></div>
        </li>
        <li class="progress-bar-item" data-index="4">
            <div class="progress-bar"></div>
        </li>
    </ol>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script>
    var progressBarItems = document.querySelectorAll('.progress-bar-item');

    progressBarItems.forEach(function(item, index) {
        item.addEventListener('click', function() {
            var currentIndex = parseInt(this.getAttribute('data-index'));
            for (var i = 0; i < currentIndex; i++) {
                progressBarItems[i].querySelector('.progress-bar').classList.add('progress-bar-active');
            }
            for (var i = currentIndex; i < progressBarItems.length; i++) {
                progressBarItems[i].querySelector('.progress-bar').classList.remove('progress-bar-active');
            }
        });
    });
</script>
</body>
</html>

以上就是如何使用Bootstrap创建多步进度栏的详细介绍，通过这篇文章的阅读，相信你已经掌握了如何创建和完善一个多步进度栏的技能。