Farba
Bootstrap je podporovaný rozsiahlym systémom farieb, ktorý tematizuje naše štýly a komponenty. To umožňuje komplexnejšie prispôsobenie a rozšírenie pre akýkoľvek projekt.
Farby motívu
Používame podmnožinu všetkých farieb na vytvorenie menšej farebnej palety na generovanie farebných schém, ktoré sú dostupné aj ako premenné Sass a mapa Sass v scss/_variables.scss
súbore Bootstrap.
Všetky tieto farby sú dostupné ako mapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pozrite si naše dokumenty o mapách a slučkách Sass , kde nájdete informácie o tom, ako upraviť tieto farby.
Všetky farby
Všetky farby Bootstrapu sú dostupné ako premenné Sass a mapa Sass v scss/_variables.scss
súbore. Aby sme sa vyhli zväčšeniu veľkosti súborov, nevytvárame triedy farieb textu alebo pozadia pre každú z týchto premenných. Namiesto toho vyberieme podmnožinu týchto farieb pre paletu tém .
Pri prispôsobovaní farieb nezabudnite sledovať kontrastné pomery. Ako je uvedené nižšie, ku každej z hlavných farieb sme pridali tri kontrastné pomery – jeden pre aktuálne farby vzorky, jeden pre bielu a jeden pre čiernu.
Poznámky k Sassovi
Sass nemôže programovo generovať premenné, takže sme manuálne vytvorili premenné pre každý odtieň a odtieň sami. Špecifikujeme strednú hodnotu (napr. $blue-500
) a používame vlastné farebné funkcie na tónovanie (zosvetlenie) alebo tieňovanie (stmavenie) našich farieb prostredníctvom mix()
funkcie farieb Sass.
Použitie mix()
nie je rovnaké ako lighten()
a darken()
— prvý spôsob zmieša určenú farbu s bielou alebo čiernou, zatiaľ čo druhý iba upraví hodnotu svetlosti každej farby. Výsledkom je oveľa kompletnejšia sada farieb, ako je znázornené v tejto ukážke CodePen .
Naše tint-color()
a shade-color()
funkcie sa používajú mix()
spolu s našou $theme-color-interval
premennou, ktorá špecifikuje stupňovitú percentuálnu hodnotu pre každú zmiešanú farbu, ktorú vyrábame. Úplný zdrojový kód nájdete v súboroch scss/_functions.scss
a .scss/_variables.scss
Farebné mapy Sass
Zdrojové súbory Sass Bootstrapu obsahujú tri mapy, ktoré vám pomôžu rýchlo a jednoducho prechádzať zoznamom farieb a ich hexadecimálnych hodnôt.
$colors
uvádza všetky naše dostupné základné (500
) farby$theme-colors
uvádza všetky sémanticky pomenované farby tém (uvedené nižšie)$grays
uvádza všetky odtiene a odtiene sivej
V rámci scss/_variables.scss
, nájdete farebné premenné Bootstrapu a mapu Sass. Tu je príklad $colors
mapy Sass:
$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
);
Pridajte, odstráňte alebo upravte hodnoty v rámci mapy, aby ste aktualizovali spôsob, akým sa používajú v mnohých iných komponentoch. Bohužiaľ v súčasnosti nie každý komponent využíva túto mapu Sass. Budúce aktualizácie sa budú snažiť toto vylepšiť. Dovtedy plánujte využívať ${color}
premenné a túto mapu Sass.
Príklad
Tu je návod, ako ich môžete použiť vo svojom Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Na nastavenie a používanie hodnôt farieb sú k dispozícii aj triedy nástrojov farieb a pozadia .color
background-color
500
Generovanie inžinierskych sietí
Pridané vo verzii 5.1.0
Bootstrap nezahŕňa nástroje color
a background-color
nástroje pre každú farebnú premennú, ale môžete si ich vygenerovať sami pomocou nášho API nástroja a našich rozšírených máp Sass pridaných vo verzii 5.1.0.
- Ak chcete začať, uistite sa, že ste importovali naše funkcie, premenné, mixíny a nástroje.
- Použite našu
map-merge-multiple()
funkciu na rýchle spojenie viacerých máp Sass do novej mapy. - Zlúčte túto novú kombinovanú mapu a rozšírte akúkoľvek pomôcku o
{color}-{level}
názov triedy.
Tu je príklad, ktorý .text-purple-500
pomocou vyššie uvedených krokov generuje pomocné programy pre farbu textu (napr. ).
@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";
Tým sa vygenerujú nové .text-{color}-{level}
nástroje pre každú farbu a úroveň. To isté môžete urobiť pre akýkoľvek iný nástroj a majetok.