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>
    
    输出结果如下:
    提示:如想换成垂直的嵌套按钮组,可以上面示例的父元素类 .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>
    
    输出结果如下:
  • 并排按钮组

    默认情况下,按钮组是“内联”的,当您有多个组时,它们可以并排显示:
    <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 按钮手册