Insignias
Documentación chaymanta ejemplokuna insigniakunapaq, huch'uy yupayniyku chaymanta etiquetado componenteyku.
Ejemplos
Insigniakuna escalanku chaylla tayta elementopa sayayninwan tupananpaq, relativo letra sayachiywan em
unidadkunawan ima. v5 kaqmanta, insigniakuna manaña enfoque utaq hover estilokunayuqchu t'inkikunapaq.
Umakuna
Ejemplo de tituloMusuq
Ejemplo de tituloMusuq
Ejemplo de tituloMusuq
Ejemplo de tituloMusuq
Ejemplo de tituloMusuq
Ejemplo de tituloMusuq
<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>
Botones
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 bg-secondary">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.
Posicionasqa
Utilidades llamk'achiy huk tikranaykipaq .badge
chaymanta huk t'inki utaq botón k'uchupi churay.
<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>
Hinallataq, claseta huk pisi aswan yanapakuykunawan tikrayta atikunki .badge
mana yupayniyuq aswan genérico rikuchiqpaq.
<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>
Colores de fondo
Qhipa yanapakuy claseykuta llamk'achiy huk insignia rikch'ayninta usqhaylla tikranaykipaq. Ama hina kaspa, Bootstrap ñawpaqmanta churasqa llamk'achkaspa .bg-light
, huk qillqa llimp'i yanapakuy hina .text-dark
allin estilopaq necesitankichá. Kayqa qhipa yanapakuykuna mana imatapas churasqanraykum ichaqa 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>
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 .visually-hidden
clasewan pakasqa.
Insignias de pastillas
Utilidad claseta llamk'achiy .rounded-pill
insigniakunata aswan hatunwan aswan muyurichinaykipaq 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
Variables nisqakuna
$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;