Insignias

Documentación chaymanta ejemplokuna insigniakunapaq, huch'uy yupayniyku chaymanta etiquetado componenteyku.

Qatina

Insigniakuna escalanku chaylla tayta elementopa sayayninwan tupananpaq, relativo letra sayachiywan emunidadkunawan ima.

Ejemplo de tituloMusuq

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

Insigniakuna huk yupayta qunapaq t'inkikuna utaq botones kaqpa huknin kaqnin hina llamk'achiy atikun.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Reparay imayna llamk'achisqankumanhina, insigniakuna pantalla ñawiriqkuna chaymanta chayman rikch'akuq yanapakuy tecnologiakuna llamk'aqkunapaq pantasqa kanman. Sichus insigniakuna estilo huk rikuy señalta qun imapaqchus kasqankuta, kay usuariokunaman insigniapa contenidowanlla rikuchisqa kanqa. Ima situacionman hinam, kay insigniakunaqa rikchakunman huk rimaypa, enlacepa utaq botonpa tukukuyninpi huk palabrakuna yapasqa al azar utaq yupaykuna hina.

Manachus contexto sut'i kachkan (imaynachus “Willakuykuna” ejemplo kaqwan, maypichus entiendekun “4” yupay willaykuna kasqan), qhawariy huk contexto yapasqa huk rikuy pakasqa yapasqa qillqawan churayta.

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

Variaciones contextuales nisqa

Mayqintapas uraypi rimasqa tikraq clasekunata yapay huk insignia rikchayninta tikranaykipaq.

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .sr-onlyclasewan pakasqa.

Insignias de pastillas

.badge-pillTikraq claseta llamk'achiy insigniakunata aswan muyuchinapaq (aswan hatun chaymanta border-radiusyapasqa horizontal kaqwan padding). Útil si falta las insignias de v3.

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

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

T'inkikuna

.badge-*Huk elemento kaqpi clasekuna contextual kaqwan llamk'ayqa <a>usqhaylla ruwanapaq insigniakuna hover kaqwan chaymanta enfoque estados kaqwan qun.

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

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