Mga badge

Dokumentasyon at mga halimbawa para sa mga badge, ang aming maliit na bilang at bahagi ng pag-label.

Halimbawa

Mga sukat ng badge upang tumugma sa laki ng agarang parent na elemento sa pamamagitan ng paggamit ng kaugnay na laki ng font at mga emunit.

Halimbawang pamagatBago

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

Maaaring gamitin ang mga badge bilang bahagi ng mga link o mga button para magbigay ng counter.

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

Tandaan na depende sa kung paano ginagamit ang mga ito, maaaring nakakalito ang mga badge para sa mga user ng mga screen reader at katulad na mga teknolohiyang pantulong. Bagama't ang pag-istilo ng mga badge ay nagbibigay ng visual na cue sa kanilang layunin, ang mga user na ito ay ipapakita lamang sa nilalaman ng badge. Depende sa partikular na sitwasyon, ang mga badge na ito ay maaaring mukhang random na karagdagang mga salita o numero sa dulo ng isang pangungusap, link, o button.

Maliban kung malinaw ang konteksto (tulad ng halimbawa ng "Mga Notification," kung saan nauunawaan na ang "4" ay ang bilang ng mga notification), isaalang-alang ang pagsasama ng karagdagang konteksto na may nakikitang nakatagong piraso ng karagdagang teksto.

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

Mga pagkakaiba-iba sa konteksto

Magdagdag ng alinman sa nabanggit na mga klase ng modifier sa ibaba upang baguhin ang hitsura ng isang badge.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

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

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.

Mga badge ng tableta

Gamitin ang .badge-pillklase ng modifier para gawing mas bilugan ang mga badge (na may mas malaki border-radiusat karagdagang pahalang padding). Kapaki-pakinabang kung makaligtaan mo ang mga badge mula sa v3.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

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

Mga link

Ang paggamit ng mga contextual .badge-*class sa isang <a>elemento ay mabilis na nagbibigay ng mga naaaksyunan na badge na may hover at focus states.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

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