Daim paib

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

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.

Piv txwv lub taub hauTshiab

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

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 badge-light">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.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Cov ntsiab lus variations

Ntxiv ib qho ntawm cov chav kawm hloov kho hauv qab no los hloov qhov tsos ntawm daim paib.

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

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

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 .sr-onlychav kawm.

Cov ntawv cim npe

Siv cov .badge-pillchav kawm hloov kho kom ua cov paib sib npaug (nrog rau qhov loj dua border-radiusthiab kab rov tav ntxiv padding). Pab tau yog tias koj nco cov paib ntawm v3.

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

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

Txuas

Kev siv cov ntsiab lus ntawm cov .badge-*chav kawm ntawm ib <a>lub ntsiab lus sai sai muab cov paib ua tau zoo nrog hover thiab tsom xam.

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

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