Tunnusmerkit
Asiakirjat ja esimerkit tunnusmerkeistä, pieni määrä ja merkintäkomponenttimme.
Tunnusmerkit skaalautuvat vastaamaan välittömän yläelementin kokoa käyttämällä suhteellista kirjasinkokoa ja emyksiköitä.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>Tunnusmerkkejä voidaan käyttää osana linkkejä tai painikkeita laskurin tarjoamiseen.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Huomaa, että käyttötavasta riippuen merkit voivat olla hämmentäviä näytönlukuohjelmien ja vastaavien aputekniikoiden käyttäjille. Vaikka merkkien tyyli antaa visuaalisen vihjeen niiden tarkoituksesta, näille käyttäjille yksinkertaisesti esitetään tunnuksen sisältö. Tilanteesta riippuen nämä merkit voivat tuntua satunnaisilta lisäsanoilta tai -numeroilta lauseen, linkin tai painikkeen lopussa.
Ellei konteksti ole selkeä (kuten "Ilmoitukset"-esimerkissä, jossa ymmärretään, että "4" on ilmoitusten määrä), harkitse lisäkontekstia visuaalisesti piilotetulla lisätekstipalalla.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Lisää mikä tahansa alla mainituista muokkausluokista muuttaaksesi tunnuksen ulkoasua.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Avustavan tekniikan merkityksen välittäminen
Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettu lisäteksti.
Käytä .badge-pillmuokkausluokkaa saadaksesi merkit pyöristetymmiksi (suuremmalla border-radiusja ylimääräisellä vaakasuuntaisella padding). Hyödyllinen, jos unohdat v3:n merkit.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Käyttämällä elementin kontekstuaalisia .badge-*luokkia <a>saat nopeasti käyttökelpoisia merkkejä, joissa on hiiri- ja tarkennustilat.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>