Ženkliukai

Ženklelių, mūsų nedidelio skaičiaus ir ženklinimo komponento, dokumentacija ir pavyzdžiai.

Pavyzdys

Ženklelių mastelis atitinka tiesioginio pirminio elemento dydį, naudojant santykinį šrifto dydį ir emvienetus.

Antraštės pavyzdysNauja

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

Ženkliukai gali būti naudojami kaip nuorodų arba mygtukų dalis, kad būtų pateiktas skaitiklis.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Atminkite, kad atsižvelgiant į tai, kaip jie naudojami, ženkleliai gali suklaidinti ekrano skaitytuvų ir panašių pagalbinių technologijų naudotojus. Nors ženklelių stilius suteikia vaizdinį užuominą apie jų paskirtį, šiems vartotojams tiesiog bus pateiktas ženklelio turinys. Atsižvelgiant į konkrečią situaciją, šie ženkleliai gali atrodyti kaip atsitiktiniai papildomi žodžiai ar skaičiai sakinio, nuorodos ar mygtuko pabaigoje.

Jei kontekstas nėra aiškus (kaip „Pranešimų“ pavyzdyje, kai suprantama, kad „4“ yra pranešimų skaičius), apsvarstykite galimybę įtraukti papildomą kontekstą su vizualiai paslėpta papildomo teksto dalimi.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstinės variacijos

Pridėkite bet kurią iš toliau nurodytų modifikatorių klasių, kad pakeistumėte ženklelio išvaizdą.

Pirminis Antrinis Sėkmė Pavojus Įspėjimas Informacija Šviesa Tamsus

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.

Tablečių ženkleliai

Naudokite .badge-pillmodifikavimo klasę, kad ženkleliai būtų labiau suapvalinti (su didesniu border-radiusir papildomu horizontaliu padding). Naudinga, jei pasigendate ženklelių iš v3.

Pirminis Antrinis Sėkmė Pavojus Įspėjimas Informacija Šviesa Tamsus

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

Nuorodos

Naudojant elemento kontekstines .badge-*klases <a>greitai gaunami veiksmingi ženkleliai su užvedimo ir fokusavimo būsenomis.

Pirminis Antrinis Sėkmė Pavojus Įspėjimas Informacija Šviesa Tamsus

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