Insignia-kuéra rehegua

Kuatia ha techapyrã insignia-pe g̃uarã, ñande componente jepapa ha etiquetado michĩva.

Ko páhinape

Tembiecharã

Umi insignia escala ombojoaju hag̃ua elemento túva pyaꞌete tuichakue oipurúvo letra tuichakue ha emunidad relativa. v5 guive, umi insignia ndoguerekovéima estilo enfoque térã hover umi enlace-pe g̃uarã.

Umi Ñe’ẽryru

Tembiecharã rubro reheguaPyahu

html rehegua

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

Umi botón rehegua

Umi insignia ikatu ojeporu enlace térã botón pehẽngue ramo omeꞌe hag̃ua peteĩ contador.

html rehegua

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

Ñañamindu’u mba’éichapa ojepuru, umi insignia ikatu ombojoavy umi oipurúvape umi lector de pantalla ha umi tecnología oipytyvõva ojoguáva. Pe estilo insignia rehegua ome’ẽramo jepe peteĩ señal visual mba’épa hembipotápe, ko’ã usuario-pe oñepresentáta simplemente pe contenido orekóva pe insignia. Odepende pe situación específica rehe, ko’ã insignia ikatu ha’ete ñe’ẽ térã número adicional aleatorio peteĩ frase, enlace térã botón pahápe.

Ndaipóriramo hesakã porãva contexto (“Marandu” techapyrãmeguáicha, oñentendehápe “4” ha’eha mboy momarandupa), ehecha emoinge contexto adicional peteĩ jehaipyre adicional pehẽngue kañymby ojehecháva reheve.

Oñemohenda

Eipuru umi utilidad emoambue hag̃ua peteĩ .badgeha emohenda peteĩ enlace térã botón esquina-pe.

html rehegua

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

Ikatu avei emyengovia .badgembo’esyry mbovymive utilidad reheve peteĩ jepapa’ỹre peteĩ techaukaha genéricovévape g̃uarã.

html rehegua

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

Umi colores de fondo rehegua

Oñemoĩve v5.2.0-pe

Emoĩ peteĩ orekóva background-colorprimer plano contrastante ore pytyvõhára kuéra ndive . Ymave oñeikotevẽkuri oñembojoaju manualmente nde reiporavóva ha umi utilidad estilo-pe g̃uarã, ikatúva gueteri reipuru reipotáramo.color.text-bg-{color}.text-{color}.bg-{color}

Tenondeguáva Mokõiha Ñesẽporã Ñemongyhyje Ñemongyhyje Info Tesakã Pytũ

html rehegua

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

Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hiddenmboꞌepy ndive.

Insignias de pastillas rehegua

Eipuru .rounded-pillclase utilidad rehegua ejapo hag̃ua umi insignia oñembojereve hag̃ua peteĩ tuichavéva ndive border-radius.

Tenondeguáva Mokõiha Ñesẽporã Ñemongyhyje Ñemongyhyje Info Tesakã Pytũ

html rehegua

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

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi insignia koꞌág̃a oipuru CSS mbaꞌekuaarã local on .badgeoñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$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 mba’ekuaarã

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