Kolor
Bootstrap jest wspierany przez rozbudowany system kolorów, który motywuje nasze style i komponenty. Umożliwia to bardziej wszechstronne dostosowywanie i rozbudowę dowolnego projektu.
Kolory motywu
Używamy podzbioru wszystkich kolorów, aby stworzyć mniejszą paletę kolorów do generowania schematów kolorów, dostępną również jako zmienne Sass i mapę Sass w scss/_variables.scss
pliku Bootstrap.
Wszystkie te kolory są dostępne jako mapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Zapoznaj się z naszą dokumentacją dotyczącą map i pętli Sass, aby dowiedzieć się, jak modyfikować te kolory.
Wszystkie kolory
Wszystkie kolory Bootstrap są dostępne jako zmienne Sass i mapa Sass w scss/_variables.scss
pliku. Aby uniknąć zwiększonych rozmiarów plików, nie tworzymy klas kolorów tekstu ani tła dla każdej z tych zmiennych. Zamiast tego wybieramy podzbiór tych kolorów dla palety motywów .
Pamiętaj, aby monitorować współczynniki kontrastu podczas dostosowywania kolorów. Jak pokazano poniżej, dodaliśmy trzy współczynniki kontrastu do każdego z głównych kolorów — jeden dla bieżących kolorów próbki, jeden dla bieli i jeden dla czerni.
Notatki o Sassie
Sass nie może programowo generować zmiennych, więc sami stworzyliśmy zmienne dla każdego odcienia i odcienia. Określamy wartość punktu środkowego (np. $blue-500
) i używamy niestandardowych funkcji kolorów, aby zabarwić (rozjaśnić) lub przyciemnić (przyciemnić) nasze kolory za pomocą mix()
funkcji kolorów Sassa.
Używanie mix()
nie jest tym samym co lighten()
i darken()
— to pierwsze miesza określony kolor z białym lub czarnym, podczas gdy drugie dostosowuje tylko wartość jasności każdego koloru. Rezultatem jest znacznie pełniejszy zestaw kolorów, jak pokazano w tym demo CodePen .
Nasze tint-color()
i shade-color()
funkcje są używane mix()
wraz z naszą $theme-color-interval
zmienną, która określa schodkową wartość procentową dla każdego produkowanego przez nas koloru mieszanego. Zobacz pliki scss/_functions.scss
i scss/_variables.scss
dla pełnego kodu źródłowego.
Kolorowe mapy Sass
Źródłowe pliki Sass Bootstrapa zawierają trzy mapy, które pomagają w szybkim i łatwym przeglądaniu listy kolorów i ich wartości szesnastkowych.
$colors
zawiera listę wszystkich dostępnych500
kolorów bazowych ( )$theme-colors
wymienia wszystkie semantycznie nazwane kolory motywu (pokazane poniżej)$grays
wymienia wszystkie odcienie i odcienie szarości
Wewnątrz scss/_variables.scss
znajdziesz zmienne kolorów Bootstrap i mapę Sass. Oto przykład $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
);
Dodaj, usuń lub zmodyfikuj wartości na mapie, aby zaktualizować sposób ich użycia w wielu innych składnikach. Niestety w tej chwili nie każdy komponent korzysta z tej mapy Sass. Przyszłe aktualizacje będą dążyć do poprawy tego. Do tego czasu zaplanuj wykorzystanie ${color}
zmiennych i tej mapy Sassa.
Przykład
Oto, jak możesz ich użyć w swoim Sassie:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Do ustawiania i używania wartości kolorów dostępne są również klasy narzędziowe kolorów i tła .color
background-color
500
Generowanie narzędzi
Dodano w wersji 5.1.0
Bootstrap nie zawiera color
narzędzi background-color
dla każdej zmiennej koloru, ale możesz je wygenerować samodzielnie za pomocą naszego narzędzia API i naszych rozszerzonych map Sass dodanych w wersji 5.1.0.
- Na początek upewnij się, że zaimportowałeś nasze funkcje, zmienne, domieszki i narzędzia.
- Skorzystaj z naszej
map-merge-multiple()
funkcji, aby szybko połączyć wiele map Sass w nową mapę. - Połącz tę nową połączoną mapę, aby rozszerzyć dowolne narzędzie o
{color}-{level}
nazwę klasy.
Oto przykład, który generuje narzędzia koloru tekstu (np. .text-purple-500
) przy użyciu powyższych kroków.
@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";
Spowoduje to wygenerowanie nowych .text-{color}-{level}
narzędzi dla każdego koloru i poziomu. Możesz zrobić to samo dla każdego innego narzędzia i nieruchomości.