Colores
colorHuk 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 :hoverchaymanta :focusestadokuna.
.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>.text-opacity-*chaymanta CSS tikraqkuna qillqa yanapakuykunapaq,
.text-black-50chaymanta
.text-white-50v5.1.0 kaqmanta manaña llamk'achisqa kanku. Chaykunaqa v6.0.0 nisqapi hurqusqa kanqa.
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.
Opacidad
v5.1.0 nisqapi yapasqa
v5.1.0 kaqmanta, qillqa llimp'i yanapakuykuna Sass kaqwan ruwasqa kanku CSS tikraqkunawan. Kayqa chiqa pacha llimp'i tikraykunata mana huñusqa chaymanta alfa transparencia dinámica tikraykunata saqin.
Imayna llamkan
Yuyaykuy ñawpaqmanta churasqa .text-primaryutilidadniykupi.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Huk RGB laya ñuqaykupa --bs-primary(chaniwan 13, 110, 253) CSS tikraqniykumanta llamk'achiyku chaymanta huk iskay kaq CSS tikraq, --bs-text-opacity, alfa sut'i kaqpaq k'askachiyku (huk ñawpaqmanta chaniwan 1huk kiti CSS tikraqman gracias). Chayqa niyta munan mayk'aqllapas .text-primarykunan llamk'achkanki, yupasqa colorchaninniyki rgba(13, 110, 253, 1). Sapa .text-*clase ukhupi kiti CSS tikraq herencia sasachakuykunata harkan chayrayku yanapakuykunamanta anidado instanciakuna mana kikinmanta huk tikrasqa alfa sut'iyuqchu kanku.
Qatina
Chay opacidadta tikranaykipaq, --bs-text-opacitysapanchasqa estilokuna utaq chiru ukhupi estilokuna kaqnintakama llalliy.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Utaq, mayqin yanapakuykunamantapas akllay .text-opacity:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>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 coloryanapakuykuna 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
);
RGB llimp'ikuna huk sapaq Sass mapamanta paqarichisqa:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Hinallataq llimp'i opacidades chaymanta ruwanku kikin mapankuwan chaymanta chay utilidadkuna API kaqwan tukusqa:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
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,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),