Bootstrap 5 按鈕

按鈕樣式

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-success">鏈接按鈕</a>
<button type="button" class="btn btn-success">按鈕</button>
<input type="button" class="btn btn-success" value="輸入按鈕">
<input type="submit" class="btn btn-success" value="提交按鈕">
<input type="reset" class="btn btn-success" value="重置按鈕">

親自試一試

為什么我們在鏈接的 href 屬性中寫一個 #？

由于我們沒有任何可鏈接到的頁面，而且我們不想收到 "404" 消息，因此我們將 # 作為鏈接。在現實生活中，它應是“搜索”頁面的真實 URL。

按鈕輪廓

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>

親自試一試

按鈕尺寸

對大按鈕使用 .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>

親自試一試

塊級按鈕

如需創建跨越父元素整個寬度的塊級按鈕，請在父元素上使用 .d-grid "helper" 類：

實例

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">全寬按鈕</button>
</div>

親自試一試

如果您有很多塊級按鈕，你可以用 .gap-* 類控制它們之間的間距：

實例

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">全寬按鈕</button>
  <button type="button" class="btn btn-primary btn-block">全寬按鈕</button>
  <button type="button" class="btn btn-primary btn-block">全寬按鈕</button>
</div>

親自試一試

活動/禁用按鈕

按鈕可以設置為活動（顯示為被按下）或禁用（不可點擊）狀態：

類 .active 使按鈕顯示為被按下的狀態，而 disabled 屬性使按鈕不可點擊。請注意，<a> 元素不支持 disabled 屬性，因此必須使用 .disabled 類使其在視覺上顯示為禁用。

實例

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

親自試一試

加載器按鈕

您還可以向按鈕添加 "spinner"，您將在我們的 BS5 Spinner 教程中學到更多內容：

實例

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

親自試一試