按鈕組 button group

一、基本實例

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

 

​二、按鈕工具欄

把一組  <div class="btn-group"> 組合進一個  <div class="btn-toolbar"> 中就可以做成更復雜的組件。

 

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</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>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

 

四、嵌套

把下拉菜單混合到一系列按鈕中，只須把 .btn-group 放入另一個 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

 

​五、垂直排列

讓一組按鈕垂直堆疊排列顯示而不是水平排列。分列式按鈕下拉菜單不支持這種方式。

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

 

​​​​六、兩端對齊排列的按鈕組

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

關於 <button> 元素

為了將 <button> 元素用於兩端對齊的按鈕組中，必須將每個按鈕包裹進一個按鈕組中you must wrap each button in a button group。大部分的瀏覽器不能將我們的 CSS 應用到對齊的 <button> 元素上，但是，由於我們支持按鈕式下拉菜單，我們可以解決這個問題。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>