Bootstrap5 按鈕

Bootstrap 5 提供了不同樣式的按鈕。

<button type="button" class="btn">基本按鈕</button>

<button type="button" class="btn btn-primary">主要按鈕</button>

<button type="button" class="btn btn-secondary">次要按鈕</button>

<button type="button" class="btn btn-success">成功</button>

<button type="button" class="btn btn-info">資訊</button>

<button type="button" class="btn btn-warning">警告</button>

<button type="button" class="btn btn-danger">危險</button>

<button type="button" class="btn btn-dark">黑色</button>

<button type="button" class="btn btn-light">淺色</button>

<button type="button" class="btn btn-link">連結</button>

按鈕類可用于 <a>, <button>, 或

<input> 元素上:

<a href="#" class="btn btn-info" role="button">連結按鈕</a>

<button type="button" class="btn btn-info">按鈕</button>

<input type="button" class="btn btn-info" value="輸入框按鈕">

<input type="submit" class="btn btn-info" value="送出按鈕">

<input type="reset" class="btn btn-info" value="重置按鈕">

Bootstrap 5 也可以設定按鈕多邊框，滑鼠移動到按鈕上添加突出到效果：

<button type="button" class="btn btn-outline-primary">主要按鈕</button>

<button type="button" class="btn btn-outline-secondary">次要按鈕</button>

<button type="button" class="btn btn-outline-success">成功</button>

<button type="button" class="btn btn-outline-info">資訊</button>

<button type="button" class="btn btn-outline-warning">警告</button>

<button type="button" class="btn btn-outline-danger">危險</button>

<button type="button" class="btn btn-outline-dark">黑色</button>

<button type="button" class="btn btn-outline-light text-dark">淺色</button>

Bootstrap 5 可以設定按鈕的大小，使用 .btn-lg 類設定大按鈕，使用 .btn-sm 類設定小按鈕：

<button type="button" class="btn btn-primary btn-lg">大号按鈕</button>

<button type="button" class="btn btn-primary">預設按鈕</button>

<button type="button" class="btn btn-primary btn-sm">小号按鈕</button>

通過添加 .btn-block 類可以設定塊級按鈕，.d-grid 類設定在父級元素中：

<div class="d-grid">

<button type="button" class="btn btn-primary btn-block">按鈕 1</button>

</div>

如果有多個塊級按鈕，你可以使用用 .gap-* 類來設定：

<div class="d-grid gap-3">

<button type="button" class="btn btn-primary btn-block">100% 寬度的按鈕</button>

按鈕可設定為激活或者禁止點選的狀态。

.active 類可以設定按鈕是可用的， disabled 屬性可以設定按鈕是不可點選的。

注意 <a> 元素不支援 disabled

屬性，你可以通過添加 .disabled 類來禁止連結的點選。

<button type="button" class="btn btn-primary active">點選後的按鈕</button>

<button type="button" class="btn btn-primary" disabled>禁止點選的按鈕</button>

<a href="#" class="btn btn-primary disabled">禁止點選的連結</a>

我們也可以設定一個正在加載的按鈕。

<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>

Loading..

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>