Mga badge

Dokumentasyon ug mga pananglitan alang sa mga badge, among gamay nga ihap ug sangkap sa pag-label.

Niini nga panid

Mga pananglitan

Ang sukod sa mga badge aron motakdo sa gidak-on sa diha-diha nga ginikanan nga elemento pinaagi sa paggamit sa relatibong gidak-on sa font ug emmga yunit. Sa v5, ang mga badge wala nay focus o hover nga mga estilo para sa mga link.

Mga ulohan

Pananglitan nga ulohanBag-o nga

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

Ang mga badge mahimong gamiton isip bahin sa mga link o mga buton aron makahatag og counter.

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

Timan-i nga depende kung giunsa kini paggamit, ang mga badge mahimong makalibog alang sa mga tiggamit sa screen reader ug parehas nga mga teknolohiya sa pagtabang. Samtang ang pag-istilo sa mga badge naghatag usa ka biswal nga cue sa ilang katuyoan, kini nga mga tiggamit ipresentar lamang sa sulud sa badge. Depende sa espesipikong sitwasyon, kini nga mga badge mahimong morag random nga dugang nga mga pulong o numero sa katapusan sa usa ka sentence, link, o button.

Gawas kon klaro ang konteksto (sama sa panig-ingnan sa "Mga Abiso", diin masabtan nga ang "4" mao ang gidaghanon sa mga pahibalo), ikonsiderar ang paglakip sa dugang nga konteksto nga adunay gitago nga biswal nga piraso sa dugang nga teksto.

Nakaposisyon

Gamita ang mga utilities aron usbon ang usa .badgeug ibutang kini sa suok sa usa ka link o buton.

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

Mahimo usab nimo ilisan ang .badgeklase og pipila pa nga mga utilities nga walay ihap alang sa usa ka mas generic nga timailhan.

<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 kolor sa background

Gamita ang among mga klase sa gamit sa background aron dali nga mabag-o ang hitsura sa usa ka badge. Palihug timan-i nga kung gamiton ang default sa Bootstrap .bg-light, lagmit kinahanglan nimo ang usa ka gamit sa kolor sa teksto sama .text-darksa alang sa husto nga pag-istilo. Kini tungod kay ang mga gamit sa background wala magbutang bisan unsa gawas background-colorsa .

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Mga badge sa pildoras

Gamita ang .rounded-pillklase sa utility aron himoong mas lingin ang mga badge nga adunay mas dako nga border-radius.

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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