學會按鈕組需要掌握以下幾個類。
btn btn-group btn-toolbar btn-group-vertical 和 下拉菜單的基本類 dropdown-toggle dropdown-menu 和屬性 data-toggle="dropdown";
1:基本按鈕組，僅僅一個 btn-group 就 OK 了。
1 <span class="btn-group " > 2 <button class="btn btn-primary ">1111</button> 3 <button class="btn btn-default ">2222</button> 4 <button class="btn btn-info ">3333</button> 5 <button class="btn btn-default ">4444</button> 6 </span>
效果：
2：分類按鈕組 多加一個btn-toolbar 類
1 <div class="btn-toolbar "> 2 <span class="btn-group " > 3 <button class="btn btn-primary ">1111</button> 4 <button class="btn btn-default ">2222</button> 5 <button class="btn btn-info ">3333</button> 6 <button class="btn btn-default ">4444</button> 7 </span> 8 <span class="btn-group " > 9 <button class="btn btn-primary ">1111</button> 10 <button class="btn btn-default ">2222</button> 11 <button class="btn btn-info ">3333</button> 12 <button class="btn btn-default ">4444</button> 13 </span> 14 <span class="btn-group " > 15 <button class="btn btn-primary ">1111</button> 16 <button class="btn btn-default ">2222</button> 17 <button class="btn btn-info ">3333</button> 18 <button class="btn btn-default ">4444</button> 19 </span> 20 </div>
效果：
3：嵌套分組
先看效果：
這里我們看到，最后一個按鈕點擊時出現了一個下拉菜單，這是如何做的？在我原來的隨筆之中講過一個簡單的下拉下單，在這里，我總結一下，只要是下拉菜單，有幾樣必不可少！下拉菜單的基本類 dropdown-toggle dropdown-menu 和屬性 data-toggle="dropdown";
圖中的小三角是<span class="caret"></span>它和nore..位於一個button.
dropdown-menu:是加在ul上的。
dropdown-toggle 和 data-toggle 是加在ul的父級元素上的。
先看代碼：
1 <div class="btn-group"> 2 <button class="btn btn-default">c#</button> 3 <button class="btn btn-default">javascript</button> 4 <button class="btn btn-default">bootstrap</button> 5 <div class="btn-group"> 6 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">more...<span class="caret"></span></button> 7 <ul class="dropdown-menu "> 8 <li ><a href="javascript:void(0) ">java</a></li> 9 <li><a href="javascript:void(0) ">php</a></li> 10 <li><a href="javascript:void(0) ">maven</a></li> 11 </ul> 12 </div> 21 </div>
最后一個下拉是一個div包着一個Button 和 ul 組成的，其中，上述強調的類和屬性一個不能少！
4：好了，我們現在可以多干點無聊的事情了，一個按鈕組，多加幾個下拉下單可以吧。
效果：
這樣無非就是復制幾個代碼罷了 不過效果不錯！
這時我們又想，加個disable 可以吧，於是， <li class="disabled"><a href="javascript:void(0) ">java</a></li> 結果很完美！
5：垂直分組。
現在我們遇到的都是橫的，但是經常遇到垂直的按鈕組咋辦呢？
只要把btn-group 替換為 btn-group-vertical 即可！
效果：
小結：僅僅這幾個還只是BootStrap按鈕組的滄海一粟，明天繼續講解！