Insignias

Documentación chaymanta ejemplokuna insigniakunapaq, huch'uy yupayniyku chaymanta etiquetado componenteyku.

Kay p'anqapi

Ejemplos

Insigniakuna escalanku chaylla tayta elementopa sayayninwan tupananpaq, relativo letra sayachiywan emunidadkunawan ima. v5 kaqmanta, insigniakuna manaña enfoque utaq hover estilokunayuqchu t'inkikunapaq.

Umakuna

Ejemplo de tituloMusuq

html nisqapi

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

Botones

Insigniakuna huk yupayta qunapaq t'inkikuna utaq botones kaqpa huknin kaqnin hina llamk'achiy atikun.

html nisqapi

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

Reparay imayna llamk'achisqankumanhina, insigniakuna pantalla ñawiriqkuna chaymanta chayman rikch'akuq yanapakuy tecnologiakuna llamk'aqkunapaq pantasqa kanman. Sichus insigniakuna estilo huk rikuy señalta qun imapaqchus kasqankuta, kay usuariokunaman insigniapa contenidowanlla rikuchisqa kanqa. Ima situacionman hinam, kay insigniakunaqa rikchakunman huk rimaypa, enlacepa utaq botonpa tukukuyninpi huk palabrakuna yapasqa al azar utaq yupaykuna hina.

Manachus contexto sut'i kachkan (imaynachus “Willakuykuna” ejemplo kaqwan, maypichus entiendekun “4” yupay willaykuna kasqan), qhawariy huk contexto yapasqa huk rikuy pakasqa yapasqa qillqawan churayta.

Posicionasqa

Utilidades llamk'achiy huk tikranaykipaq .badgechaymanta huk t'inki utaq botón k'uchupi churay.

html nisqapi

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

Hinallataq, claseta huk pisi aswan yanapakuykunawan tikrayta atikunki .badgemana yupayniyuq aswan genérico rikuchiqpaq.

html nisqapi

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

Colores de fondo

v5.2.0 nisqapi yapasqa

Yanapakuqniykuwan huk background-colorcontrastante ñawpaqcolor planowan churay . Ñawpaqqa makiwan tupachiy akllasqaykimanta chaymanta utilidadkuna estilopaq, mayqinkunatachus kunankamapas llamk'achiy atikunki sichus munanki..text-bg-{color}.text-{color}.bg-{color}

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

html nisqapi

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

Yanapakuq tecnologiakunaman significadota apachiy

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;