按钮组

使用下拉菜单需要加载element模块，可通过下列方式加载

//加载element模块
auxui(['element'], function (){
    //加载后执行一些动作和事件处理
});

基本实例

按钮组合 .btn in .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">左对齐</button>
  <button type="button" class="btn btn-default">居中</button>
  <button type="button" class="btn btn-default">右对齐</button>
</div>

按钮工具栏

把一组 <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>

尺寸

只要给 .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>

嵌套

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

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <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 id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </div>
</div>

垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-default">按钮</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-default">按钮</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </div>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </div>
</div>

两端对齐排列的按钮组

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

关于边框的处理

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

IE8 和边框

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

关于 `<a>` 元素

只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

左对齐居中右对齐

左对齐居中

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
    <a href="#" class="btn btn-default" role="button">左对齐</a>
    <a href="#" class="btn btn-default" role="button">居中</a>
    <a href="#" class="btn btn-default" role="button">右对齐</a>
</div>
<br>
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
    <a href="#" class="btn btn-default" role="button">左对齐</a>
    <a href="#" class="btn btn-default" role="button">居中</a>
    <div class="btn-group" role="group">
        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </div>
</div>

关于 `<button>` 元素

为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上，但是，由于我们支持按钮式下拉菜单，我们可以解决这个问题。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">左对齐</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">居中</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">右对齐</button>
  </div>
</div>

按钮组