Ženkliukai
Ženklelių, mūsų nedidelio skaičiaus ir ženklinimo komponento, dokumentacija ir pavyzdžiai.
Pavyzdžiai
Ženkliukai keičiasi pagal tiesioginio pirminio elemento dydį, naudojant santykinį šrifto dydį ir em
vienetus. Nuo 5 versijos ženkleliai nebeturi nuorodų fokusavimo ar užvedimo stilių.
Antraštės
Antraštės pavyzdysNauja
Antraštės pavyzdysNauja
Antraštės pavyzdysNauja
Antraštės pavyzdysNauja
Antraštės pavyzdysNauja
Antraštės pavyzdysNauja
<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>
Mygtukai
Ž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 bg-secondary">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.
Padėtas
Naudokite paslaugų programas, kad pakeistumėte a .badge
ir įdėkite jį nuorodos arba mygtuko kampe.
<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>
Taip pat galite pakeisti .badge
klasę dar keliomis komunalinėmis paslaugomis, neskaičiuojant bendresnio rodiklio.
<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>
Fono spalvos
Naudokite mūsų fono paslaugų klases, kad greitai pakeistumėte ženklelio išvaizdą. Atminkite, kad naudojant „Bootstrap“ numatytąjį nustatymą .bg-light
, greičiausiai jums reikės teksto spalvų įrankio, pvz .text-dark
., tinkamam stiliui sukurti. Taip yra todėl, kad foninės paslaugos nenustato nieko kito, išskyrus background-color
.
<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>
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ą .visually-hidden
klasėje.
Tablečių ženkleliai
Naudokite .rounded-pill
naudingumo klasę, kad ženkleliai būtų suapvalinti naudojant didesnį border-radius
.
<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
Kintamieji
$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;