Mga badge

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

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.

Pananglitan nga ulohanBag-o nga

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

Mga kausaban sa konteksto

Idugang ang bisan unsa sa nahisgutan sa ubos nga mga klase sa modifier aron usbon ang hitsura sa usa ka badge.

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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

Mga badge sa pildoras

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.

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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

Mga link

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

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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