Badj
Dokimantasyon ak egzanp pou badj, ti konte nou an ak eleman etikèt.
Egzanp yo
Badj yo echèl pou koresponn ak gwosè eleman paran imedya a lè yo itilize gwosè ak em
inite font relatif yo. Apati v5, badj pa gen estil konsantre oswa hover pou lyen ankò.
Tit
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
Egzanp titNouvo
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 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.
Pozisyone
Sèvi ak sèvis piblik pou modifye yon .badge
epi 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 .badge
klas 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-dark
pou manier apwopriye. Sa a se paske sèvis piblik background pa mete anyen men 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>
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-hidden
klas la.
Badj grenn
Sèvi ak .rounded-pill
klas sèvis piblik la pou fè badj pi awondi ak yon pi gwo 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
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;