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

html

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

html

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

html

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

html

<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

Lisätty versioon 5.2.0

Aseta background-colorkontrastivärinen etualalla avustajammecolor kanssa . .text-bg-{color}Aikaisemmin vaadittiin manuaalisesti pariliitos valitsemasi .text-{color}ja .bg-{color}muotoilun apuohjelmat, joita voit edelleen käyttää, jos haluat.

Ensisijainen Toissijainen Menestys Vaara Varoitus Tiedot Kevyt Tumma

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-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 .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

html

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

CSS

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa merkit käyttävät nyt paikallisia CSS-muuttujia .badgetehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;