Bootstrap-v3-组件-按钮组

按钮组

1、基本实例

把多个按钮放在一个容器中，添加类.btn-group即可。

   <!-- 按钮组 -->
   <div class="btn-group" role="group">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>

2、按钮工具栏

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

   <!-- 按钮工具栏 -->
   <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default">1</button>
      <button class="btn btn-default">2</button>
      <button class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default">4</button>
      <button class="btn btn-default">5</button>
      <button class="btn btn-default">6</button>
    </div>
   </div>

3、按钮组的尺寸

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

    <!-- 按钮组的尺寸 -->
    <!-- 默认尺寸 -->
   <div class="btn-group">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
   <!-- 大尺寸 -->
   <div class="btn-group btn-group-lg">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
    <!-- 小尺寸 -->
   <div class="btn-group btn-group-sm">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
   <!-- 超小尺寸 -->
   <div class="btn-group btn-group-xs">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>

4、按钮组的嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。注意：按钮的嵌套中不能省略button的dropdown-toggle类。

   <!-- 按钮组的嵌套 -->
   <div class="btn-group">
     <button class="btn btn-warning">按钮1</button>
     <button class="btn btn-warning">按钮2</button>
     <div class="btn-group dropdown">
       <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>

5、按钮组的垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。<div class="btn-group-vertical">

 

   <!-- 按钮组的垂直排列 -->
   <div class="btn-group-vertical">
     <button class="btn btn-warning">按钮1</button>
     <button class="btn btn-warning">按钮2</button>
     <div class="btn-group dropdown">
       <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>

6、按钮组的两端对齐排列

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。<div class="btn-group btn-group-justified">

   <!-- 按钮组的两端对齐排列 Button按钮必须包裹在btn-group的组件中-->
   <div class="btn-group btn-group-justified">
    <div class="btn-group">
     <button class="btn btn-default">按钮1</button>
    </div>
    <div class="btn-group">
     <button class="btn btn-default">按钮2</button>
    </div>
     <div class="btn-group dropdown">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>