Baagi za Baagi

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

Ku muko guno

Eby’okulabirako

Badges zigerageranya okukwatagana n’obunene bw’ekintu eky’omuzadde eky’amangu nga tukozesa obunene bw’empandiika ez’enjawulo ne emyuniti. Okuva ku v5, badge tezikyalina focus oba hover styles for links.

Emitwe

Ekyokulabirako omutwePya

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

Ebikondo ebiyitibwa Buttons

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

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

Eteekeddwa mu kifo

Kozesa ebikozesebwa okukyusa a .badgen’okugiteeka mu nsonda ya link oba button.

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

Osobola n’okukyusa .badgekiraasi n’ebikozesebwa ebirala ebitonotono awatali kubala ku kiraga ekisingawo eky’enjawulo.

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

Langi z’emabega

Kozesa ebika byaffe eby’omugaso eby’emabega okukyusa amangu endabika ya badge. Nsaba omanye nti ng'okozesa Bootstrap's default .bg-light, ojja kwetaaga ekintu ekiyamba langi y'ebiwandiiko nga .text-darkokusobola okukola sitayiro entuufu. Kino kiri bwe kityo kubanga background utilities teziteekawo kintu kyonna wabula background-color.

Pulayimale Ekyokubiri Okuyita Akabi Okulabula Info Koleeza Ekizikiza

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

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

Baagi z’empeke

Kozesa .rounded-pillkiraasi ya utility okukola badge ezisinga okwetooloola nga zirina ennene border-radius.

Pulayimale Ekyokubiri Okuyita Akabi Okulabula Info Koleeza Ekizikiza

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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