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

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

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

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

<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

Gwiritsani ntchito makalasi athu azothandizira zakumbuyo kuti musinthe mawonekedwe a baji mwachangu. Chonde dziwani kuti mukamagwiritsa ntchito zokhazikika za Bootstrap .bg-light, mungafunike mawonekedwe amtundu wamawu ngati .text-darkmasitayilo oyenera. Izi ndichifukwa choti zida zakumbuyo sizimayika chilichonse koma background-color.

Pulayimale Sekondale Kupambana Ngozi Chenjezo Zambiri Kuwala Chakuda

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

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

<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

Zosintha

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