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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

Idinagdag sa v5.2.0

Magtakda ng isang background-colormay contrasting foreground colorsa aming .text-bg-{color}mga katulong . Noong nakaraan, kinakailangan na manu-manong ipares ang iyong pinili .text-{color}at mga .bg-{color}kagamitan para sa pag-istilo, na maaari mo pa ring gamitin kung gusto mo.

Pangunahin Pangalawa Tagumpay Panganib Babala Impormasyon Liwanag Madilim

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga badge ang mga lokal na variable ng CSS .badgepara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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