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

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>

Ebikondo ebiyitibwa Buttons

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

html

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

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>

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

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>

Langi z’emabega

Yayongerwako mu v5.2.0

Teeka a with contrastingbackground-color foreground colorn'abayambi baffe.text-bg-{color} . Emabegako kyali kyetaagisa okugatta mu ngalo ky’olonze .text-{color}n’ebikozesebwa .bg-{color}mu kukola sitayiro, by’okyayinza okukozesa bw’oba oyagala.

Pulayimale Ekyokubiri Okuyita Akabi Okulabula Info Koleeza Ekizikiza

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>

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

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

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, badge kati zikozesa enkyukakyuka za CSS ez’omu kitundu ku .badgefor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

  --#{$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};

Enkyukakyuka za Sass

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