Tunnusmerkit

Asiakirjat ja esimerkit tunnusmerkeistä, pieni määrä ja merkintäkomponenttimme.

Tällä sivulla

Esimerkkejä

Tunnusmerkit skaalautuvat vastaamaan välittömän yläelementin kokoa käyttämällä suhteellista kirjasinkokoa ja emyksiköitä. V5:stä lähtien merkeissä ei ole enää kohdistus- tai hover-tyylejä linkeissä.

Otsikot

EsimerkkiotsikkoUusi

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Painikkeet

Tunnusmerkkejä voidaan käyttää osana linkkejä tai painikkeita laskurin tarjoamiseen.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">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.

Sijoitettu

Käytä apuohjelmia muokataksesi a .badgeja sijoittaaksesi sen linkin tai painikkeen kulmaan.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Voit myös korvata .badgeluokan muutamalla apuohjelmalla ilman yleisemmän indikaattorin määrää.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Taustavärit

Käytä taustahyödyllisyysluokkiamme muuttaaksesi nopeasti tunnuksen ulkoasua. Huomaa, että kun käytät Bootstrapin oletusasetusta .bg-light, tarvitset todennäköisesti tekstin väriapuohjelman, kuten .text-darkoikeanlaista muotoilua varten. Tämä johtuu siitä, että taustaohjelmat eivät aseta muuta kuin background-color.

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenluokan mukana piilotettu lisäteksti.

Pilleri merkit

Käytä .rounded-pillhyödyllisyysluokkaa saadaksesi merkit pyöristetymmiksi suuremmalla border-radius.

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Muuttujat

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;