Bootstrap--组件之按钮组

什么是按钮组呢？简单解释：就是把一堆的按钮放在一行或者一列中。下面来看一个实例。

按钮组嘛，首先是按钮，所以会用到.btn这个类，还有就是bootstrap提供的按钮组.btn-group这个类，所以是很简单的，以下是bootstrap中文网提供的简单的例子

<div class="btn-group" role="group" aria-label="...">

  <button type="button" class="btn btn-default">Left</button>

  <button type="button" class="btn btn-default">Middle</button>

  <button type="button" class="btn btn-default">Right</button>

</div>

上面的代码就实现了简单的按钮组，效果如下：

在这里还是要说一下，使用button的时候要用input，不要直接使用button，虽然可以使用，但是还是会出现一些问题的。

1，按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

<div class="btn-toolbar" role="toolbar" aria-label="...">

  <div class="btn-group" role="group" aria-label="...">...</div>

  <div class="btn-group" role="group" aria-label="...">...</div>

  <div class="btn-group" role="group" aria-label="...">...</div>

</div>

2，尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>

<div class="btn-group" role="group" aria-label="...">...</div>

<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

3，嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">

  <button type="button" class="btn btn-default">1</button>

  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      Dropdown

      <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">Dropdown link</a></li>

      <li><a href="#">Dropdown link</a></li>

    </ul>

  </div>

</div>

4，垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。使用btn-group-vertical这个类

<div class="btn-group-vertical" role="group" aria-label="...">

  ...

</div>

5，两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。需要使用 .btn-group-justified这个类

<div class="btn-group btn-group-justified" role="group" aria-label="...">

  ...

</div>

关于边框的处理

由于对两端对齐的按钮组使用了特定的 HTML 和 CSS （即 display: table-cell），两个按钮之间的边框叠加在了一起。在普通的按钮组中，margin-left: -1px 用于将边框重叠，而没有删除任何一个按钮的边框。然而，margin 属性不支持 display: table-cell。因此，根据你对 Bootstrap 的定制，你可以删除或重新为按钮的边框设置颜色。

IE8 和边框

Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框，无论是 <a> 或 <button> 元素。为了照顾 IE8，把每个按钮放入另一个 .btn-group 中即可。

按钮组中包含的可能不仅仅是button,至于其他的标签怎么嵌套请大家到www.bootcss.com官网学习或者前往极客学院注册学习（要花钱的）。

谢谢大家！