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 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
Eipuru ore clase utilidad fondo rehegua emoambue pyaꞌe hag̃ua peteĩ insignia jehechauka. Eñatendéke eipuru jave Bootstrap ñepyrũrã .bg-light
, oiméne reikotevẽta peteĩ utilidad jehaipyre sa’y rehegua ha’eháicha .text-dark
estilo hekopete g̃uarã. Péva ojehu umi utilidad fondo rehegua nomohendapáigui mba’eve ha katu background-color
.
<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>
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 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 rehegua
Variables rehegua
$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;