Bootstrap 關於按鈕組

當為 .btn-group 中的元素應用工具提示或彈出框時，必須指定 container: 'body' 選項，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發時，會讓頁面元素變寬和/或失去圓角）？

 

對於按鈕組合，應該是 role="group"，對於toolbar（工具欄）應該是 role="toolbar"。

 

按鈕組和工具欄應給定一個明確的label標簽，盡管設置了正確的 role 屬性，我們使用 aria-label，但是， aria-labelledby 也可以使用。

 

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

　　

豎直的話是

class="btn-group-vertical"

 

  <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 btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
            <button type="button" class="btn btn-default">4</button>
        </div>
    </div>

　　

也可以加尺寸

只要給 .btn-group 加上 .btn-group-lg,sm,xs等即可。

 

想要把下拉菜單混合到一系列按鈕中，只須把 .btn-group 放入大 .btn-group 中就可以，嵌套。

 

關於 <a> 元素

只須將一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
      <a href="#" class="btn btn-default" role="button">Left</a>
      <a href="#" class="btn btn-default" role="button">Middle</a>
      <a href="#" class="btn btn-default" role="button">Right</a>
    </div>

　　

關於 <button> 元素

為了將 <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>

　　看起來a更方便？