Source

Badges

Documentation sy ohatra momba ny badge, ny isa kely ary ny singa fametahana.

OHATRA

Ny mari-pamantarana mari-pamantarana hifanaraka amin'ny haben'ny singam-pianakaviana akaiky amin'ny fampiasana ny haben'ny endritsoratra sy emny singa.

Lohateny ohatra Vaovao
Lohateny ohatra Vaovao
Lohateny ohatra Vaovao
Lohateny ohatra Vaovao
Lohateny ohatra Vaovao
Lohateny ohatra Vaovao
<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>

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

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

Variations contextual

Ampio ny iray amin'ireo kilasy modifier voalaza etsy ambany mba hanovana ny endriky ny badge.

Kilonga faharoa FETY Loza FAMPITANDREMANA Info fahazavana Maizina
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

Pill badge

Ampiasao ny .badge-pillkilasy modifier mba hahatonga ny badge ho boribory kokoa (miaraka amin'ny border-radiusmarindrano lehibe kokoa sy fanampiny padding). Mahasoa raha tsy mahita ireo marika avy amin'ny v3.

Kilonga faharoa FETY Loza FAMPITANDREMANA Info fahazavana Maizina
<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>

.badge-*Ny fampiasana ny kilasin'ny contextual amin'ny <a>singa iray dia manome badge azo atao haingana miaraka amin'ny fanjakana hover sy fifantohana.

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