按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。

结构方面：使用一个类名为BTN组的容器，把多个按钮放在这个容器中。

按钮组也是一个独立的组件，所以可以找到相应的源码文件：

少：按钮。少

Sass: _ buttons.scss

Css:Bootstrap.css 3131行~3291行

div=' BTN-组'按钮类型='按钮'按钮=' BTN BTN-默认' span '字体-字体后退一步/span/button…button type=' button ' class=' BTN BTN-default ' span class=' glyphicon-glyphicon-前进一步/span/button/div CSS 3360。英国电信集团.BTN组-垂直{位置：相对；显示器：内联块；垂直对齐： 中间；}.英国电信集团.btn .BTN组-垂直btn {position:相对；向左浮动：}.btn-group .btn:hover .BTN组-垂直btn:hover .btn-group .BTN组-垂直BTN :焦点BTN-组.BTN组-垂直BTN :有效btn-group .btn.active .BTN-集团-垂直。BTN。活动{ z-index : 2；}.btn-group .BTN-集团-垂直。BTN :重点{提纲：无；}.英国电信集团.btn .btn .英国电信集团.btn .英国电信集团.英国电信集团.英国电信集团.btn .英国电信集团.英国电信集团.BTN-集团{页边空白-左侧：-1px；}除了可以使用按钮元素之外，还可以使用其他标签元素，比如a标签，唯一要保证的是：不管使用什么标签，BTN组容器里的标签元素需要带有类名。按钮

按钮组四个角都是圆角，除了第一个和最后一个按钮具有边上的圆角外，其他的按钮没有圆角。

详解：

1、默认：所有按钮都是圆角

2、除第一个按钮和最后一个按钮，其他的按钮圆角取消

3、最后一个按钮只留右上角和右下角为圆角

源码：BTN集团。BTN :诺特(:第一个孩子):不是(:最后一个孩子：不是.下拉-切换){ border-radius : 0；}.BTN集团。BTN :第一个子级{左边距-: 0；}.BTN集团。BTN :第一个孩子：不是(:最后一个孩子):不是(:最后一个孩子).下拉-切换){边框-右上角-半径： 0;边框-底部-右侧-半径： 0;}.BTN集团。BTN :最后一个孩子：号(第一个孩子：)，2000 .英国电信集团.下拉-切换： not(:第一个孩子){边框-左上角-半径： 0；边框-底部-左侧-半径： 0;}.英国电信集团.btn-group {float:左侧；}.英国电信集团.BTN-第：号集团(:第一个孩子):号(:最后一个孩子)。BTN {边界半径： 0；}.英国电信集团.小组第一个孩子英国电信集团.小组第一胎。下拉-切换{边框-右上角-半径： 0;边框-底部-右侧-半径： 0;}.英国电信集团.小组的最后一个孩子。BTN :第一个孩子{边框-左上角-半径： 0；边框-底部-左侧-半径： 0;}按钮组工具栏

在富文本编辑器中，将按钮组分组排列在一起，比如说复制，剪切，粘贴一组，左对齐，中间对齐，右对齐和两端对齐一组，这时需要用到引导程序框架按钮工具栏BTN工具栏

div class=' BTN-工具栏' div class=' BTN-组'……/div class=' BTN-组'……/div class=' BTN-组'……/div class=' BTN-组'……/div/div原理：主要是让容器的多个分组BTN组元素进行浮动，并且组与组之间保持5px的左外距。BTN工具栏{左边距-:-5px；}.BTN工具栏英国电信集团.BTN工具栏。输入组{左侧浮动：}.BTN工具栏英国电信公司.BTN工具栏英国电信集团.BTN工具栏。输入组{左边距： 5px}注意在BTN工具栏上清除浮动。btn-toolbar:before .BTN-工具栏：后{显示：表格；内容： " "；}.{clear:双双}之后的BTN-工具栏：}示例：

div class=' BTN-工具栏' div class=' BTN-组' button class=' BTN BTN-默认' type=' button ' span class=' glyphicon glyphicon-align-left '/span/button class=' BTN BTN-默认' type=' button ' span ' span/button class=' BTN BTN-默认' span ' class=' glyphicon glyphicon-align-right '/span/button class=' BTN BTN按钮嵌套分组

很多时候，我们把下拉菜单很普通的按钮组排列在一起，实现类似于导航菜单的效果：

使用的时候只需将之前制作下拉菜单的下拉式容器的类名换成BTN组，并且和普通的按钮放在同一级：

div=' BTN-集团'按钮=' BTN BTN-默认'类型='按钮'首页/button button class=' BTN BTN-默认' type=' button '产品展示/button button class=' BTN BTN-默认' type=' button '案例分析/button button class=' BTN BTN-默认' type=' button '联系我们/button div class=' BTN-组' button class=' BTN BTN-默认下拉-切换'数据-切换='下拉' type=' button '关于我们span class='插入符号'/span/button ul class='下拉菜单lia href='# '公司简介/a/lilia href='# '企业文化/a/lilia href='# '组织结构/a/lilia href='# '客服服务/a/li/ul/div/div.btn-group .btn-group {float:左侧；}.英国电信集团.BTN-第：号集团(:第一个孩子):号(:最后一个孩子)。BTN {边界半径： 0；}.英国电信集团.小组第一个孩子英国电信集团.小组第一胎。下拉-切换{边框-右上角-半径： 0;边框-底部-右侧-半径： 0;}.英国电信集团.小组的最后一个孩子。BTN :第一个孩子{边框-左上角-半径： 0；边框-底部-左侧-半径： 0;}.英国电信集团.下拉列表-toggle:active .btn-group.open .下拉-切换{ outline : 0；}.英国电信集团.btn .下拉-切换{填充-右侧： 8px左填充left: 8px}。英国电信集团.btn-lg .下拉-切换{填充-右侧： 12px左填充： 12px}.btn-group.open .下拉-切换{-web kit-box-shadow : inset 0 3px 5px rgba(0，0，0，125);箱形阴影：插图0 3px 5px rgba(0，0，0，125);}.btn-group.open .下拉切换。BTN-链接{-网络工具包-盒子-阴影：无；盒子阴影：无；}按钮垂直分组

只需把水平分组的类名BTN组换成BTN组-垂直即可。

div=' BTN-组-垂直'按钮=' BTN BTN-默认'类型='按钮'首页/button button class=' BTN BTN-默认' type=' button '产品展示/button button class=' BTN BTN-默认' type=' button '案例分析/button button class=' BTN BTN-默认' type=' button '联系我们/button div class=' BTN-组' button class=' BTN BTN-默认下拉-切换'数据-切换='下拉' type=' button '关于我们span class='插入符号'/span/button ul class='下拉菜单lia href='# '公司简介/a/lilia href='# '企业文化/a/lilia href='# '组织结构/a/lilia href='# '客服服务/a/Li/ul/div/div。BTN组-垂直英国电信公司.BTN组-垂直英国电信集团.BTN组-垂直英国电信集团.btn {显示：块；浮动：无；宽度： 100%;最大宽度： 100%;}.BTN组-垂直英国电信集团.btn { float:无}。BTN组-垂直btn .btn .BTN组-垂直btn .英国电信集团.BTN组-垂直英国电信集团.btn .BTN组-垂直英国电信集团.BTN-集团{保证金-最高：-1px；左边距-: 0;}.BTN-集团-垂直。BTN :非(:第一个孩子):非(:最后一个孩子){边框半径： 0；}.BTN-集团-垂直。BTN :第一个孩子：不是(:最后一个孩子){边框-右上角-半径： 4px边框-底部-右侧-半径： 0;边框-底部-左侧-半径： 0;}.BTN-集团-垂直。BTN :最后一个孩子：不是(:第一个孩子){边框-左上角-半径： 0；边框-右上角-半径： 0;边框-底部-左侧-半径： 4px}.BTN组-垂直BTN-集团编号：(:第一个孩子):号(:最后一个孩子)。BTN {边界半径： 0；}.BTN组-垂直BTN-组：第一个孩子：不是(:最后一个孩子)。BTN :最后一个孩子.BTN组-垂直BTN-:组第一个孩子：不是(:最后一个孩子).下拉-切换{边框-底部-右侧-半径： 0;边框-底部-左侧-半径： 0;}.BTN组-垂直BTN-组：最后一个孩子：不是(:第一个孩子)。BTN :第一个孩子{边框-左上角-半径： 0；边框-右上角-半径： 0;}等分按钮又称为自适应分组按钮：

整个按钮组的宽度是容器的100%,而按钮组里面的每个按钮平分整个容器的宽度，例如一个按钮组里有五个按钮，每个按钮是容器宽度的20%;一个按钮组里有四个按钮，每个按钮是容器宽度的25%;

实现方法：只需要在按钮组BTN组上追加一个类名BTN组对齐

' BTN-BTN组-对齐组'按钮=' BTN BTN-默认'类型='按钮'首页/button button class=' BTN BTN-默认' type=' button '案例分析/button button class=' BTN BTN-默认' type=' button '联系我们/button button class=' BTN BTN-默认' type=' button '关于我们/button/div。BTN组对齐{ display:表格宽度： 100%;固定表布局：边框-折叠：分开；}.BTN分组-对齐英国电信公司.BTN分组-对齐BTN-组{显示：表格-单元格；浮动：无；宽度： 1%;}.BTN分组-对齐英国电信集团.BTN {宽度： 100%；}把BTN组对齐模拟成表格（显示：表格),并且把里面的按钮模板模拟成表格单元格（显示：表格单元格).

注意：在制作等分按钮组时，尽量使用a标签来制作按钮，因为使用按钮标签元素时，使用显示：表格在部分浏览器下支持并不友好

我们推荐阅读：

详解引导程序按钮

以上所述是小编给大家介绍的引导程序按钮组件，希望对大家有所帮助！