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)