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

<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ĩ .badgeha 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 .badgembo’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-darkestilo hekopete g̃uarã. Péva ojehu umi utilidad fondo rehegua nomohendapáigui mba’eve ha katu background-color.

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

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

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