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

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 butones

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

html

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

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>

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

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

Gidugang sa v5.2.0

Pagbutang og usa background-colornga adunay kalainan sa atubangan colorsa among mga .text-bg-{color}katabang . Kaniadto gikinahanglan nga mano-mano nga ipares ang imong gipili .text-{color}ug mga .bg-{color}gamit alang sa pag-istilo, nga mahimo nimong gamiton kung gusto nimo.

Primary Ikaduha Kalampusan Kuyaw Pasidaan Impormasyon Kahayag Ngitngit

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>

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

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

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga badges karon naggamit sa lokal nga CSS variables .badgealang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$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 variables

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