Bootstrap按鈕組 · 致力于web前端技術撰寫

按鈕組允許多個按鈕被堆疊在同一行上。當你想要把按鈕對齊在一起時，這就顯得非常有用。 ###基本按鈕組給div加上class .btn-group ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class="btn-group"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <button class="btn btn-primary">按鈕4</button> <button class="btn btn-=primary">按鈕5</button> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f635cbe.jpg) ###按鈕工具欄使用class .btn-toolbar和 .btn-group ~~~ <body> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <button class="btn btn-primary">按鈕4</button> <button class="btn btn-primary">按鈕5</button> </div> <div class="btn-group"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <button class="btn btn-primary">按鈕4</button> <button class="btn btn-primary">按鈕5</button> </div> <div class="btn-group"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <button class="btn btn-primary">按鈕4</button> <button class="btn btn-primary">按鈕5</button> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f64a79c.jpg) 可以看出每一個按鈕組之間都有一點空隙 .btn-toolbar>.btn-group?{ ? ??margin-left:?5px; } ###調整按鈕大小給btn-group 加上.btn-group-lg，.btn-group-sm，.btn-group-xs可以調整整個按鈕組的按鈕大小 ~~~ <body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下列 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉鏈接 1</a></li> <li><a href="#">下拉鏈接 2</a></li> </ul> </div> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f65b3d4.jpg) ### 嵌套可以在一個按鈕組內嵌套另一個按鈕組，即，在一個.btn-group內嵌套另一個.btn-group。當下拉菜單與一系列按鈕組合使用時，就會用到這個。 ~~~ <body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下列 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉鏈接 1</a></li> <li><a href="#">下拉鏈接 2</a></li> </ul> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f66b812.jpg) 感覺嵌套并沒有什么作用，于是去掉btn-group，顯示效果變成如下。 ![](https://box.kancloud.cn/2016-04-07_570603f67a501.jpg) 審查元素，發現.dropdown-menu使用的是絕對定位，而.btn-group是相對定位，因為就不難理解為什么我們去掉嵌套的 btn-group之后，效果變成了上圖所示。 ### 垂直的按鈕組使用.btn-group-vertical ~~~ <body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> </div> <div class="btn-group"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> </div> <div class="btn-group btn-group-lg btn-group-vertical"> <button class="btn btn-primary">按鈕1</button> <button class="btn btn-primary">按鈕2</button> <button class="btn btn-primary">按鈕3</button> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f68b01c.jpg)