一、簡介¶
在網頁開發中，按鈕是用戶交互的重要元素。使用Bootstrap5的按鈕組件，可以快速實現統一的樣式、響應式佈局和豐富的交互狀態，無需從零開始編寫CSS。本章將帶你掌握Bootstrap5按鈕的核心用法，包括基礎樣式、尺寸調整和狀態設置。
二、引入Bootstrap5¶
在使用按鈕組件前，需要先引入Bootstrap5的CSS和JS文件。最簡單的方式是通過CDN（內容分發網絡）引入：
<head>
<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 引入Bootstrap5 JS（可選，若需要交互功能如下拉菜單等） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
提示：如果僅需要基礎樣式（無交互功能），可以只引入CSS文件。
三、基礎按鈕樣式¶
Bootstrap5按鈕的樣式通過不同的類名控制，核心是.btn類，再配合顏色類實現不同視覺效果。
1. 基礎按鈕類¶
所有按鈕必須添加.btn類作爲基礎，然後通過顏色類設置樣式：
<button class="btn">默認按鈕</button>
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-success">成功按鈕</button>
<button class="btn btn-info">信息按鈕</button>
<button class="btn btn-warning">警告按鈕</button>
<button class="btn btn-danger">危險按鈕</button>
<button class="btn btn-light">淺色按鈕</button>
<button class="btn btn-dark">深色按鈕</button>
效果：.btn-primary是最常用的藍色系按鈕，.btn-secondary是灰色系，其他顏色類對應不同主題色。
2. 輪廓按鈕¶
如果需要透明背景+邊框的樣式，可以使用btn-outline-*前綴：
<button class="btn btn-outline-primary">輪廓按鈕</button>
<button class="btn btn-outline-success">成功輪廓</button>
<button class="btn btn-outline-danger">危險輪廓</button>
特點：僅保留邊框和文字顏色，背景透明，懸停時會填充顏色（和填充類按鈕效果一致）。
四、按鈕尺寸設置¶
Bootstrap5提供了三種預設尺寸：默認、小尺寸（sm）、大尺寸（lg）。
1. 默認尺寸¶
不添加額外尺寸類時，按鈕爲默認大小：
<button class="btn btn-primary">默認按鈕</button>
2. 小尺寸按鈕¶
通過.btn-sm類設置小尺寸：
<button class="btn btn-primary btn-sm">小按鈕</button>
3. 大尺寸按鈕¶
通過.btn-lg類設置大尺寸：
<button class="btn btn-primary btn-lg">大按鈕</button>
效果對比：小按鈕更緊湊，大按鈕佔據更多空間，適合突出重要操作。
五、按鈕狀態設置¶
按鈕在不同交互狀態下會自動顯示不同樣式，無需額外CSS即可實現。
1. 懸停狀態（Hover）¶
鼠標懸浮在按鈕上時，默認會有顏色加深效果：
<button class="btn btn-primary">懸停試試</button>
原理：Bootstrap5通過CSS僞類hover自動實現，如.btn-primary:hover會讓背景色更深。
2. 點擊狀態（Active）¶
按鈕被點擊時，會有“內凹”效果（類似按壓感）：
<button class="btn btn-primary active">點擊按鈕</button>
提示：active類通常配合aria-pressed="true"屬性使用（無障礙支持），但基礎樣式無需額外處理。
3. 禁用狀態（Disabled）¶
通過disabled屬性禁用按鈕，此時按鈕會變灰且不可點擊：
<button class="btn btn-primary" disabled>禁用按鈕</button>
注意：
- 禁用按鈕必須添加disabled屬性（HTML原生屬性），而非類名。
- 禁用狀態下，無法觸發點擊事件（需JS處理時，可配合class="opacity-50 cursor-not-allowed"增強視覺反饋）。
六、實用擴展技巧¶
1. 按鈕形狀調整¶
通過邊框半徑工具類調整按鈕形狀：
- .rounded-0：無圓角（直角）
- .rounded：默認圓角（Bootstrap5中需搭配.rounded或直接寫rounded）
- .rounded-circle：圓形按鈕
<button class="btn btn-primary rounded-0">直角按鈕</button>
<button class="btn btn-primary rounded-circle">圓形按鈕</button>
2. 按鈕組（Btn Group）¶
多個按鈕可組合成一組（如導航、工具條），通過.btn-group類實現：
<div class="btn-group" role="group" aria-label="操作按鈕組">
<button class="btn btn-primary">左</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-danger">右</button>
</div>
效果：按鈕間會合並邊框，形成整體感，適合橫向排列的操作按鈕。
七、總結¶
Bootstrap5按鈕組件通過簡單的類名即可實現樣式、尺寸和狀態的控制，核心要點：
- 基礎樣式：.btn + 顏色類（如.btn-primary）或輪廓類（.btn-outline-*）。
- 尺寸控制：.btn-sm（小）、.btn-lg（大）。
- 狀態管理：disabled屬性（禁用）、自動hover/active效果。
練習建議：複製示例代碼到HTML文件，修改顏色、尺寸和狀態，觀察效果差異，快速熟悉類名規律。