上一节:
下一节:

  Bootstrap 按钮组

  • 定义和使用

    Bootstrap 允许您将一系列按钮组合在一起（在一行中）在一个按钮组中。
    将 .divn-group 类的 <div> 元素用于创建按钮组： 
    <div class="container">
   <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">三星</button>
      <button type="button" class="btn btn-primary">索尼</button>
   </div>
</div>
    尝试一下
    提示：不要将按钮大小应用于组中的每个按钮，而应将类 .btn-group-lg 用于大型按钮组，将 .btn-group-sm 用于小型按钮组： 
    <div class="container">
    <h2>按钮组大小</h2>
      <p>添加.btn-group- *类以调整按钮组中所有按钮的大小。</p>
      <h3>大按钮：</h3>
      <button class ="btn-group btn-group-lg">
        <button type ="button" class ="btn btn-primary"> Apple </button>
        <button type ="button" class ="btn btn-primary">三星</button>
        <button type ="button" class ="btn btn-primary">索尼</button>
      </div>
      <h3>默认按钮：</h3>
      <button class ="btn-group">
        <button type ="button" class ="btn btn-primary"> Apple </button>
        <button type ="button" class ="btn btn-primary">三星</button>
        <button type ="button" class ="btn btn-primary">索尼</button>
      </div>
      <h3>小按钮：</h3>
      <button class ="btn-group btn-group-sm">
        <button type ="button" class ="btn btn-primary"> Apple </button>
        <button type ="button" class ="btn btn-primary">三星</button>
        <button type ="button" class ="btn btn-primary">索尼</button>
      </div>
</div>
    尝试一下
    输出结果如下：

    大型按钮组:

    默认的按钮组:

    小型按钮组:

  • 垂直按钮组

    使用类 .btn-group-vertical 创建一个垂直按钮组： 
    <div class="container">
   <div class="btn-group-vertical">
     <button type ="button" class ="btn btn-primary"> Apple </button>
     <button type ="button" class ="btn btn-primary">三星</button>
     <button type ="button" class ="btn btn-primary">索尼</button>
   </div>
</div>
    尝试一下
    输出结果如下：

  • 嵌套按钮组和下拉菜单

    嵌套按钮组可以创建下拉菜单： 
    <div class="container">
  <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">三星</button>
      <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
         索尼
      </button>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="#">索尼1</a>
         <a class="dropdown-item" href="#">索尼2</a>
      </div>
      </div>
  </div>
</div>
    尝试一下
    输出结果如下：
    索尼1 索尼2
    提示：如想换成垂直的嵌套按钮组，可以上面示例的父元素类 .btn-group 换成 .btn-group-vertical

  • 拆分按钮下拉菜单

    下面示例演示了拆分按钮下拉菜单： 
    <div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">索尼</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="caret"></span>
         </button>
         <div class="dropdown-menu">
            <a class="dropdown-item" href="#">索尼1</a>
            <a class="dropdown-item" href="#">索尼2</a>
         </div>
      </div>
   </div>
</div>
    尝试一下
    输出结果如下：
    索尼1 索尼2

  • 并排按钮组

    默认情况下，按钮组是“内联”的，当您有多个组时，它们可以并排显示： 
    <div class="container">
 <div class="btn-group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">三星</button>
   <button type="button" class="btn btn-primary">索尼</button>
 </div>
 
 <div class="btn-group">
   <button type="button" class="btn btn-primary">宝马</button>
   <button type="button" class="btn btn-primary">奔驰</button>
   <button type="button" class="btn btn-primary">欧迪</button>
 </div>
</div>
    尝试一下
    输出结果如下：
    想了解更多的按钮知识，请参考 bootstrap 按钮手册
上一节:
下一节: