Bootstrap5 按钮组

Bootstrap5 按钮组

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap5 是 Bootstrap 的最新版本，它带来了许多新的特性和改进。其中，按钮组（Button Group）是 Bootstrap5 中一个非常有用的组件，可以用来创建一系列相互关联的按钮。

按钮组概述

按钮组（Button Group）允许开发者将一组按钮并排显示，形成一个紧凑的按钮组。这使得用户可以轻松地在多个选项之间切换。按钮组可以应用于单行按钮或按钮下拉菜单。

创建按钮组

要创建一个按钮组，首先需要使用 <button-group> 元素。然后，将按钮元素（如 <button> 或 <a>）添加到 <button-group> 中。

HTML 示例

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-secondary">Middle</button>
  <button type="button" class="btn btn-outline-success">Right</button>
</div>

CSS 示例

.btn-group {
  margin: 15px;
}

在上述示例中，我们创建了一个包含三个按钮的按钮组