Mabaji

Zolemba ndi zitsanzo za mabaji, gawo lathu laling'ono ndi gawo la zilembo.

Patsamba ili

Zitsanzo

Mabaji amakula kuti agwirizane ndi kukula kwa chinthu chapanthawiyo pogwiritsira ntchito masingidwe amitundu ndi emmayunitsi. Pofika pa v5, mabaji sakhalanso ndi masitaelo olunjika kapena osunthika pamalumikizidwe.

Mitu

Chitsanzo mutuChatsopano

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>

Mabatani

Mabaji atha kugwiritsidwa ntchito ngati gawo la maulalo kapena mabatani kuti mupereke kauntala.

html

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

Zindikirani kuti kutengera momwe amagwiritsidwira ntchito, mabaji akhoza kukhala osokoneza kwa ogwiritsa ntchito zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngakhale masitaelo a mabaji amapereka chithunzithunzi cha cholinga chawo, ogwiritsa ntchitowa amangowonetsedwa zomwe zili mu bajiyo. Kutengera ndi momwe zinthu zilili, mabajiwa amatha kuwoneka ngati mawu owonjezera kapena manambala kumapeto kwa chiganizo, ulalo, kapena batani.

Pokhapokha ngati nkhaniyo ili yomveka bwino (monga chitsanzo cha "Zidziwitso", pomwe zimamveka kuti "4" ndi kuchuluka kwa zidziwitso), ganizirani kuphatikiza mawu owonjezera okhala ndi gawo lobisika la mawu owonjezera.

Woikidwa

Gwiritsani ntchito zofunikira kuti musinthe a .badgendikuyiyika pakona ya ulalo kapena batani.

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>

Mutha kusinthanso .badgekalasiyo ndi zida zina zingapo popanda kuwerengera chizindikiro cha generic.

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>

Mitundu yakumbuyo

Yowonjezedwa mu v5.2.0

Khazikitsani background-colorkutsogolo kosiyanitsa colorndi othandizira athu.text-bg-{color} . M'mbuyomu zinkafunika kuti muphatikize pamanja zomwe mwasankha .text-{color}ndi zida .bg-{color}zopangira makongoletsedwe, zomwe mutha kugwiritsabe ntchito ngati mukufuna.

Pulayimale Sekondale Kupambana Ngozi Chenjezo Zambiri Kuwala Chakuda

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>

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Mabaji a mapiritsi

Gwiritsani .rounded-pillntchito gulu lothandizira kuti mupange mabaji ozungulira kwambiri ndi okulirapo border-radius.

Pulayimale Sekondale Kupambana Ngozi Chenjezo Zambiri Kuwala Chakuda

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

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, mabaji tsopano akugwiritsa ntchito zosintha za CSS zakumaloko .badgekuti apititse patsogolo makonda a nthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

  --#{$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};

Zosintha za Sass

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