跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

按钮组

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

层级：components
查看原文
本页目录

示例

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

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

按钮组需要适当的 role 属性和明确的标签，以确保像屏幕阅读器这样的辅助技术能识别按钮为一组并进行播报。对于按钮组使用 role="group"，或者对于按钮工具栏使用 role="toolbar"。然后使用 aria-label 或 aria-labelledby 来标注它们。

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

活动链接 链接 链接
HTML
<div class="btn-group">
  <a href="#" class="btn-solid theme-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn-solid theme-primary">Link</a>
  <a href="#" class="btn-solid theme-primary">Link</a>
</div>

分隔线

通过添加来在按钮之间添加分隔符 .btn-group-divider 到班 .btn-group最有用的是与具有相同主题颜色和实心填充的按钮一起使用时。

HTML
<div class="btn-group btn-group-divider" role="group" aria-label="Basic example">
  <button type="button" class="btn-solid theme-primary">Left</button>
  <button type="button" class="btn-solid theme-primary active">Active</button>
  <button type="button" class="btn-solid theme-primary">Right</button>
</div>

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

也适用于垂直按钮组。

HTML
<div class="btn-group-vertical btn-group-divider" role="group" aria-label="Basic example">
  <button type="button" class="btn-solid theme-primary">Left</button>
  <button type="button" class="btn-solid theme-primary active">Active</button>
  <button type="button" class="btn-solid theme-primary">Right</button>
</div>

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

主题变体

使用 .theme-{color} 类将主题颜色应用到一组按钮上。

HTML
<div class="btn-group" role="group" aria-label="Accent theme example">
  <button type="button" class="btn-solid theme-accent">Left</button>
  <button type="button" class="btn-solid theme-accent">Middle</button>
  <button type="button" class="btn-solid theme-accent">Right</button>
</div>

你可以在按钮组中混合搭配不同的按钮变体。

HTML
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn-solid theme-danger">Left</button>
  <button type="button" class="btn-solid theme-warning">Middle</button>
  <button type="button" class="btn-solid theme-success">Right</button>
</div>

风格变体

按钮组支持所有按钮样式。可以与 .btn-group-divider 类混合搭配，为某些样式添加分隔线，或者在其他样式中仅使用按钮边框。

HTML
<div class="btn-group btn-group-divider" role="group" aria-label="Solid example">
  <button type="button" class="btn-solid theme-primary">Left</button>
  <button type="button" class="btn-solid theme-primary">Middle</button>
  <button type="button" class="btn-solid theme-primary">Right</button>
</div>
HTML
<div class="btn-group" role="group" aria-label="Outlined example">
  <button type="button" class="btn-outline theme-primary">Left</button>
  <button type="button" class="btn-outline theme-primary">Middle</button>
  <button type="button" class="btn-outline theme-primary">Right</button>
</div>
HTML
<div class="btn-group btn-group-divider" role="group" aria-label="Subtle example">
  <button type="button" class="btn-subtle theme-primary">Left</button>
  <button type="button" class="btn-subtle theme-primary">Middle</button>
  <button type="button" class="btn-subtle theme-primary">Right</button>
</div>

切换按钮

复选框

复选框切换按钮可以组合在一起。可以选中任意一个或全部按钮。

HTML
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <label class="btn-check btn-outline theme-primary">
    <input type="checkbox" autocomplete="off">
    Check 1
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="checkbox" autocomplete="off">
    Check 2
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="checkbox" autocomplete="off">
    Check 3
  </label>
</div>

收音机

根据设计，无线电切换按钮组一次只能选中一个按钮。

HTML
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off" checked>
    Radio 1
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    Radio 2
  </label>
  <label class="btn-check btn-outline theme-primary">
    <input type="radio" name="btnradio" autocomplete="off">
    Radio 3
  </label>
</div>

按钮工具栏

将一组按钮组合成按钮工具栏，以创建更复杂的组件。根据需要使用工具类来调整组、按钮等之间的间距。

HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn-solid theme-primary">1</button>
    <button type="button" class="btn-solid theme-primary">2</button>
    <button type="button" class="btn-solid theme-primary">3</button>
    <button type="button" class="btn-solid theme-primary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn-solid theme-secondary">5</button>
    <button type="button" class="btn-solid theme-secondary">6</button>
    <button type="button" class="btn-solid theme-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn-solid theme-info">8</button>
  </div>
</div>

在工具栏中随意混合输入组和按钮组。类似于上面的例子，你可能仍然需要一些工具类来正确安排间距。

HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn-outline theme-secondary">1</button>
    <button type="button" class="btn-outline theme-secondary">2</button>
    <button type="button" class="btn-outline theme-secondary">3</button>
    <button type="button" class="btn-outline theme-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="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn-outline theme-secondary">1</button>
    <button type="button" class="btn-outline theme-secondary">2</button>
    <button type="button" class="btn-outline theme-secondary">3</button>
    <button type="button" class="btn-outline theme-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="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

尺寸

与其在组中的每个按钮上应用按钮大小类，不如将.btn-group-*添加到每个.btn-group，包括在嵌套多个组时的每一个按钮。

HTML
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn-outline theme-primary">Left</button>
  <button type="button" class="btn-outline theme-primary">Middle</button>
  <button type="button" class="btn-outline theme-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn-outline theme-primary">Left</button>
  <button type="button" class="btn-outline theme-primary">Middle</button>
  <button type="button" class="btn-outline theme-primary">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn-outline theme-primary">Left</button>
  <button type="button" class="btn-outline theme-primary">Middle</button>
  <button type="button" class="btn-outline theme-primary">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
  <button type="button" class="btn-outline theme-primary">Left</button>
  <button type="button" class="btn-outline theme-primary">Middle</button>
  <button type="button" class="btn-outline theme-primary">Right</button>
</div>

嵌套

当你想要菜单与一系列按钮混合时，将.btn-group放入另一个.btn-group中。

菜单链接 菜单链接
HTML
<div class="btn-group" role="group" aria-label="Button group with nested menu">
  <button type="button" class="btn-solid theme-primary">1</button>
  <button type="button" class="btn-solid theme-primary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="menu" aria-expanded="false">
      Menu
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Menu link</a>
      <a class="menu-item" href="#">Menu link</a>
    </div>
  </div>
</div>

垂直变化

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

HTML
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn-solid theme-primary">Button</button>
  <button type="button" class="btn-solid theme-primary">Button</button>
  <button type="button" class="btn-solid theme-primary">Button</button>
  <button type="button" class="btn-solid theme-primary">Button</button>
</div>
菜单链接 菜单链接
菜单链接 菜单链接
菜单链接 菜单链接
菜单链接 菜单链接
HTML
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <div class="btn-group" role="group">
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="menu" aria-expanded="false">
      Menu
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Menu link</a>
      <a class="menu-item" href="#">Menu link</a>
    </div>
  </div>
  <button type="button" class="btn-solid theme-primary">Button</button>
  <button type="button" class="btn-solid theme-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="menu" data-bs-placement="left-start" aria-expanded="false">
      Menu
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Menu link</a>
      <a class="menu-item" href="#">Menu link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="menu" data-bs-placement="right-start" aria-expanded="false">
      Menu
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Menu link</a>
      <a class="menu-item" href="#">Menu link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="menu" data-bs-placement="top-start" aria-expanded="false">
      Menu
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Menu link</a>
      <a class="menu-item" href="#">Menu link</a>
    </div>
  </div>
</div>
HTML
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <label class="btn-check btn-outline theme-danger">
    <input type="radio" name="vbtn-radio" autocomplete="off" checked>
    Radio 1
  </label>
  <label class="btn-check btn-outline theme-danger">
    <input type="radio" name="vbtn-radio" autocomplete="off">
    Radio 2
  </label>
  <label class="btn-check btn-outline theme-danger">
    <input type="radio" name="vbtn-radio" autocomplete="off">
    Radio 3
  </label>
</div>