Bootstrap--組件之按鈕組，bootstrap--組件

Bootstrap--組件之按鈕組，bootstrap--組件

什麼是按鈕組呢？簡單解釋：就是把一堆的按鈕放在一行或者一列中。下面來看一個執行個體。

按鈕組嘛，首先是按鈕，所以會用到.btn這個類，還有就是bootstrap提供的按鈕組.btn-group這個類，所以是很簡單的，以下是bootstrap中文網提供的簡單的例子

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

上面的代碼就實現了簡單的按鈕組，效果如下：

在這裡還是要說一下，使用button的時候要用input，不要直接使用button，雖然可以使用，但是還是會出現一些問題的。

1，按鈕工具列
把一組 <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>



2，尺寸
只要給 .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>

3，嵌套
想要把下拉式功能表混合到一系列按鈕中，只須把 .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>


4，垂直排列
讓一組按鈕垂直堆疊排列顯示而不是水平排列。分列式按鈕下拉式功能表不支援這種方式。使用btn-group-vertical這個類

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

5，左右對齊排列的按鈕組
讓一組按鈕拉長為相同的尺寸，填滿父元素的寬度。對於按鈕組中的按鈕式下拉式功能表也同樣適用。需要使用 .btn-group-justified這個類

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

     關於邊框的處理

        由於對左右對齊的按鈕組使用了特定的 HTML 和 CSS （即 display: table-cell），兩個按鈕之間的邊框疊加在了一起。在普通的按鈕組中，margin-left: -1px 用於將邊框         重疊，而沒有刪除任何一個按鈕的邊框。然而，margin 屬性不支援 display: table-cell。因此，根據你對 Bootstrap 的定製，你可以刪除或重新為按鈕的邊框設定顏色。

      IE8 和邊框

        Internet Explorer 8 不支援在左右對齊的按鈕組中繪製邊框，無論是 <a> 或 <button> 元素。為了照顧 IE8，把每個按鈕放入另一個 .btn-group 中即可。

按鈕組中包含的可能不僅僅是button,至於其他的標籤怎麼嵌套請大家到www.bootcss.com官網學習或者前往極客學院註冊學習（要花錢的）。

謝謝大家！