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 em
inite font relatif yo.
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
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.
<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-only
klas la.
Badj grenn
Sèvi ak .badge-pill
klas modifye a pou fè badj yo plis awondi (ak yon border-radius
orizontal ki pi gwo ak adisyonèl padding
). Itil si ou rate badj ki soti nan v3.
<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.
<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>