Bootstrap 5 Button

Kaiyar yanuwa

Bootstrap 5 yan kaiyar da yauwan da suka

shaidama

<button type="button" class="btn">kaiyawa aiki</button>
<button type="button" class="btn btn-primary">kaiyawa maiharin</button>
<button type="button" class="btn btn-secondary">kaiyawa na yauwan</button>
<button type="button" class="btn btn-success">kaiyawa</button>
<button type="button" class="btn btn-info">masanin</button>
<button type="button" class="btn btn-warning">gabatar da kaiyawa</button>
<button type="button" class="btn btn-danger">dajin</button>
<button type="button" class="btn btn-dark">gudu</button>
<button type="button" class="btn btn-light">waniya</button>
<button type="button" class="btn btn-link">hararinta</button>

kai kai sake girmama

Kaiyar class za ayyuka <a>wa<button> tama <input> Kaiyar:

shaidama

<a href="#" class="btn btn-success">kaiyan hara</a>
<button type="button" class="btn btn-success">kaiyan</button>
<input type="button" class="btn btn-success" value="kaiyan kama">
<input type="submit" class="btn btn-success" value="kaiyan tukuriya">
<input type="reset" class="btn btn-success" value="ṣabuwar kama kaiyan">

kai kai sake girmama

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

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

按鈕輪廓

Bootstrap 5 繼續提供了八個輪廓/邊框按鈕。

將鼠標移到它們上方，可看到額外的“懸停”效果：

shaidama

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

kai kai sake girmama

按鈕尺寸

對大按鈕使用 .btn-lg 類，對小按鈕使用 .btn-sm 類：

shaidama

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

kai kai sake girmama

塊級按鈕

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

shaidama

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Button a kaiwa kuduwa</button>
</div>

kai kai sake girmama

idan kuna kuduwar manyan button da yawa, iya amfani da .gap-* kalama ke kware da tsawon kai tsawon kai:

shaidama

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Button a kaiwa kuduwa</button>
  <button type="button" class="btn btn-primary btn-block">Button a kaiwa kuduwa</button>
  <button type="button" class="btn btn-primary btn-block">Button a kaiwa kuduwa</button>
</div>

kai kai sake girmama

tushen na button aiki/cewace

tushen na button za a iya samun kaiwa yana aiki (an kaiya shi) ko cewa a kaiwa

kalama .active ke nuna tushen na button a matsayin an kaiya shi, kuma disabled daga tushen na button. Kwarewa, <a> element ba su da cikakken aiki na disabled attribute, kuma sabon .disabled kalama ke nuna a baya ga kaiwa cewa a kaiwa

shaidama

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

kai kai sake girmama

tushen na loader

Iya kuma zartar da "spinner" a cikin tushen na button, za kai kai iya samun kuma samun kimiyya a cikin tushen na BS5 Spinner:

shaidama

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

kai kai sake girmama