Colores
color
Huk makilla color utilidad clasekunawan significadota apachiy . Yanapakuy estilo t'inkikuna hover estadokunawan, chaymanta.
Colores
Qillqasqa llimp’i yanapakuykunawan llimp’iy. Sichus t'inkikunata llimp'iyta munanki, .link-*
yanapakuq clasekunata llamk'achiy atikunki mayqinkunachus kanku :hover
chaymanta :focus
estadokuna.
.qillqa-primaria
.texto-iskay kaq
.texto-allin ruway
.texto-peligro
.qillqa-willakuy
.qillqa-willakuy
.qillqa-k’anchay
.texto-tutayaq
.texto-cuerpo
.qillqawan upallachisqa
.qillqa-yuraq
.qillqa-yana-50
.qillqa-yuraq-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
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.
Especificidad nisqa
Wakin kutiqa huk akllaqpa especificidadninraykum mana clase contextual nisqakuna churakunmanchu. Wakin kutikunapi, huk suficiente llamkanaqa elementoykipa contenidonta huk <div>
utaq aswan elemento semántico kaqpi munasqa clasewan p'istuymi.
Sass
Kay qatiq Sass ruwanakunamanta yapasqa, qhaway ñawiriyta ñuqaykumanta churasqa CSS sapanchasqa propiedades kaqmanta (aka CSS tikraqkuna) llimp'ikunapaq chaymanta aswan.
Variables nisqakuna
Yaqa llapan color
yanapakuykuna tema llimp'iykuwan ruwasqa kanku, musuqmanta asignasqa kay genérico llimp'i paleta variablesniykumanta.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Gris escala llimp'ikunapas kan, ichataq huk huch'uy huñulla ima yanapakuykunatapas paqarichinapaq llamk'achisqa.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Mapa
Chaymanta tema colorkuna huk Sass mapaman churasqa kanku chaymanta chaykuna patapi llalliyta atiykuman yanapakuyniyku, componente modificadorkuna chaymanta aswan ruwanapaq.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Sass mapa hinapas gris nisqa llimp’ikuna kanmi. Kay mapaqa manam ima yanapakuykunatapas ruwanapaqchu.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
API de Utilidades nisqa
Color yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss
. Yachay imayna ruwanakuna API llamk'achiyta.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),