Badj

Dokimantasyon ak egzanp pou badj, ti konte nou an ak eleman etikèt.

Nan paj sa a

Egzanp yo

Badj yo echèl pou koresponn ak gwosè eleman paran imedya a lè yo itilize gwosè ak eminite font relatif yo. Apati v5, badj pa gen estil konsantre oswa hover pou lyen ankò.

Tit

Egzanp titNouvo

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>

Bouton

Badj yo ka itilize kòm yon pati nan lyen oswa bouton pou bay yon kontwa.

html

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

Remake byen ke depann sou fason yo itilize yo, badj yo ka konfizyon pou itilizatè lektè ekran ak teknoloji asistans menm jan an. Pandan ke manier badj yo bay yon siy vizyèl sou objektif yo, itilizatè sa yo pral tou senpleman prezante ak kontni an nan badj la. Tou depan de sitiyasyon an espesifik, badj sa yo ka sanble tankou mo oswa nimewo o aza nan fen yon fraz, lyen, oswa bouton.

Sòf si kontèks la klè (tankou ak egzanp "Notifikasyon yo", kote yo konprann ke "4" a se kantite notifikasyon), konsidere enkli yon kontèks adisyonèl ak yon moso tèks adisyonèl ki kache vizyèlman.

Pozisyone

Sèvi ak sèvis piblik pou modifye yon .badgeepi mete l nan kwen yon lyen oswa bouton.

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>

Ou ka ranplase .badgeklas la tou ak kèk sèvis piblik ankò san konte pou yon endikatè ki pi jenerik.

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>

Koulè background

Te ajoute nan v5.2.0

Mete yon background-colorak premye plan kontras colorak moun k ap ede nou.text-bg-{color} yo . Précédemment, li te oblije manyèlman pè chwa ou nan .text-{color}ak .bg-{color}sèvis piblik pou manier, ki ou toujou ka itilize si ou prefere.

Prensipal Segondè Siksè Danje Avètisman Info Limyè Fè nwa

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>

Transmèt siyifikasyon nan teknoloji asistans

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark

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

Variables

Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on .badge for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

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