bootstrap5中如何实现在一个按钮组中改变一个按钮颜色时同一时间只有一个按钮与其他按钮颜色不同

您可以使用 Bootstrap 5 中的按钮组件和 JavaScript 来实现这个功能。首先，您需要为每个按钮添加一个唯一的 ID，然后使用 JavaScript 监听按钮的点击事件。当一个按钮被点击时，您可以使用 Bootstrap 的 `removeClass` 方法将所有按钮的活动类 `active` 移除，然后将被点击的按钮添加 `active` 类。最后，您可以使用 JavaScript 的 `classList` 属性来添加或删除按钮的颜色类，以实现按钮颜色的更改。以下是示例代码：

HTML:

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btn1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn1">Button 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btn2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn2">Button 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btn3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn3">Button 3</label>
</div>

JavaScript:

const buttons = document.querySelectorAll('.btn-group input[type="radio"]');
const labels = document.querySelectorAll('.btn-group label');

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    labels.forEach((label) => {
      label.classList.remove('active');
      label.classList.remove('btn-danger');
    });
    const checkedButton = document.querySelector('.btn-group input[type="radio"]:checked + label');
    checkedButton.classList.add('active');
    checkedButton.classList.add('btn-danger');
  });
});

在这个示例中，我们使用了 Bootstrap 5 的按钮组件和 JavaScript 来实现了在一个按钮组中改变一个按钮颜色时同一时间只有一个按钮与其他按钮颜色不同的功能。