Button ng Bootstrap 5

Estilo ng button

Bootstrap 5 ay nagbibigay ng iba't ibang estilo ng button:

Halimbawa

<button type="button" class="btn">-basic</button>
<button type="button" class="btn btn-primary">-primary</button>
<button type="button" class="btn btn-secondary">-secondary</button>
<button type="button" class="btn btn-success">-success</button>
<button type="button" class="btn btn-info">-info</button>
<button type="button" class="btn btn-warning">-warning</button>
<button type="button" class="btn btn-danger">-danger</button>
<button type="button" class="btn btn-dark">-dark</button>
<button type="button" class="btn btn-light">-light</button>
<button type="button" class="btn btn-link">-link</button>

Subukan Ngayon

Ang klase ng button ay maaaring gamitin sa <a>、<button> o <input> Elemento:

Halimbawa

<a href="#" class="btn btn-success">-link na button</a>
<button type="button" class="btn btn-success">-button</button>
<input type="button" class="btn btn-success" value="-input na button">
<input type="submit" class="btn btn-success" value="-sumite na button">
<input type="reset" class="btn btn-success" value="-reset na button">

Subukan Ngayon

Bakit kaming nagpapatuloy sa paglagay ng # sa atributo ng href ng link?

Dahil wala kaming anumang pahina na pwedeng linkin at ayaw naming makakita ng mensahe na "404", magamit namin ang # bilang link. Sa tunay na buhay, ito ay dapat na tunay na URL ng pahina na "hahanap".

Kontura ng buton

Nagbigay din ang Bootstrap 5 ng walong buton na kontura/na gilid.

Ilipat ang mouse sa itaas nila, makikita ang dagdag na "hover" epekto:

Halimbawa

<button type="button" class="btn btn-outline-primary">Pangunahin</button>
<button type="button" class="btn btn-outline-secondary">Segundaryo</button>
<button type="button" class="btn btn-outline-success">Matagumpay</button>
<button type="button" class="btn btn-outline-info">Impormasyon</button>
<button type="button" class="btn btn-outline-warning">Babala</button>
<button type="button" class="btn btn-outline-danger">Panganib</button>
<button type="button" class="btn btn-outline-dark">Mataas na puti</button>
<button type="button" class="btn btn-outline-light text-dark">Mapurol</button>

Subukan Ngayon

Laki ng buton

Gumamit para sa malaki na buton .btn-lg Klase, gamitin para sa maliit na buton .btn-sm Klase:

Halimbawa

<button type="button" class="btn btn-primary btn-lg">Malaki</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Maliit</button>

Subukan Ngayon

Bloke na buton

Kung gusto lumikha ng isang bloke na buton na sumasaklaw sa buong lapad ng magulang na elemento, gamitin ang .d-grid "helper" klase:

Halimbawa

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
</div>

Subukan Ngayon

Kung mayroon kang maraming block-level button, maaari mong gamitin .gap-* Ang klase ay kumakontrol ng pagkakaiba ng puwang sa pagitan nila:

Halimbawa

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
</div>

Subukan Ngayon

Active/Disable Button

Ang button ay maaaring itakda sa estado ng aktibo (lumilitaw na na-click) o disable (hindi puwedeng i-click):

klase .active Gumagawa ng button na lumilitaw na na-click, habang disabled Ang propyedade ay gumagawa ng button na hindi puwedeng i-click. Pansin na ang elemenong <a> ay hindi sumusuporta sa disabled propyedade, kaya dapat gamitin: .disabled Ang klase ay gumagawa ng disable sa visual na pagpapakita.

Halimbawa

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

Subukan Ngayon

Button Loader

Maaari mo ring magdagdag ng "spinner" sa button, at mas marami pang kaalaman ay masusulat sa aming tutorial sa BS5 Spinner:

Halimbawa

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

Subukan Ngayon