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>

Bootstrap--组件之按钮组

标签：

原文地址：http://www.cnblogs.com/yuanking/p/4742614.html