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 ntsuas kom phim qhov loj ntawm cov niam txiv tam sim ntawd los ntawm kev siv cov txheeb ze font qhov loj me 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

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>

Khawm

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

html

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

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>

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

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>

Cov xim tom qab

Ntxiv hauv v5.2.0

Teem ib background-colorqhov sib piv rau pem hauv ntej colornrog peb cov .text-bg-{color}pab . Yav dhau los nws yuav tsum tau manually khub koj xaiv .text-{color}thiab .bg-{color}cov khoom siv rau styling, uas koj tseem siv tau yog tias koj nyiam.

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

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>

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

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

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov hloov pauv CSS hloov pauv mus kom ze, cov paib tam sim no siv cov CSS hauv zos .badgerau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

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