Llinpi
Bootstrap huk hatun llimp'i sistemawan yanapasqa kachkan chaymanta temakuna estilokunayku chaymanta componentekunayku. Kayqa aswan tukuypaq ruwayta chaymanta mast'ariyta mayqin ruwaypaqpas atichin.
Tema colores
Llapa llimp'ikunamanta huk huch'uy huñuta llamk'achiyku huk aswan huch'uy llimp'ikuna ruwanapaq llimp'ikuna ruwanapaq, chaymanta Sass tikraq hina chaymanta huk Sass mapa Bootstrap scss/_variables.scss
willañiqipi tarikun.
Tukuy kay llimp’ikunaqa Sass mapa hinam kachkan, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Sass mapakunaykumanta chaymanta loops docsniykumanta qhaway imayna kay llimp'ikunata tikranapaq.
Tukuy llimpikuna
Llapan Bootstrap llimp'ikuna Sass tikraq hina chaymanta huk Sass mapa scss/_variables.scss
willañiqipi kanku. Willañiqi sayayninkuna yapasqa kananpaq, mana qillqa icha qhipa llimp'i clasekunata sapa kay tikraqkunapaq ruwaykuchu. Aswanpas, kay llimp’ikunamanta huk huch’uy huñuta akllayku huk tema paletapaq .
Aswan allinta qhaway contraste ratiokunata imaynachus colorkunata ruwanki. Uraypi rikuchisqa hina, kimsa contraste ratiokuna sapa hatun llimp'ikunaman yapasqayku —huk swatch kunan llimp'ikuna kaqpaq, huk yuraq kaqwan, huktaq yana kaqwan.
Notas sobre Sass
Sass mana programaticamente variables nisqakunata ruwayta atinchu, chayrayku makiwan sapa tintepaq chaymanta llantuypaq variables nisqakunata ruwarqayku ñuqayku kikiykupaq. Chawpi chanita riqsichiyku (kayhina, $blue-500
) chaymanta sapanchasqa llimp'i ruwanakuna llamk'achiyku llimp'iyku tinte (k'ancharichiypaq) utaq llantuypaq (tutayachiypaq) Sass mix()
llimp'i ruwana kaqnintakama.
Utilizar mix()
mana kaqllachu lighten()
chaymanta darken()
—ñawpaq kaqtaq nisqa llimp’ita yuraqwan icha yanawan chaqrun, qhipa kaqtaq sapa llimp’ip llamp’u kaynin chanillata allichan. Chay ruwayqa huk aswan hunt'asqa suite llimp'ikuna kan, kay CodePen demo kaqpi rikuchisqa hina .
Nuestro tint-color()
y shade-color()
funciones utilizan mix()
junto a nuestra $theme-color-interval
variable, que especifica un valor porcentaje paso para cada color producido. Huk willañiqikunata qhaway scss/_functions.scss
hunt'asqa scss/_variables.scss
pukyuta.
Mapas de Sass de colores
Bootstrap kaqpa pukyuta Sass willañiqikuna kimsa mapakunayuq yanapasunki usqhaylla chaymanta mana sasachu llimp'ikuna lista kaqpi chaymanta hex chanikunankupi llimp'iypi.
$colors
lista llapa tarikuq base (500
) coloresniykumanta$theme-colors
llapa semánticamente sutichasqa tema llimp'ikunata listan (urapi rikuchisqa)$grays
lista de todos los tintes y tonos de gris
, ukhupi scss/_variables.scss
, Bootstrap llimp'i tikraqkunata chaymanta Sass mapata tarinki. Kaypi huk rikch'ana $colors
Sass mapamanta:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Mapa ukhupi chanikunata yapay, hurquy utaq tikray imayna huk achka componentekunapi llamk'achisqa kasqankuta musuqyachinaykipaq. Llakikuypaq kay pacha, mana sapa componente kay Sass mapata llamk'achin. Hamuq musuqyachiykuna kayta allinchaypaq kallpachakunqa. Chaykamaqa, planificay ${color}
variables nisqakunata, kay mapa Sass nisqakunatapas llamk’achinapaq.
Qatina
Kaypi imaynatachus kaykunata Sass nisqaykipi llamk'achiyta atinki:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Color chaymanta qhipa yanapakuy clasekuna kankutaq llimp'i chanikuna churanapaq color
chaymanta background-color
llamk'achinapaq .500
Utilidades nisqakunata paqarichispa
v5.1.0 nisqapi yapasqa
Bootstrap mana color
chaymanta background-color
yanapakuykunata sapa llimp'i tikraqpaq churanchu, ichaqa kaykunata qam kikiyki ruwayta atikunki yanapakuyniyku API kaqwan chaymanta mast'arisqa Sass mapaykuwan v5.1.0 kaqpi yapasqa.
- Qallarinapaq, ruwanayku, tikraq, mixins chaymanta yanapakuyniyku apamusqaykita qhaway.
- Ruwayniykuwan llamk'achiy
map-merge-multiple()
achka Sass mapakunata musuq mapapi usqhaylla hukllanapaq. - Kay musuq huñusqa mapata huñuy ima yanapakuytapas huk
{color}-{level}
clase sutiwan mast'arinaykipaq.
Kaypi huk rikch'ana kachkan mayqinchus qillqa llimp'i yanapakuykunata ruwan (kayhina, .text-purple-500
) pata ruwanakunata llamk'achispa.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
.text-{color}-{level}
Kayqa sapa llimp’ipaq, patapaq ima musuq yanapakuykunata paqarichinqa . Chaynatataq ruwayta atinki mayqin wak utilidadpaq chaymanta propiedadpaqpas.