Tunnusmerkit
Asiakirjat ja esimerkit tunnusmerkeistä, pieni määrä ja merkintäkomponenttimme.
Esimerkki
Tunnusmerkit skaalautuvat vastaamaan välittömän yläelementin kokoa käyttämällä suhteellista kirjasinkokoa ja em
yksiköitä.
EsimerkkiotsikkoUusi
EsimerkkiotsikkoUusi
EsimerkkiotsikkoUusi
EsimerkkiotsikkoUusi
EsimerkkiotsikkoUusi
EsimerkkiotsikkoUusi
<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 lukumää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>
Kontekstimuunnelmia
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>
Tarkoituksen välittäminen avustaville tekniikoille
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-only
luokan mukana piilotettu lisäteksti.
Pilleri merkit
Käytä .badge-pill
muokkausluokkaa saadaksesi merkit pyöristetymmiksi (suuremmalla border-radius
ja 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>
Linkit
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>