Source

Baagi za Baagi

Ebiwandiiko n'ebyokulabirako bya badge, ekitundu kyaffe ekitono eky'okubala n'okuwandiika.

Eky'okulabirako

Badges zigerageranya okukwatagana n’obunene bw’ekintu eky’omuzadde eky’amangu nga tukozesa obunene bw’empandiika ez’enjawulo ne emyuniti.

Ekyokulabirako omutwe Pya
Ekyokulabirako omutwe Pya
Ekyokulabirako omutwe Pya
Ekyokulabirako omutwe Pya
Ekyokulabirako omutwe Pya
Ekyokulabirako omutwe Pya
<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>

Badge osobola okuzikozesa ng’ekitundu ku links oba buttons okuwa counter.

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

Weetegereze nti okusinziira ku ngeri gye zikozesebwamu, baagi ziyinza okutabula abakozesa ebisoma ku ssirini ne tekinologiya ow’engeri eyo ayamba. Wadde nga okukola sitayiro ya badge ekuwa ekifaananyi ekiraga ekigendererwa kyazo, abakozesa bano bajja kumala kwanjulwa ebirimu mu badge. Okusinziira ku mbeera entongole, baagi zino ziyinza okulabika ng’ebigambo oba ennamba ez’enjawulo ezitali za bulijjo ku nkomerero ya sentensi, enkolagana oba bbaatuuni.

Okuggyako ng’ensonga etegeerekeka bulungi (nga bwe kiri ku kyokulabirako kya “Ebimanyisibwa”, we kitegeerekese nti “4” gwe muwendo gw’ebimanyisibwa), lowooza ku kussaamu ensonga endala n’ekitundu ky’ekiwandiiko eky’okwongerako ekikwekeddwa mu maaso.

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

Enjawulo mu mbeera

Okwongerako ekimu ku bino wammanga ebyogeddwako modifier classes okukyusa endabika ya badge.

Pulayimale Ekyokubiri Okuyita Akabi Okulabula Info Koleeza Ekizikiza
<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>
Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-onlykiraasi.

Baagi z’empeke

Kozesa ekibiina .badge-pillky’omukyusa okukola badge ezisinga okwetooloola (nga zirina ekinene border-radiusera eky’okwebungulula eky’okwongerako padding). Eky'omugaso singa osubwa badge okuva mu v3.

Pulayimale Ekyokubiri Okuyita Akabi Okulabula Info Koleeza Ekizikiza
<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>

Okukozesa .badge-*ebika by’ensonga ku <a>elementi kyangu okuwa badge ezisobola okukolebwa nga zirina hover ne focus states.

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