Barva
Bootstrap je podporován rozsáhlým barevným systémem, který je tématem našich stylů a komponent. To umožňuje komplexnější přizpůsobení a rozšíření pro jakýkoli projekt.
Barvy motivu
Používáme podmnožinu všech barev k vytvoření menší palety barev pro generování barevných schémat, která je také dostupná jako proměnné Sass a mapa Sass v scss/_variables.scss
souboru Bootstrap.
Všechny tyto barvy jsou dostupné jako Sass mapa, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Podívejte se na naše dokumenty k mapám a smyčkám Sass , kde najdete informace o tom, jak tyto barvy upravit.
Všechny barvy
Všechny barvy Bootstrapu jsou dostupné jako proměnné Sass a mapa Sass v scss/_variables.scss
souboru. Abychom se vyhnuli zvětšeným velikostem souborů, nevytváříme třídy barev textu nebo pozadí pro každou z těchto proměnných. Místo toho vybereme podmnožinu těchto barev pro paletu motivů .
Při přizpůsobování barev nezapomeňte sledovat kontrastní poměry. Jak je ukázáno níže, ke každé z hlavních barev jsme přidali tři kontrastní poměry – jeden pro aktuální barvy vzorníku, jeden pro proti bílé a jeden pro proti černé.
Poznámky k Sassovi
Sass neumí programově generovat proměnné, takže jsme ručně vytvořili proměnné pro každý odstín a odstín sami. Určujeme střední hodnotu (např. $blue-500
) a používáme vlastní barevné funkce k tónování (zesvětlení) nebo stínování (ztmavení) našich barev pomocí mix()
funkce barev Sass.
Použití mix()
není stejné jako lighten()
a darken()
— první smíchá specifikovanou barvu s bílou nebo černou, zatímco druhé pouze upraví hodnotu světlosti každé barvy. Výsledkem je mnohem kompletnější sada barev, jak je ukázáno v této ukázce CodePen .
Naše tint-color()
a shade-color()
funkce se používají mix()
spolu s naší $theme-color-interval
proměnnou, která specifikuje stupňovitou procentuální hodnotu pro každou namíchanou barvu, kterou vyrábíme. Úplný zdrojový kód naleznete v scss/_functions.scss
souborech a .scss/_variables.scss
Barevné mapy Sass
Zdrojové soubory Sass Bootstrapu obsahují tři mapy, které vám pomohou rychle a snadno procházet seznamem barev a jejich hexadecimálních hodnot.
$colors
uvádí všechny naše dostupné základní (500
) barvy$theme-colors
uvádí všechny sémanticky pojmenované barvy motivu (zobrazeno níže)$grays
uvádí všechny odstíny a odstíny šedé
V scss/_variables.scss
, najdete barevné proměnné Bootstrapu a mapu Sass. Zde je pří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
);
Přidejte, odeberte nebo upravte hodnoty v mapě, abyste aktualizovali způsob jejich použití v mnoha dalších komponentách. Bohužel v současné době ne každá součást využívá tuto mapu Sass. Budoucí aktualizace se budou snažit toto zlepšit. Do té doby plánujte využití ${color}
proměnných a této mapy Sass.
Příklad
Zde je návod, jak je můžete použít ve svém Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Pro nastavení a použití hodnot barev jsou k dispozici také třídy obslužných programů barvy a pozadí .color
background-color
500
Generování inženýrských sítí
Přidáno ve verzi 5.1.0
Bootstrap nezahrnuje nástroje color
a background-color
nástroje pro každou barevnou proměnnou, ale můžete si je vygenerovat sami pomocí našeho API nástroje a našich rozšířených map Sass přidaných ve verzi 5.1.0.
- Pro začátek se ujistěte, že jste importovali naše funkce, proměnné, mixiny a utility.
- Použijte naši
map-merge-multiple()
funkci k rychlému sloučení více Sass map dohromady do nové mapy. - Sloučením této nové kombinované mapy rozšíříte jakýkoli nástroj o
{color}-{level}
název třídy.
Zde je příklad, který .text-purple-500
pomocí výše uvedených kroků generuje nástroje pro barvu textu (např. ).
@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";
To vytvoří nové .text-{color}-{level}
nástroje pro každou barvu a úroveň. Totéž můžete udělat pro jakýkoli jiný nástroj a majetek.