Bootstrap 5 tunnus

Kurssisuositukset:

Tunnisteet

tunniste (Badges) lisäävät lisätietoja sisällölle: <span> elementissä .badge Luokat ja kontekstiluokat (kuten .bg-secondaryLuo suorakulmainen tunniste. Huomaa, että tunniste skaalautuu vanhemman elementin kokoon (jos on):

Esimerkki

<h1>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h1>
<h2>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h2>
<h3>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h3>
<h4>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h4>
<h5>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h5>
<h6>Esimerkki otsikko <span class="badge bg-secondary">Uusi</span></h6>

Kokeile itse

Kontekstitunniste

Käytä minkä tahansa kontekstiluokkaa (.bg-*) Muuta tunnuksen väri:

Esimerkki

<span class="badge bg-primary">Pääasiallinen</span>
<span class="badge bg-secondary">Toissijainen</span>
<span class="badge bg-success">Onnistunut</span>
<span class="badge bg-danger">Vaara</span>
<span class="badge bg-warning">Varoitus</span>
<span class="badge bg-info">Tieto</span>
<span class="badge bg-light">Himmeä</span>
<span class="badge bg-dark">Kirkas</span>

Kokeile itse

Kapseli tunnusliput

Käyttö .rounded-pill Luokat tekevät tunnuslipusta pyöreämmän:

Esimerkki

<span class="badge rounded-pill bg-primary">Pääasiallinen</span>
<span class="badge rounded-pill bg-secondary">Toissijainen</span>
<span class="badge rounded-pill bg-success">Onnistuminen</span>
<span class="badge rounded-pill bg-danger">Vaara</span>
<span class="badge rounded-pill bg-warning">Varoitus</span>
<span class="badge rounded-pill bg-info">Tieto</span>
<span class="badge rounded-pill bg-light">Himmeä</span>
<span class="badge rounded-pill bg-dark">Kirkas</span>

Kokeile itse

Tunnuslipun sisällä oleva elementti

Esimerkki tunnuslippu käytöstä painikkeessa:

Esimerkki

<button type="button" class="btn btn-primary">
  Viesti <span class="badge bg-danger">4</span>
</button>

Kokeile itse