Badge ya ba badges
Mikanda mpe bandakisa mpo na badges, eteni na biso ya moke ya kotánga mpe ya kotya bilembo.
Bandakisa
Badges ezali kosala échelle mpo na kokokana na bonene ya élément moboti ya mbala moko na kosalelaka bonene ya fonte relative mpe em
ba 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
Ndakisa ya motó ya likamboYa sika
Ndakisa ya motó ya likamboYa sika
Ndakisa ya motó ya likamboYa sika
Ndakisa ya motó ya likamboYa sika
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
Badge 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>
Yebá 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 bato básala bongo. 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 ezalela 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 .badge
mpe 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 .badge
classe 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-dark
pona styling ya malamu. Yango ezali mpo ete ba utilitaires ya fond etie eloko te kasi background-color
.
<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-hidden
kelasi.
Ba badges ya ba pilili
Salelá .rounded-pill
kelasi ya utilité mpo na kosala ete badge ezala arrondi mingi na border-radius
.
<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;