CSS 如何为Bootstrap按钮组更改活动颜色，使每个按钮具有不同的颜色

在本文中，我们将介绍如何使用CSS为Bootstrap按钮组更改活动颜色，以便每个按钮具有不同的颜色。

阅读更多：CSS 教程

介绍

Bootstrap是一个流行的CSS框架，可以帮助开发人员快速构建漂亮的响应式网站。其中之一是按钮组（Button Group），它允许将一组按钮组织在一起。默认情况下，Bootstrap按钮组的活动按钮将具有与其它按钮相同的颜色。但是，有时候我们希望每个按钮都拥有独特的活动颜色，以便突出显示不同按钮之间的区别。

解决方法

为了实现每个按钮都有不同的活动颜色，我们可以使用自定义CSS样式。一种简单的方法是为每个按钮创建单独的CSS类，并为它们定义不同的活动颜色。

首先，我们需要为每个按钮创建一个唯一的CSS类。例如，我们将创建三个按钮，分别命名为btn1、btn2和btn3：

<div class="btn-group" role="group" aria-label="Button group">
  <button type="button" class="btn btn1">Button 1</button>
  <button type="button" class="btn btn2">Button 2</button>
  <button type="button" class="btn btn3">Button 3</button>
</div>

接下来，我们需要为每个按钮的CSS类定义不同的活动颜色。我们可以使用background-color属性来实现这一点。例如，我们将为btn1、btn2和btn3分别定义不同的活动颜色：

.btn1.active {
  background-color: red;
}

.btn2.active {
  background-color: green;
}

.btn3.active {
  background-color: blue;
}

定义好以上样式后，每个按钮的活动颜色将会根据其对应的CSS类进行特定的设置。当按钮被点击并处于活动状态时，其背景颜色将会改变为预先定义的颜色。

示例

下面是一个完整的示例，展示了如何为Bootstrap按钮组更改活动颜色，使每个按钮具有不同的颜色：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .btn1.active {
      background-color: red;
    }

    .btn2.active {
      background-color: green;
    }

    .btn3.active {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="btn-group" role="group" aria-label="Button group">
    <button type="button" class="btn btn1">Button 1</button>
    <button type="button" class="btn btn2">Button 2</button>
    <button type="button" class="btn btn3">Button 3</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

在上面的示例中，按钮1的活动颜色为红色，按钮2的活动颜色为绿色，按钮3的活动颜色为蓝色。您可以根据需要定义更多的按钮和不同的活动颜色。