Badges

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

Amin'ity pejy ity

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

Lohateny ohatraVaovao

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

Ampiasao ny kilasin'ny fampiasa any aoriana mba hanovana haingana ny endriky ny marika. Azafady mariho fa rehefa mampiasa ny default an'ny Bootstrap .bg-lightianao dia mety mila fitaovana miloko lahatsoratra toy .text-darkny famolavolana mety. Izany dia satria tsy mametraka na inona na inona afa -tsy background-color.

Kilonga faharoa FETY Loza FAMPITANDREMANA Info fahazavana Maizina

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

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 .visually-hiddenkilasy.

Pill badge

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

Kilonga faharoa FETY Loza FAMPITANDREMANA Info fahazavana Maizina

<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

hiovaova

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