Bootstrap 5 按鈕組

按鈕組

Bootstrap 5 允許您在按鈕組中將一系列按鈕組合在一起（在一行上）：

請使用帶有 .btn-group 類的 <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>

親自試一試

提示：請不要將按鈕大小應用于組中的每個按鈕，而是將類 .btn-group-lg 用于大按鈕組或將 .btn-group-sm 用于小按鈕組：

實例

<div class="btn-group btn-group-lg">
  <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>

親自試一試

垂直按鈕組

Bootstrap 5 還支持垂直按鈕組：

請使用類 .btn-group-vertical 創建垂直按鈕組：

實例

<div class="btn-group-vertical">
  <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>

親自試一試

并排按鈕組

默認情況下，按鈕組是 "inline" 的，存在多個按鈕組時會并排顯示：

實例

<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 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 class="btn-group">
  <button type="button" class="btn btn-primary">華為</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="#">手機</a>
      <a class="dropdown-item" href="#">平板電腦</a>
    </div>
  </div>
</div>

親自試一試