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

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>

Ba boutons

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

html

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

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>

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

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>

Ba couleurs ya fond

Ebakisami na v5.2.0

Set a background-colorna contrasting foreground colorna basungi na biso.text-bg-{color} . Liboso esengelaki kosala pair manuellement oyo oponi .text-{color}mpe .bg-{color}ba utilitaires mpo na styling, oyo okoki kaka kosalela soki olingi.

Ya liboso Secondaire Kolonga Likama Likebisi Info Pole Molili

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>

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

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

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba badges esalela sikoyo ba variables CSS locales na .badgepona personnalisation en temps réel améliorée. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables ya 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;