按鈕群組 (Button group)

使用按鈕群組將一系列按鈕組合在一起,並且透過 JavaScript 增加它們。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

Basic example

將一系列的 .btn 包裝在 .btn-group 內。可使用 按鈕插件 增加 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"

此外,群組和工具欄應該給予明確的標籤,因為儘管存在正確的 role 屬性,大多數輔助性技術不會明確呈現他們。 在這裡提供的例子中,我們使用 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>

隨意將 input 組合與工具列中的按鈕群組進行混合。與上面的範例類似,您需要一些通用類別來將這些的內容間隔開。

<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">
    <span class="input-group-addon" id="btnGroupAddon">@</span>
    <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">
    <span class="input-group-addon" id="btnGroupAddon2">@</span>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

縮放

不是將按鈕大小 Class 應用於群組中的每個按鈕,只需在每個 .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 id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <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>