按钮组允许多个按钮在一条线上堆叠在一起.当您想要将对齐按钮等项目放在一起时，这非常有用.您可以使用 Bootstrap Button Plugin 添加可选的JavaScript收音机和复选框样式行为.
关注表总结了Bootstrap提供的重要类使用按钮组 :
| 类 | 描述 | 代码示例 |
|---|---|---|
| .btn-group | 此类用于基本按钮组.在 .btn-group 中包含一系列按钮 .btn . | < div class ="btn-group"> < button type ="button"class ="btn btn-default"> Button1</button> < button type ="button"class ="btn btn-default"> Button2</button> </div> |
| .btn-toolbar | 这有助于组合< div class ="btn-group">的集合.进入< div class ="btn-toolbar">对于更复杂的组件. | < div class ="btn-toolbar"role ="toolbar"> < div class ="btn-group"> ...</div> < div class ="btn-group"> ...</div> </div> |
| .btn-group -lg，.btn-group-sm，.btn-group-xs | 这些类可以应用于按钮组，而不是调整每个按钮的大小. | < div class ="btn-group btn-group-lg"> ...</div> < div class ="btn-group btn-group-sm"> ...</div> < div class ="btn-group btn-group-xs"> ...</div> |
| .btn-group-vertical | 此类使一组按钮垂直堆叠而不是水平显示. | < div class ="btn-group-vertical"> ... </div> |
以下示例演示了上表中讨论的类 .btn-group 的使用 :
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div>
以下示例演示了上表中讨论的类.btn-toolbar的用法:
<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </div> </div>
以下示例演示了上表中讨论的类.btn-group- *的使用 :
<div class = "btn-group btn-group-lg"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> <div class = "btn-group btn-group-sm"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> <div class = "btn-group btn-group-xs"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </div>
您可以将按钮组嵌套在另一个按钮组中，即将.btn-group放在另一个.btn-group中。 当您希望下拉菜单与一系列按钮混合时，即可完成此操作。
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div> </div>
以下示例演示了上表中讨论的类 .btn-group-vertical 的使用 :
<div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div> </div>
