<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

☑ LESS 版本：对应的源文件为 buttons.less

☑ Sass 版本：对应的源文件为 _buttons.scss

☑ CSS 版本：对应 bootstrap.css 文件第3131行～第3291行

使用方法

按钮组和下拉菜单组件一样，需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。

使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。如下所示：

<body>

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
</div>

  <script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按钮组

除了可以使用 <button> 元素之外，还可以使用其他标签元素，比如 <a> 标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。

我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？

默认所有按钮都有圆角
除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果
第一个按钮只留左上角和左下角是圆角
最后一个按钮只留右上角和右下角是圆角

按钮工具栏

将按钮组分组排列在一起，只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持 5px 的左外距。

按钮组大小设置

我们知道按钮是通过 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 class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group btn-group-sm">
    …
  </div>
  <div class="btn-group btn-group-xs">
   …
  </div>
</div>

嵌套分组

只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。

<body>
<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">公司简介</a></li>
        <li><a href="##">企业文化</a></li>
        <li><a href="##">组织结构</a></li>
        <li><a href="##">客服服务</a></li>
    </ul>
  </div>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <button class="btn btn-default" type="button">关于我们</button>
</div>
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按钮组嵌套分组

垂直分组

我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

<body>
<div class="btn-group-vertical">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">公司简介</a></li>
        <li><a href="##">企业文化</a></li>
        <li><a href="##">组织结构</a></li>
        <li><a href="##">客服服务</a></li>
    </ul>
  </div>
</div>
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按钮组垂直分组

等分按钮组

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的 100%，而按钮组里面的每个按钮平分整个容器宽度。

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首页</a>
  <a class="btnbtn-default" href="#">产品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>

等分按钮组

实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。

注意：在制作等分按钮组时，请尽量使用 <a> 标签元素来制作按钮，因为使用 <button> 标签元素时，使用 display:table 在部分浏览器下支持并不友好。

按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会隐藏显示的下拉菜单。

钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
      </ul>
</div>

按钮向下向上三角形

按钮的向下三角形，我们是通过在 <button> 标签中添加一个“<span>”标签元素，并且命名为“caret”:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>