Badj

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

Egzanp

Badj yo echèl pou koresponn ak gwosè eleman paran imedya a lè yo itilize gwosè ak eminite font relatif yo.

Egzanp titNouvo

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

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 badge-light">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 oswa nimewo o aza 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.

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

Varyasyon kontèks

Ajoute nenpòt nan klas modifye yo mansyone anba a pou chanje aparans yon badj.

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

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

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 .sr-onlyklas la.

Badj grenn

Sèvi ak .badge-pillklas modifye a pou fè badj yo plis awondi (ak yon border-radiusorizontal ki pi gwo ak adisyonèl padding). Itil si ou rate badj ki soti nan v3.

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

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

Lyen

Sèvi ak klas kontèks .badge-*yo sou yon <a>eleman byen vit bay badj aksyon ak eta hover ak konsantre.

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

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