按钮组 - 光年(Light Year Admin V5)后台管理系统模板

按钮组

将一系列按钮组合在一行上或将它们堆叠在垂直列中。

基本示例

在 .btn-group 中用 .btn 包裹一系列按钮。

<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>

确保角色正确并提供标签

为了让辅助技术（例如屏幕阅读器）传达一系列按钮被分组的意思，需要提供适当的角色属性。对于按钮组，这将是 role="group"，而工具栏应该有一个 role="toolbar"。

此外，组和工具栏应该被赋予明确的标签，因为大多数辅助技术不会公布它们，尽管存在正确的角色属性。在此处提供的示例中，我们使用 aria-label，但也可以使用 aria-labelledby 等替代方法。

这些类也可以添加到链接组中，作为 .nav 导航组件的替代方案。

选中的链接链接链接

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">选中的链接</a>
  <a href="#" class="btn btn-primary">链接</a>
  <a href="#" class="btn btn-primary">链接</a>
</div>

混合风格

<div class="btn-group" role="group" aria-label="基本混合样式示例">
  <button type="button" class="btn btn-danger">左</button>
  <button type="button" class="btn btn-warning">中</button>
  <button type="button" class="btn btn-success">右</button>
</div>

轮廓样式

<div class="btn-group" role="group" aria-label="基本边框样式示例">
  <button type="button" class="btn btn-outline-primary">左</button>
  <button type="button" class="btn btn-outline-primary">中</button>
  <button type="button" class="btn btn-outline-primary">右</button>
</div>

复选框和单选按钮组

将类似按钮的复选框和单选切换按钮组合成一个外观无缝的按钮组。

复选框 1 复选框 2 复选框 3

<div class="btn-group" role="group" aria-label="基本复选框切换按钮组">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
</div>

单选框 1 单选框 2 单选框 3

<div class="btn-group" role="group" aria-label="基本单选切换按钮组">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">单选框 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">单选框 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">单选框 3</label>
</div>

按钮工具栏

将多组按钮组组合成按钮工具栏以实现更复杂的组件。根据需要使用实用程序类来分隔组、按钮等。

<div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏">
  <div class="btn-group me-2" role="group" aria-label="第一组">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="第二组">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="第三组">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

随意将输入组与工具栏中的按钮组混合。与上面的示例类似，您可能需要一些实用程序来正确分隔事物。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="带有按钮组的工具栏">
  <div class="btn-group me-2" role="group" aria-label="第一组">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="带有按钮组的工具栏">
  <div class="btn-group" role="group" aria-label="第一组">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon2">
  </div>
</div>

尺寸

无需将按钮大小调整类应用于组中的每个按钮，只需将 .btn-group-* 添加到每个 .btn-group，包括嵌套多个组时的每个按钮。

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-dark">左</button>
  <button type="button" class="btn btn-outline-dark">中</button>
  <button type="button" class="btn btn-outline-dark">右</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-dark">左</button>
  <button type="button" class="btn btn-outline-dark">中</button>
  <button type="button" class="btn btn-outline-dark">右</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-outline-dark">左</button>
  <button type="button" class="btn btn-outline-dark">中</button>
  <button type="button" class="btn btn-outline-dark">右</button>
</div>

嵌套

当您希望下拉菜单与一系列按钮混合时，将 .btn-group 放置在另一个 .btn-group 中。

<div class="btn-group" role="group" aria-label="带有嵌套下拉菜单的按钮组">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

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

垂直变化

使一组按钮显示为垂直堆叠而不是水平堆叠。此处不支持拆分按钮下拉菜单。

单选框 1 单选框 2 单选框 3

<div class="btn-group-vertical">
  ...
</div>