在網頁開發中，經常需要將多個按鈕並排排列，形成一組功能相關的操作按鈕。Bootstrap5的“按鈕組”（Button Groups）功能可以輕鬆實現這一需求，無需手動編寫複雜的CSS佈局代碼。本文將從基礎到進階，詳細講解Bootstrap5按鈕組的使用方法，適合初學者快速上手。
一、什麼是Bootstrap5按鈕組？¶
按鈕組是將多個按鈕包裹在一個容器中，通過統一的類名實現並排顯示和樣式統一。它解決了傳統HTML中按鈕單獨排列時的間距、對齊和樣式不一致問題，同時支持尺寸、排列方向和嵌套等靈活擴展。
二、基礎用法：水平按鈕組¶
最常用的按鈕組是水平排列的，只需通過兩個核心類名即可實現：
- 外層容器：使用
.btn-group包裹所有按鈕，這是水平按鈕組的基礎容器。 - 內層按鈕：每個按鈕必須添加
.btn類（基礎按鈕樣式），以及Bootstrap提供的按鈕顏色類（如.btn-primary、.btn-secondary等）。
示例代碼：
<!-- 基礎水平按鈕組 -->
<div class="btn-group" role="group" aria-label="基礎操作按鈕組">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-secondary">取消</button>
<button type="button" class="btn btn-success">提交</button>
</div>
role="group"：無障礙屬性，告訴屏幕閱讀器這是一組相關按鈕。aria-label：爲按鈕組提供描述性標籤，提升無障礙體驗（可選但推薦）。- 效果：三個按鈕會並排顯示，且按鈕之間無額外間距（Bootstrap默認去除了按鈕間的margin）。
三、按鈕組的尺寸控制¶
Bootstrap5支持按鈕組整體尺寸的統一設置，只需在.btn-group外層添加尺寸類：
- 小尺寸：
.btn-group-sm - 默認尺寸：無需額外類（與按鈕默認尺寸一致）
- 大尺寸：
.btn-group-lg
示例代碼：
<!-- 小尺寸按鈕組 -->
<div class="btn-group btn-group-sm" role="group" aria-label="小尺寸按鈕組">
<button class="btn btn-primary">小按鈕1</button>
<button class="btn btn-secondary">小按鈕2</button>
</div>
<!-- 大尺寸按鈕組 -->
<div class="btn-group btn-group-lg" role="group" aria-label="大尺寸按鈕組">
<button class="btn btn-success">大按鈕1</button>
<button class="btn btn-warning">大按鈕2</button>
<button class="btn btn-danger">大按鈕3</button>
</div>
四、垂直按鈕組¶
如果需要垂直排列的按鈕組（如側邊導航菜單），可使用.btn-group-vertical類替代.btn-group：
示例代碼：
<div class="btn-group-vertical" role="group" aria-label="垂直按鈕組">
<button class="btn btn-outline-primary">首頁</button>
<button class="btn btn-outline-secondary">列表</button>
<button class="btn btn-outline-success">詳情</button>
</div>
- 效果：按鈕從上到下垂直排列，每個按鈕佔滿容器寬度。
五、按鈕組嵌套使用¶
按鈕組支持嵌套結構，常見場景是在按鈕組中包含下拉菜單按鈕（如“更多操作”按鈕）：
示例代碼：
<div class="btn-group" role="group" aria-label="嵌套按鈕組">
<button class="btn btn-primary">左側按鈕</button>
<button class="btn btn-secondary">中間按鈕</button>
<!-- 下拉菜單按鈕 -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
更多操作
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作1</a></li>
<li><a class="dropdown-item" href="#">操作2</a></li>
</ul>
</div>
</div>
- 關鍵點：嵌套的
.btn-group會形成一個獨立的按鈕組，與外層按鈕組並排顯示。
六、按鈕組對齊方式¶
若需控制整個按鈕組在父容器中的對齊方式（如居中、靠右），可結合Bootstrap的Flex佈局類：
- 靠左對齊：默認（無需額外類）
- 居中對齊：
.d-flex justify-content-center - 靠右對齊：
.d-flex justify-content-end
示例代碼：
<!-- 居中對齊的按鈕組 -->
<div class="d-flex justify-content-center">
<div class="btn-group" role="group" aria-label="居中對齊按鈕組">
<button class="btn btn-info">按鈕1</button>
<button class="btn btn-light">按鈕2</button>
</div>
</div>
七、注意事項¶
- 結構必須正確：按鈕組必須用
.btn-group包裹，內部按鈕必須用.btn類，不可直接嵌套其他非按鈕元素。 - 無障礙屬性：始終添加
role="group"和aria-label，幫助屏幕閱讀器識別按鈕組的功能。 - 避免過度嵌套：複雜場景（如多層嵌套下拉菜單）可能影響可維護性，可考慮使用更簡單的組件替代。
總結¶
Bootstrap5按鈕組通過簡單的類名組合，實現了按鈕的快速並排、尺寸控制、垂直排列和嵌套功能，極大簡化了網頁交互組件的開發。掌握上述基礎用法後，可輕鬆應對大多數常見的按鈕組合場景，提升開發效率。
關鍵類名速查表：
- .btn-group：水平按鈕組（默認）
- .btn-group-vertical：垂直按鈕組
- .btn-group-sm/.btn-group-lg：控制按鈕組整體尺寸
- .justify-content-*：按鈕組對齊方式（需配合.d-flex）
- 嵌套：.btn-group內包含.dropdown組件
通過以上技巧，你可以靈活使用Bootstrap5按鈕組構建出清晰、易用的操作界面，讓網頁交互更直觀高效。