OHATRA

Ny mari-pamantarana mari-pamantarana hifanaraka amin'ny haben'ny singam-pianakaviana akaiky amin'ny fampiasana ny haben'ny endritsoratra sy emny singa. Hatramin'ny v5, tsy manana fomba fifantohana na hover intsony ny badge ho an'ny rohy.

Lohateny

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

bokotra

Ny mari-pamantarana dia azo ampiasaina ho ampahany amin'ny rohy na bokotra mba hanomezana counter.

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

Mariho fa miankina amin'ny fomba ampiasana azy ireo, ny mari-pamantarana dia mety hampisavoritaka ho an'ny mpampiasa ny mpamaky efijery sy ny teknolojia fanampiana mitovy. Na dia manome famantarana hita maso momba ny tanjon'izy ireo aza ny famolavolan'ny badge, dia haseho tsotra izao ny votoatin'ny badge ireo mpampiasa ireo. Miankina amin'ny toe-javatra manokana, ireo marika ireo dia mety ho toy ny teny na isa fanampiny kisendrasendra eo amin'ny faran'ny fehezanteny, rohy, na bokotra.

Raha tsy mazava ny teny manodidina (toy ny amin'ny ohatra "Fampandrenesana", izay takatra fa ny "4" dia ny isan'ny fampandrenesana), eritrereto ny hampiditra teny manodidina fanampiny miaraka amin'ny lahatsoratra fanampiny miafina hita maso.

napetraka

Mampiasà fitaovana ampiasaina hanovana .badgesy hametrahana azy eo an-joron'ny rohy na bokotra.

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

Azonao atao ihany koa ny manolo ny .badgekilasy amin'ny fitaovana vitsivitsy hafa tsy misy fanisana ho an'ny famantarana mahazatra kokoa.

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

Loko ambadika

Mametraha background-colorsarintany mifanipaka colormiaraka amin'ireo .text-bg-{color}mpanampy anay . Talohan'izay dia ilaina ny mampiaraka amin'ny tananao ny safidinao .text-{color}sy ny .bg-{color}fitaovana ilaina amin'ny famolavolana, izay mbola azonao ampiasaina raha tianao.

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

Pill badge

Ampiasao ny .rounded-pillkilasin'ny utility mba hahatonga ny badge ho boribory kokoa miaraka amin'ny lehibe kokoa border-radius.

<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

hiovaova

Amin'ny maha-ampahany amin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny badge dia mampiasa ny fari-piadidiana CSS eo an -toerana amin'izao fotoana izao .badgemba hanatsarana ny fanamboarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

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