Mga badge

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

Sa pahinang ito

Mga halimbawa

Ang sukat ng mga badge upang tumugma sa laki ng agarang parent na elemento sa pamamagitan ng paggamit ng kaugnay na laki ng font at mga emunit. Simula sa v5, wala nang focus o hover style ang mga badge para sa mga link.

Mga pamagat

Halimbawang pamagatBago

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

Mga Pindutan

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 bg-secondary">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.

Nakaposisyon

Gumamit ng mga utility upang baguhin ang isang .badgeat iposisyon ito sa sulok ng isang link o button.

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

Maaari mo ring palitan ang .badgeklase ng ilan pang mga utility na walang bilang para sa mas generic na indicator.

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

Mga kulay ng background

Gamitin ang aming mga background utility class para mabilis na baguhin ang hitsura ng isang badge. Pakitandaan na kapag ginagamit ang default ng Bootstrap .bg-light, malamang na kailangan mo ng text color utility tulad .text-darkng para sa tamang pag-istilo. Ito ay dahil ang mga kagamitan sa background ay walang itinatakda kundi ang background-color.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

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

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 .visually-hiddenklase.

Mga badge ng tableta

Gamitin ang .rounded-pillutility class para gawing mas bilugan ang mga badge na may mas malaking border-radius.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

<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

Mga variable

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