Daim paib

Cov ntaub ntawv thiab cov piv txwv rau cov paib, peb cov suav me me thiab cov ntawv cim npe.

Ntawm nplooj ntawv no

Piv txwv

Cov paib nplais kom phim qhov loj ntawm cov niam txiv tam sim ntawd los ntawm kev siv cov txheeb ze font loj thiab emchav nyob. Raws li ntawm v5, cov paib tsis muaj qhov tseem ceeb lossis hover styles rau kev sib txuas.

Cov ntsiab lus

Piv txwv lub taub hauTshiab

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

Khawm

Cov paib tuaj yeem siv los ua ib feem ntawm kev sib txuas lossis cov nyees khawm los muab lub txee.

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

Nco ntsoov tias nyob ntawm seb lawv siv li cas, cov paib yuav ua rau tsis meej pem rau cov neeg siv cov ntawv nyeem thiab cov thev naus laus zis zoo sib xws. Thaum lub styling ntawm cov paib muab qhov pom kev pom raws li lawv lub hom phiaj, cov neeg siv no tsuas yog nthuav tawm nrog cov ntsiab lus ntawm cov paib. Nyob ntawm qhov xwm txheej tshwj xeeb, cov paib no yuav zoo li cov lus ntxiv lossis cov lej tom kawg ntawm kab lus, txuas, lossis khawm.

Tshwj tsis yog cov ntsiab lus meej meej (raws li piv txwv "Kev Ceeb Toom", qhov twg nws nkag siab tias "4" yog tus lej ntawm cov ntawv ceeb toom), xav txog suav nrog cov ntsiab lus ntxiv nrog rau qhov pom qhov zais ntawm cov ntawv ntxiv.

Muab tso rau

Siv cov khoom siv los hloov kho .badgethiab muab tso rau hauv lub ces kaum ntawm qhov txuas lossis khawm.

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

Koj tuaj yeem hloov .badgechav kawm nrog ob peb yam khoom siv ntxiv yam tsis muaj kev suav rau qhov ntsuas ntau dua.

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

Cov xim tom qab

Siv peb cov chav kawm siv hluav taws xob hauv qab no kom hloov pauv sai sai ntawm daim paib. Thov nco ntsoov tias thaum siv Bootstrap lub neej ntawd .bg-light, koj yuav xav tau cov ntawv xim xim zoo li .text-darkrau kev tsim kom zoo. Qhov no yog vim cov cuab yeej siv tom qab tsis teeb dab tsi tab sis background-color.

Thawj Secondary Kev vam meej Kev phom sij Ceeb toom Cov ntaub ntawv Teeb Tsaus

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

Qhia lub ntsiab lus rau kev pab technologies

Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hiddenchav kawm.

Cov ntawv cim npe

Siv cov .rounded-pillchav kawm siv hluav taws xob los ua cov paib sib npaug nrog qhov loj dua border-radius.

Thawj Secondary Kev vam meej Kev phom sij Ceeb toom Cov ntaub ntawv Teeb Tsaus

<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

Hloov pauv

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