按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能
同样地，因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
基本用法
按钮组结构非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中
为了向屏幕阅读器的用户传达正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"
此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label，也可以使用aria-labelledby
除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”
<div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div>
按钮工具栏
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组。Bootstrap框架按钮工具栏也提供了这样的制作方法，只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中
<div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> </div>
按钮尺寸
在介绍表单按钮的博文中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组
<div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div>
嵌套分组