按鈕組

按鈕組

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

請使用帶有 .btn-group 類的 <div> 元素來創(chuàng)建按鈕組：

實例

<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>

提示：請不要將按鈕大小應(yīng)用于組中的每個按鈕，而是將類 .btn-group-lg 用于大按鈕組或?qū)?.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 創(chuàng)建垂直按鈕組：

實例

<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>

并排按鈕組

默認(rèn)情況下，按鈕組是 "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>

嵌套按鈕組和下拉菜單

嵌套按鈕組，可創(chuàng)建下拉菜單（您將在后面的章節(jié)中學(xué)習(xí)有關(guān)下拉菜單的更多內(nèi)容）：

實例

<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="#">手機(jī)</a>
      <a class="dropdown-item" href="#">平板電腦</a>
    </div>
  </div>
</div>