在 GitHub 上檢視

按鈕群組

使用按鈕群組將一系列按鈕群組在單一行上，並使用 JavaScript 為它們賦予超能力。

基本範例

在 .btn-group 中使用 .btn 包裹一系列按鈕。使用 我們的按鈕外掛程式 加入選項式 JavaScript 單選按鈕和核取方塊樣式行為。

<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>
確保正確的 role 並提供標籤

為了讓輔助技術（例如螢幕閱讀器）傳達一系列按鈕已群組，需要提供適當的 role 屬性。對於按鈕群組，這將是 role="group"，而工具列應具有 role="toolbar"。

此外，應為群組和工具列提供明確的標籤，否則，大多數輔助技術不會宣布它們，儘管存在正確的角色屬性。在這裡提供的範例中，我們使用 aria-label，但也可以使用其他選項，例如 aria-labelledby。

按鈕工具列

將按鈕群組集合組合成按鈕工具列，以用於更複雜的元件。視需要使用工具程式類別來配置群組、按鈕等之間的間距。

<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>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <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="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

請隨時在工具列中將輸入群組與按鈕群組混合。與上述範例類似，您可能需要一些工具程式才能適當地配置間距。

<div class="btn-toolbar mb-3" 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>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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 btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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，包括在巢狀多個群組時新增每個群組。



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

巢狀

當您想要將下拉式功能表與一系列按鈕混合時，請將 .btn-group 放置在另一個 .btn-group 中。

下拉式功能表連結 下拉式功能表連結 
<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 type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

垂直變異

讓一組按鈕垂直堆疊顯示，而不是水平顯示。此處不支援分割按鈕下拉式功能表。

下拉式功能表連結 下拉式功能表連結
下拉式功能表連結 下拉式功能表連結
下拉式功能表連結 下拉式功能表連結
下拉式功能表連結 下拉式功能表連結 
<div class="btn-group-vertical">
  ...
</div>