Source

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 emunidad relativa.

Tembiecharã rubro rehegua Pyahu
Tembiecharã rubro rehegua Pyahu
Tembiecharã rubro rehegua Pyahu
Tembiecharã rubro rehegua Pyahu
Tembiecharã rubro rehegua Pyahu
Tembiecharã rubro rehegua Pyahu
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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 badge-light">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.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Umi variación contextual rehegua

Emoĩ oimeraẽva umi clase modificador oñemombe’úva iguýpe emoambue hag̃ua peteĩ insignia jehechauka.

Tenondeguáva Mokõiha Ñesẽporã Ñemongyhyje Ñemongyhyje Info Tesakã Pytũ
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 .sr-onlymboꞌepy ndive.

Insignias de pastillas rehegua

Eipuru .badge-pillclase modificador ejapo hag̃ua umi insignia irredondeavéva (peteĩ border-radiushorizontal tuichavéva ha adicional reheve padding). Iporã reperdéramo umi insignia v3-gui.

Tenondeguáva Mokõiha Ñesẽporã Ñemongyhyje Ñemongyhyje Info Tesakã Pytũ
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Oipurúvo umi .badge-*clase contextual peteĩ <a>elemento rehe pyaꞌe omeꞌe insignia accionable orekóva estado hover ha enfoque.

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>