Badge ya ba badges

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

Ndakisa

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

Ndakisa ya motó ya likamboYa sika

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

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 badge-light">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.

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

Bokeseni ya makambo oyo ezali na kati

Bakisa moko ya ba classes ya modificateur oyo tolobeli awa na se mpo na kobongola ndenge badge ezali komonana.

Ya liboso Ebongiseli ya mibale Kolonga Likama Likebisi Info Pole Molili

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

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 .sr-onlykelasi.

Ba badges ya ba pilili

Salelá .badge-pillkelasi ya modificateur mpo na kosala ete ba badges ezala arrondi mingi (na border-radiushorizontal ya monene mpe ya kobakisa padding). Utile soki ozangi ba badges oyo ewutaka na v3.

Ya liboso Ebongiseli ya mibale Kolonga Likama Likebisi Info Pole Molili

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

Ba liens

.badge-*Kosalela ba classes contextuelles na <a>élément moko epesaka noki ba badges actionnables na ba états hover na focus.

Ya liboso Ebongiseli ya mibale Kolonga Likama Likebisi Info Pole Molili

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