Insignia-kuéra rehegua
Kuatia ha techapyrã insignia-pe g̃uarã, ñande componente jepapa ha etiquetado michĩva.
Tembiecharã
Umi insignia escala ombojoaju hag̃ua elemento túva pyaꞌete tuichakue oipurúvo letra tuichakue ha em
unidad relativa. v5 guive, umi insignia ndoguerekovéima estilo enfoque térã hover umi enlace-pe g̃uarã.
Umi Ñe’ẽryru
Tembiecharã rubro reheguaPyahu
Tembiecharã rubro reheguaPyahu
Tembiecharã rubro reheguaPyahu
Tembiecharã rubro reheguaPyahu
Tembiecharã rubro reheguaPyahu
Tembiecharã rubro reheguaPyahu
<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.
<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ĩ .badge
ha emohenda peteĩ enlace térã botón esquina-pe.
<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 .badge
mbo’esyry mbovymive utilidad reheve peteĩ jepapa’ỹre peteĩ techaukaha genéricovévape g̃uarã.
<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-peEmoĩ peteĩ orekóva background-color
primer 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}
<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-hidden
mboꞌepy ndive.
Insignias de pastillas rehegua
Eipuru .rounded-pill
clase utilidad rehegua ejapo hag̃ua umi insignia oñembojereve hag̃ua peteĩ tuichavéva ndive border-radius
.
<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-pePehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi insignia koꞌág̃a oipuru CSS mbaꞌekuaarã local on .badge
oñ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;