Bootstrap 5 按鈕組
按鈕組
Bootstrap 5 允許您將一系列按鈕組合在一起（在單行上）形成按鈕組。
使用帶有類 .btn-group 的 <div> 元素來建立按鈕組。
示例
<div class="btn-group">
<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>
自己動手試一試 »
提示： 您無需將按鈕大小應用於組中的每個按鈕，而是可以使用類 .btn-group-lg 用於大型按鈕組，或使用 .btn-group-sm 用於小型按鈕組。
大按鈕
預設按鈕
小按鈕
示例
<div class="btn-group btn-group-lg">
<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>
自己動手試一試 »
垂直按鈕組
Bootstrap 5 也支援垂直按鈕組。
使用類 .btn-group-vertical 來建立垂直按鈕組。
示例
<div class="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>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</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-bs-toggle="dropdown">Sony</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板電腦</a>
<a class="dropdown-item" href="#">智慧手機</a>
</div>
</div>
</div>
自己動手試一試 »
