按鈕

按鈕樣式

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

實(shí)例

<button type="button" class="btn">基礎(chǔ)</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">危險(xiǎn)</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> 元素：

實(shí)例

<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="重置按鈕">

為什么我們?cè)阪溄拥?href 屬性中寫一個(gè) #？

由于我們沒(méi)有任何可鏈接到的頁(yè)面，而且我們不想收到 "404" 消息，因此我們將 # 作為鏈接。在現(xiàn)實(shí)生活中，它應(yīng)是“搜索”頁(yè)面的真實(shí) URL。

按鈕輪廓

Bootstrap 5 還提供了八個(gè)輪廓/邊框按鈕。

將鼠標(biāo)移到它們上方，可看到額外的“懸?！毙Ч?/p>

實(shí)例

<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">危險(xiǎn)</button>
<button type="button" class="btn btn-outline-dark">深色</button>
<button type="button" class="btn btn-outline-light text-dark">淺色</button>

按鈕尺寸

對(duì)大按鈕使用 .btn-lg 類，對(duì)小按鈕使用 .btn-sm 類：

實(shí)例

<button type="button" class="btn btn-primary btn-lg">大型</button>
<button type="button" class="btn btn-primary">默認(rèn)</button>
<button type="button" class="btn btn-primary btn-sm">小型</button>

塊級(jí)按鈕

如需創(chuàng)建跨越父元素整個(gè)寬度的塊級(jí)按鈕，請(qǐng)?jiān)诟冈厣鲜褂?.d-grid "helper" 類：

實(shí)例

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

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

實(shí)例

<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>

活動(dòng)/禁用按鈕

按鈕可以設(shè)置為活動(dòng)（顯示為被按下）或禁用（不可點(diǎn)擊）狀態(tài)：

類 .active 使按鈕顯示為被按下的狀態(tài)，而 disabled 屬性使按鈕不可點(diǎn)擊。請(qǐng)注意，<a> 元素不支持 disabled 屬性，因此必須使用 .disabled 類使其在視覺(jué)上顯示為禁用。

實(shí)例

<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 教程中學(xué)到更多內(nèi)容：

實(shí)例

<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>