Bootstrap5 按钮组

Bootstrap 的按钮组允许你将多个按钮组合在一起形成一个单行的按钮组或者嵌套的按钮组。按钮组可以使用多种方式来展示一组相关的动作或选项。下面的内容将详细介绍如何使用 Bootstrap 5 创建和自定义按钮组。

基本按钮组

基本的按钮组是通过将多个 <button> 元素包裹在一个带有 .btn-group 类的容器中实现的。这将使这些按钮在同一行上对齐，并且看起来像一个整体。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">左</button>
  <button type="button" class="btn btn-primary">中</button>
  <button type="button" class="btn btn-primary">右</button>
</div>

使用按钮组

按钮组不仅仅可以用来放置按钮，还可以用于其他元素，如链接、输入框等。为了实现这一点，你需要给容器添加 .btn-group 类，并为内部元素添加 .btn 类。

// www.javascriptcn.com code example
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">下拉选项1</a></li>
      <li><a class="dropdown-item" href="#">下拉选项2</a></li>
    </ul>
  </div>
</div>

垂直排列的按钮组

如果你希望按钮组中的按钮垂直堆叠，你可以简单地添加 .btn-group-vertical 类到 .btn-group 容器上。这在屏幕尺寸较小的情况下特别有用，因为它能更好地利用空间。

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">顶部</button>
  <button type="button" class="btn btn-primary">中间</button>
  <button type="button" class="btn btn-primary">底部</button>
</div>

嵌套的按钮组

你可以将按钮组嵌套在另一个按钮组内，以创建更复杂的布局。只需确保每个内部的按钮组都具有适当的间距和对齐方式。

// www.javascriptcn.com code example
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">下拉选项1</a></li>
      <li><a class="dropdown-item" href="#">下拉选项2</a></li>
    </ul>
  </div>
</div>

工具提示和弹出层

你可以为按钮组中的按钮添加工具提示和弹出层功能。只需为按钮添加 data-bs-toggle="tooltip" 或 data-bs-toggle="popover" 属性，并通过 JavaScript 初始化它们。

// www.javascriptcn.com code example
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="提示信息">
  提示
</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

以上就是关于 Bootstrap 5 按钮组的基本介绍和一些实用技巧。通过这些方法，你可以根据需要创建各种类型的按钮组，从而提升你的网页设计和用户体验。