Insignias

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

Kay p'anqapi

Ejemplos

Insigniakuna escalanku chaylla tayta elementopa sayayninwan tupananpaq, relativo letra sayachiywan emunidadkunawan ima. v5 kaqmanta, insigniakuna manaña enfoque utaq hover estilokunayuqchu t'inkikunapaq.

Umakuna

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 .badgechaymanta 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 .badgemana 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-darkallin estilopaq necesitankichá. Kayqa qhipa yanapakuykuna mana imatapas churasqanraykum ichaqa background-color.

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

<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-hiddenclasewan pakasqa.

Insignias de pastillas

Utilidad claseta llamk'achiy .rounded-pillinsigniakunata aswan hatunwan aswan muyurichinaykipaq border-radius.

Qallariq Secundaria Allinmi Manchay Manchachiy Info Kanchi Tutayasqa

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