Bootstrap5中的Button Group（按钮组）组件

在Bootstrap 5中，按钮组（Button Group）是一种将多个按钮组合在一起的UI组件，通常用于表示一组相关的操作或选项。按钮组中的按钮可以是单个按钮，也可以是下拉菜单（Dropdown）按钮。

基本按钮组

基本按钮组是将多个按钮水平排列在一起，通常用于表示一组相关的操作。

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

在这个例子中，我们使用了<div>元素，并为其添加了btn-group类，以创建按钮组。然后，我们在<div>元素内部添加了三个<button>元素，每个按钮都有btn和btn-secondary类，用于应用Bootstrap的按钮样式。

工具栏按钮组

工具栏按钮组是将多个按钮组垂直排列在一起，通常用于表示多组相关的操作。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">5</button>
  </div>
</div>

在这个例子中，我们使用了<div>元素，并为其添加了btn-toolbar类，以创建工具栏按钮组。然后，我们在<div>元素内部添加了多个<div>元素，每个<div>元素都表示一个按钮组，并使用了btn-group类。每个按钮组内部包含了多个<button>元素。

垂直按钮组

垂直按钮组是将多个按钮垂直排列在一起，通常用于表示一组垂直相关的操作。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">Button 1</button>
  <button type="button" class="btn btn-secondary">Button 2</button>
  <button type="button" class="btn btn-secondary">Button 3</button>
  <button type="button" class="btn btn-secondary">Button 4</button>
</div>

在这个例子中，我们使用了<div>元素，并为其添加了btn-group-vertical类，以创建垂直按钮组。然后，我们在<div>元素内部添加了多个<button>元素，每个按钮都有btn和btn-secondary类。

嵌套按钮组

嵌套按钮组是将一个按钮组嵌套在另一个按钮组内部，通常用于表示更复杂的操作或选项。

<div class="btn-group">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>

在这个例子中，我们创建了一个包含两个按钮和一个下拉菜单按钮的按钮组。下拉菜单按钮内部又包含了一个按钮组，用于显示下拉菜单的选项。

以上就是在Bootstrap 5中创建和使用按钮组的基本内容。你可以根据需要组合不同类型的按钮，以满足你的界面设计需求。