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 emyksiköitä.

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.

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

<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-onlyluokan mukana piilotettu lisäteksti.

Pilleri merkit

Käytä .badge-pillmuokkausluokkaa saadaksesi merkit pyöristetymmiksi (suuremmalla border-radiusja ylimääräisellä vaakasuuntaisella padding). Hyödyllinen, jos unohdat v3:n merkit.

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

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

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

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