【Bootstrap 4】按钮组

Table of Contents

 

创建按钮组（.btn-group） 

设置按钮组大小（.btn-group-lg/.btn-group-sm）

设置按钮组垂直（.btn-group-vertical）

内嵌按钮组及下拉菜单

拆分按钮下拉菜单

​ 

Table of Contents

创建按钮组（.btn-group） 

设置按钮组大小（.btn-group-lg/.btn-group-sm）

设置按钮组垂直（.btn-group-vertical）

内嵌按钮组及下拉菜单

拆分按钮下拉菜单

​

垂直按钮组及下拉菜单

---

 

---

创建按钮组（.btn-group） 

设置按钮组大小（.btn-group-lg/.btn-group-sm）

设置按钮组垂直（.btn-group-vertical）

<div class="btn-group btn-group-lg btn-group-vertical">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <button type="button" class="btn btn-primary">Sony</button>
</div>

---

 

内嵌按钮组及下拉菜单

<div class="btn-group">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              Sony
          </button>
          <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Tablet</a>
               <a class="dropdown-item" href="#">SmartPhone</a>
          </div> 
     </div>
</div>

---

 

拆分按钮下拉菜单

 <div class="btn-group">
     <button type="button" class="btn btn-primary">Sony</button>
     <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="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a>
     </div>
 </div>

---

 

垂直按钮组及下拉菜单

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" 
         data-toggle="dropdown">
             Sony
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">SmartPhone</a>
        </div>
    </div>
</div>