如何在 Bootstrap 中创建一个基本的按钮组？

Bootstrap是一个非常流行的前端框架，它提供了许多实用的组件，其中包括按钮组。一个按钮组是几个按钮的组合，它们通常具有相同的外观和行为。在本篇文章中，我们将介绍如何在Bootstrap中创建一个基本的按钮组。

首先，我们需要引入Bootstrap的CSS和JavaScript文件。这可以通过在HTML文档的标签中添加以下代码来实现：

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

接下来，创建一个容器元素来包裹我们的按钮组。一个常见的容器元素是

<div class="btn-group" role="group" aria-label="Basic example">
  <!-- 按钮将被放置在这里 -->
</div>

• btn-group是Bootstrap按钮组的基本类，定义了按钮组的基本外观和行为。
• role="group"用于标识这个<div>元素作为一个按钮组。
• aria-label允许我们为按钮组提供一个可访问的名称。

接下来，在按钮组容器中添加按钮。一个基本按钮使用以下代码创建：

<button type="button" class="btn btn-primary">Primary</button>

• type="button"标识这个元素是一个按钮
• btn是按钮的基本类，以定义按钮的基本外观和行为。
• btn-primary是一个类，指定按钮的主题颜色。

我们可以根据需要添加其他类，例如btn-secondary，btn-success，btn-warning等等，以创建不同颜色的按钮。

最后，让我们将所有按钮放在容器元素中：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
</div>

现在，我们已经创建了一个基本的按钮组，其中包含具有不同颜色的按钮。我们可以使用其他Bootstrap类和属性来进一步自定义和调整按钮组的外观和行为。

参考：https://getbootstrap.com/docs/5.0/components/button-group/