Mga badge
Dokumentasyon at mga halimbawa para sa mga badge, ang aming maliit na bilang at bahagi ng pag-label.
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 em
unit. Simula sa v5, wala nang focus o hover style ang mga badge para sa mga link.
Mga pamagat
Halimbawang pamagatBago
Halimbawang pamagatBago
Halimbawang pamagatBago
Halimbawang pamagatBago
Halimbawang pamagatBago
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 .badge
at 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 .badge
klase 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-dark
ng para sa tamang pag-istilo. Ito ay dahil ang mga kagamitan sa background ay walang itinatakda kundi ang 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>
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-hidden
klase.
Mga badge ng tableta
Gamitin ang .rounded-pill
utility class para gawing mas bilugan ang mga badge na may mas malaking 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
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;