SourceInsignias
Documentación chaymanta ejemplokuna insigniakunapaq, huch'uy yupayniyku chaymanta etiquetado componenteyku.
Insigniakuna escalanku chaylla tayta elementopa sayayninwan tupananpaq, relativo letra sayachiywan em
unidadkunawan ima.
Ejemplo de titulo
Musuq
Ejemplo de titulo
Musuq
Ejemplo de titulo
Musuq
Ejemplo de titulo
Musuq
Ejemplo de titulo
Musuq
Ejemplo de titulo
Musuq
Copia
<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.
Willakuykuna4.
Copia
<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.
Runapa kaynin9. 9.1 mana ñawinchasqa willakuykunata
Copia
<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
Copia
<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-only
clasewan pakasqa.
.badge-pill
Tikraq claseta llamk'achiy insigniakunata aswan muyuchinapaq (aswan hatun chaymanta border-radius
yapasqa horizontal kaqwan padding
). Útil si falta las insignias de v3.
Qallariq
Secundaria
Allinmi
Manchay
Manchachiy
Info
Kanchi
Tutayasqa
Copia
<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>
.badge-*
Huk elemento kaqpi clasekuna contextual kaqwan llamk'ayqa <a>
usqhaylla ruwanapaq insigniakuna hover kaqwan chaymanta enfoque estados kaqwan qun.
Copia
<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>