Bootstrap 5 painikkeet

Nappityyli

Bootstrap 5 tarjoaa erilaisia nappeja:

Esimerkki

<button type="button" class="btn">Perus</button>
<button type="button" class="btn btn-primary">Pääasiallinen</button>
<button type="button" class="btn btn-secondary">Toissijainen</button>
<button type="button" class="btn btn-success">Onnistuminen</button>
<button type="button" class="btn btn-info">Tiedot</button>
<button type="button" class="btn btn-warning">Varoitus</button>
<button type="button" class="btn btn-danger">Vaara</button>
<button type="button" class="btn btn-dark">Kirkas</button>
<button type="button" class="btn btn-light">Värikäs</button>
<button type="button" class="btn btn-link">Linkki</button>

Kokeile itse

Nappiluokka voidaan käyttää <a>ja<button> tai <input> Elementti:

Esimerkki

<a href="#" class="btn btn-success">Linkkinappi</a>
<button type="button" class="btn btn-success">Nappi</button>
<input type="button" class="btn btn-success" value="Syötteen napppi">
<input type="submit" class="btn btn-success" value="Lähetänapppi">
<input type="reset" class="btn btn-success" value="Uudelleen asetusnapppi">

Kokeile itse

Miksi kirjoitamme #-merkkijonon linkin href-ominaisuuteen?

Koska meillä ei ole minkäänlaiseen sivuun liitettävää sivua ja emme halua saada "404"-viestiä, käytämme #-merkkijonoa. Todellisuudessa sen tulisi olla "haku"-sivun todellinen URL-osoite.

Painikkeen kontuurit

Bootstrap 5 tarjoaa kahdeksan reunan/kontuurin painiketta.

Kun viittomaat siirretään niiden yläpuolelle, näkyy lisä "hover"-vaikutus:

Esimerkki

<button type="button" class="btn btn-outline-primary">Pääasiallinen</button>
<button type="button" class="btn btn-outline-secondary">Toissijainen</button>
<button type="button" class="btn btn-outline-success">Onnistuminen</button>
<button type="button" class="btn btn-outline-info">Tiedot</button>
<button type="button" class="btn btn-outline-warning">Varoitus</button>
<button type="button" class="btn btn-outline-danger">Vaara</button>
<button type="button" class="btn btn-outline-dark">Tumma</button>
<button type="button" class="btn btn-outline-light text-dark">Vaalea</button>

Kokeile itse

Nappulan koko

Käytä suuriin painikkeisiin .btn-lg Lokalit, käytä pieniin painikkeisiin .btn-sm Lokalit:

Esimerkki

<button type="button" class="btn btn-primary btn-lg">Suuri</button>
<button type="button" class="btn btn-primary">Oletus</button>
<button type="button" class="btn btn-primary btn-sm">Pieni</button>

Kokeile itse

Nappulan koko

Jos haluat luoda nappulan, joka kattaa isäelementin koko leveyden, käytä isäelementissä: .d-grid Lokalit "helper"-luokka:

Esimerkki

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Täysleveä painike</button>
</div>

Kokeile itse

Jos sinulla on paljon blokkimaisia painikkeita, voit käyttää .gap-* Luokka hallitsee niiden välistä etäisyyttä:

Esimerkki

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Täysleveä painike</button>
  <button type="button" class="btn btn-primary btn-block">Täysleveä painike</button>
  <button type="button" class="btn btn-primary btn-block">Täysleveä painike</button>
</div>

Kokeile itse

Aktiivinen/sulkematon painike

Painikkeet voidaan asettaa aktiiviseen (näyttämään painetulta) tai käytettävänä olevaan (klikattavaksi) tilaan:

luokka .active tekee painikkeesta näyttämään painetun tilan, kun disabled Ominaisuus tekee painikkeesta klikattavan. Huomaa, että <a>-elementti ei tue disabled-ominaisuutta, joten on käytettävä .disabled Luokka tekee siitä visuaalisesti käytettävän.

Esimerkki

<button type="button" class="btn btn-primary active">Aktiivinen pääpainike</button>
<button type="button" class="btn btn-primary" disabled>Ei käytettävissä -pääpainike</button>
<a href="#" class="btn btn-primary disabled">Ei käytettävissä -linkki</a>

Kokeile itse

Latausnapit

Voit myös lisätä "spinner"-ominaisuuden painikkeeseen, ja saat lisää tietoa BS5 Spinner-opastuksestamme:

Esimerkki

<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>
  Lataa..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Lataa..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Lataa..
</button>

Kokeile itse