Mga badge
Dokumentasyon ug mga pananglitan alang sa mga badge, among gamay nga ihap ug sangkap sa pag-label.
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.
<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>Ang mga badge mahimong gamiton isip kabahin sa mga link o mga buton aron makahatag og counter.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">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 makita nga piraso sa dugang nga teksto.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Idugang ang bisan unsa sa nahisgutan sa ubos nga mga klase sa modifier aron usbon ang hitsura sa usa ka badge.
<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>Paghatag kahulogan sa mga teknolohiya sa pagtabang
Ang paggamit og kolor aron makadugang og kahulogan naghatag lang 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 klaro gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.
Gamita ang .badge-pillklase sa modifier aron himoong mas lingin ang mga badge (nga adunay mas dako border-radiusug dugang nga pinahigda padding). Mapuslanon kung gimingaw nimo ang mga badge gikan sa v3.
<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>.badge-*Ang paggamit sa mga klase sa konteksto sa usa ka <a>elemento dali nga naghatag mga aksyon nga badge nga adunay hover ug focus nga estado.
<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>