Badj

Dokimantasyon ak egzanp pou badj, ti konte nou an ak eleman etikèt.

Nan paj sa a

Egzanp yo

Badj yo echèl pou koresponn ak gwosè eleman paran imedya a lè yo itilize gwosè ak eminite font relatif yo. Apati v5, badj pa gen estil konsantre oswa hover pou lyen ankò.

Tit

Egzanp titNouvo

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

Bouton

Badj yo ka itilize kòm yon pati nan lyen oswa bouton pou bay yon kontwa.

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

Remake byen ke depann sou fason yo itilize yo, badj yo ka konfizyon pou itilizatè lektè ekran ak teknoloji asistans menm jan an. Pandan ke manier badj yo bay yon siy vizyèl sou objektif yo, itilizatè sa yo pral tou senpleman prezante ak kontni an nan badj la. Tou depan de sitiyasyon an espesifik, badj sa yo ka sanble tankou mo adisyonèl o aza oswa nimewo nan fen yon fraz, lyen, oswa bouton.

Sòf si kontèks la klè (tankou ak egzanp "Notifikasyon yo", kote yo konprann ke "4" a se kantite notifikasyon), konsidere enkli yon kontèks adisyonèl ak yon moso tèks adisyonèl ki kache vizyèlman.

Pozisyone

Sèvi ak sèvis piblik pou modifye yon .badgeepi mete l nan kwen yon lyen oswa 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>

Ou ka ranplase .badgeklas la tou ak kèk sèvis piblik ankò san konte pou yon endikatè ki pi jenerik.

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

Koulè background

Sèvi ak klas itilite background nou yo pou chanje byen vit aparans yon badj. Tanpri sonje ke lè w ap itilize default Bootstrap a .bg-light, ou pral gen anpil chans bezwen yon sèvis piblik koulè tèks tankou .text-darkpou manier apwopriye. Sa a se paske sèvis piblik background pa mete anyen men background-color.

Prensipal Segondè Siksè Danje Avètisman Info Limyè Fè nwa

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

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Badj grenn

Sèvi ak .rounded-pillklas sèvis piblik la pou fè badj pi awondi ak yon pi gwo border-radius.

Prensipal Segondè Siksè Danje Avètisman Info Limyè Fè nwa

<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

Varyab

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