Badge ya badge

Mikanda mpe bandakisa mpo na badges, eteni na biso ya moke ya kotánga mpe ya kotya bilembo.

Na lokasa oyo

Bandakisa

Badges ezali kosala échelle mpo na kokokana na bonene ya élément moboti ya mbala moko na kosalelaka bonene ya fonte relative mpe emba unité. Kobanda na v5, ba badges ezalaka lisusu na ba styles ya focus to ya hover te pona ba liens.

Mitó ya makambo

Ndakisa ya motó ya likamboYa sika

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

Ba boutons

Ba badges ekoki kosalelama lokola eteni ya ba liens to ba boutons mpo na kopesa compteur.

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

Simbá ete na kotalela ndenge oyo basalelaka yango, badge ekoki kobulunganisa bato oyo basalelaka batángi ya écran mpe mayele mosusu ya ndenge wana oyo esalisaka bango. Atako lolenge ya kosala badge epesaka elembo ya komona mpo na koyeba ntina na yango, basaleli yango bakopesa bango kaka makambo oyo ezali na elembo yango. Na kotalela likambo ya sikisiki, bilembo yango ekoki komonana lokola maloba to mituya oyo ebakisami na mbalakaka na nsuka ya fraze, lien to bouton.

Longola se soki contexte ezali polele (lokola na ndakisa ya “Mayebisi”, esika oyo esosolami ete “4” ezali motango ya mayebisi), kanisá kokɔtisa contexte ya kobakisa na eteni ya makomi ya kobakisa oyo ebombami na miso.

Ezali na esika ya kofanda

Salelá ba utilitaires mpo na kobongisa a .badgempe kotya yango na coin ya lien to bouton.

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

Okoki pe ko remplacer .badgeclasse na mua ba utilitaires mosusu sans compte pona indicateur plus générique.

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

Ba couleurs ya fond

Salelá bakelasi na biso ya utilité ya nsima mpo na kobongola nokinoki ndenge oyo badge ezali komonana. Svp yeba que tango ozali kosalela Bootstrap's default .bg-light, okozala mbala mosusu na besoin ya utilitaire ya couleur ya texte lokola .text-darkpona styling ya malamu. Yango ezali mpo ete ba utilitaires ya fond etie eloko te kasi background-color.

Ya liboso Secondaire Kolonga Likama Likebisi Info Pole Molili

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

Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Ba badges ya ba pilili

Salelá .rounded-pillkelasi ya utilité mpo na kosala ete badge ezala arrondi mingi na border-radius.

Ya liboso Secondaire Kolonga Likama Likebisi Info Pole Molili

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

Ba variables oyo ezali

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