Motywacja Bootstrap
Dostosuj Bootstrap 4 za pomocą naszych nowych wbudowanych zmiennych Sass, aby uzyskać globalne preferencje stylów, aby łatwo zmieniać motywy i komponenty.
Wstęp
W Bootstrap 3 motywy były w dużej mierze zależne od nadpisywania zmiennych w LESS, niestandardowego CSS i oddzielnego arkusza stylów motywów, który umieściliśmy w naszych dist
plikach. Przy pewnym wysiłku można całkowicie przeprojektować wygląd Bootstrap 3 bez dotykania podstawowych plików. Bootstrap 4 zapewnia znajome, ale nieco inne podejście.
Teraz tworzenie motywów odbywa się za pomocą zmiennych Sass, map Sass i niestandardowego CSS. Nie ma już dedykowanego arkusza stylów motywu; zamiast tego możesz włączyć wbudowany motyw, aby dodawać gradienty, cienie i nie tylko.
Sass
Skorzystaj z naszych źródłowych plików Sass, aby korzystać ze zmiennych, map, domieszek i nie tylko podczas kompilowania Sass przy użyciu własnego potoku zasobów.
Struktura pliku
Jeśli to możliwe, unikaj modyfikowania podstawowych plików Bootstrapa. Dla Sassa oznacza to stworzenie własnego arkusza stylów, który importuje Bootstrap, dzięki czemu możesz go modyfikować i rozszerzać. Zakładając, że używasz menedżera pakietów, takiego jak npm, będziesz miał strukturę plików, która wygląda tak:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jeśli pobrałeś nasze pliki źródłowe i nie korzystasz z menedżera pakietów, będziesz chciał ręcznie skonfigurować coś podobnego do tej struktury, zachowując oddzielne pliki źródłowe Bootstrapa od własnych.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importowanie
W swoim custom.scss
, zaimportujesz źródłowe pliki Sass Bootstrapa. Masz dwie opcje: uwzględnij wszystkie Bootstrap lub wybierz potrzebne części. Zachęcamy do tego drugiego, ale pamiętaj, że w naszych komponentach istnieją pewne wymagania i zależności. Będziesz także musiał dołączyć JavaScript do naszych wtyczek.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
Mając taką konfigurację, możesz zacząć modyfikować dowolne zmienne Sass i mapy w swoim custom.scss
. Możesz również zacząć dodawać części Bootstrapa w // Optional
sekcji, w razie potrzeby. Sugerujemy użycie pełnego stosu importu z naszego bootstrap.scss
pliku jako punktu wyjścia.
Zmienne wartości domyślne
Każda zmienna Sass w Bootstrap zawiera !default
flagę umożliwiającą nadpisanie domyślnej wartości zmiennej we własnym Sass bez modyfikowania kodu źródłowego Bootstrap. Skopiuj i wklej zmienne według potrzeb, zmodyfikuj ich wartości i usuń !default
flagę. Jeśli zmienna została już przypisana, nie zostanie ponownie przypisana przez wartości domyślne w Bootstrap.
Pełną listę zmiennych Bootstrapa znajdziesz w scss/_variables.scss
. Niektóre zmienne są ustawione na null
, te zmienne nie zwracają właściwości, chyba że zostaną zastąpione w Twojej konfiguracji.
Nadpisania zmiennych muszą nastąpić po zaimportowaniu naszych funkcji, zmiennych i domieszek, ale przed pozostałymi importami.
Oto przykład, który zmienia background-color
i color
dla <body>
podczas importowania i kompilowania Bootstrap przez npm:
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Powtórz w razie potrzeby dla dowolnej zmiennej w Bootstrap, w tym poniższych opcji globalnych.
Mapy i pętle
Bootstrap 4 zawiera kilka map Sass, par klucz-wartość, które ułatwiają generowanie rodzin powiązanych CSS. Używamy map Sass dla naszych kolorów, punktów przerwania siatki i nie tylko. Podobnie jak zmienne Sass, wszystkie mapy Sass zawierają !default
flagę i mogą być nadpisane i rozszerzone.
Niektóre z naszych map Sass są domyślnie połączone w puste. Ma to na celu umożliwienie łatwej rozbudowy danej mapy Sass, ale odbywa się to kosztem nieco utrudnionego usuwania przedmiotów z mapy.
Modyfikuj mapę
Aby zmodyfikować istniejący kolor na naszej $theme-colors
mapie, dodaj następujące elementy do niestandardowego pliku Sass:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Dodaj do mapy
Aby dodać nowy kolor do $theme-colors
, dodaj nowy klucz i wartość:
$theme-colors: (
"custom-color": #900
);
Usuń z mapy
Aby usunąć kolory z $theme-colors
lub dowolnej innej mapy, użyj map-remove
. Pamiętaj, że musisz umieścić go między naszymi wymaganiami i opcjami:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
Wymagane klucze
Bootstrap zakłada obecność pewnych określonych kluczy na mapach Sass, których używaliśmy i sami je rozszerzamy. Podczas dostosowywania dołączonych map możesz napotkać błędy, gdy używany jest określony klucz mapy Sass.
Na przykład używamy kluczy primary
, success
, i danger
from $theme-colors
dla łączy, przycisków i stanów formularzy. Zastąpienie wartości tych kluczy nie powinno stwarzać problemów, ale ich usunięcie może spowodować problemy z kompilacją Sass. W takich przypadkach musisz zmodyfikować kod Sass, który korzysta z tych wartości.
Funkcje
Bootstrap wykorzystuje kilka funkcji Sassa, ale tylko podzbiór ma zastosowanie do ogólnych motywów. Zawarliśmy trzy funkcje pobierania wartości z map kolorów:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
Pozwalają one wybrać jeden kolor z mapy Sass, podobnie jak używa się zmiennej koloru z wersji 3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Mamy też inną funkcję pozwalającą na uzyskanie określonego poziomu koloru z $theme-colors
mapy. Ujemne wartości poziomów rozjaśnią kolor, podczas gdy wyższe poziomy będą ciemniejsze.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
W praktyce wywołasz funkcję i przekażesz dwa parametry: nazwę koloru $theme-colors
(np. podstawowy lub niebezpieczeństwo) i poziom liczbowy.
.custom-element {
color: theme-color-level(primary, -10);
}
Dodatkowe funkcje mogą zostać dodane w przyszłości lub własny niestandardowy Sass, aby utworzyć funkcje poziomów dla dodatkowych map Sass, a nawet ogólną, jeśli chcesz być bardziej gadatliwy.
Kontrast kolorów
Dodatkową funkcją, którą zawieramy w Bootstrap jest funkcja kontrastu kolorów, color-yiq
. Wykorzystuje przestrzeń kolorów YIQ do automatycznego zwracania jasnego ( #fff
) lub ciemnego ( #111
) kontrastu w oparciu o określony kolor bazowy. Ta funkcja jest szczególnie przydatna w przypadku domieszek lub pętli, w których generujesz wiele klas.
Na przykład, aby wygenerować próbki kolorów z naszej $theme-colors
mapy:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Może być również używany do jednorazowych potrzeb związanych z kontrastem:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Możesz również określić kolor bazowy za pomocą naszych funkcji mapy kolorów:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Ucieczka SVG
Używamy tej escape-svg
funkcji do ucieczki znaków <
, >
i #
dla obrazów tła SVG. Te znaki muszą zostać zmienione, aby poprawnie renderować obrazy tła w IE. Podczas korzystania z escape-svg
funkcji identyfikatory URI danych muszą być cytowane.
Funkcje dodawania i odejmowania
Używamy funkcji add
i subtract
do owijania calc
funkcji CSS. Podstawowym celem tych funkcji jest unikanie błędów, gdy do wyrażenia 0
jest przekazywana wartość „bez jednostek” . calc
Wyrażenia takie jak calc(10px - 0)
zwrócą błąd we wszystkich przeglądarkach, mimo że są matematycznie poprawne.
Przykład, gdzie obliczenia są prawidłowe:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
Przykład, w którym obliczenia są nieprawidłowe:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Opcje sassa
Dostosuj Bootstrap 4 za pomocą naszego wbudowanego pliku zmiennych niestandardowych i łatwo przełączaj globalne preferencje CSS za pomocą nowych $enable-*
zmiennych Sass. Zastąp wartość zmiennej i ponownie skompiluj ją npm run test
w razie potrzeby.
Możesz znaleźć i dostosować te zmienne dla kluczowych opcji globalnych w scss/_variables.scss
pliku Bootstrap.
Zmienny | Wartości | Opis |
---|---|---|
$spacer |
1rem (domyślnie) lub dowolna wartość > 0 |
Określa domyślną wartość odstępnika, aby programowo generować nasze narzędzia odstępnika . |
$enable-rounded |
true (domyślnie) lubfalse |
Włącza predefiniowane border-radius style na różnych komponentach. |
$enable-shadows |
true lub false (domyślnie) |
Włącza predefiniowane box-shadow style dekoracyjne na różnych komponentach. Nie wpływa na box-shadow s używane do stanów skupienia. |
$enable-gradients |
true lub false (domyślnie) |
Włącza wstępnie zdefiniowane gradienty za pomocą background-image stylów na różnych komponentach. |
$enable-transitions |
true (domyślnie) lubfalse |
Włącza predefiniowane transition s na różnych komponentach. |
$enable-prefers-reduced-motion-media-query |
true (domyślnie) lubfalse |
Włącza prefers-reduced-motion zapytanie o media , które blokuje określone animacje/przejścia na podstawie preferencji przeglądarki/systemu operacyjnego użytkownika. |
$enable-hover-media-query |
true lub false (domyślnie) |
Przestarzałe |
$enable-grid-classes |
true (domyślnie) lubfalse |
Umożliwia generowanie klas CSS dla systemu siatki (np. , .container , .row , .col-md-1 itp.). |
$enable-caret |
true (domyślnie) lubfalse |
Włącza karetkę pseudoelementu na .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (domyślnie) lubfalse |
Dodaj kursor „ręki” do niewyłączonych elementów przycisków. |
$enable-print-styles |
true (domyślnie) lubfalse |
Włącza style do optymalizacji drukowania. |
$enable-responsive-font-sizes |
true lub false (domyślnie) |
Włącza responsywne rozmiary czcionek . |
$enable-validation-icons |
true (domyślnie) lubfalse |
Włącza background-image ikony w tekstowych danych wejściowych i niektóre niestandardowe formularze dla stanów walidacji. |
$enable-deprecation-messages |
true (domyślnie) lubfalse |
Ustaw na false ukrywanie ostrzeżeń podczas korzystania z przestarzałych domieszek i funkcji, które mają zostać usunięte w programie v5 . |
Kolor
Wiele różnych komponentów i narzędzi Bootstrap jest zbudowanych za pomocą serii kolorów zdefiniowanych na mapie Sass. Tę mapę można zapętlić w Sass, aby szybko wygenerować serię zestawów reguł.
Wszystkie kolory
Wszystkie kolory dostępne w Bootstrap 4 są dostępne jako zmienne Sass i mapa Sass w scss/_variables.scss
pliku. Zostanie to rozszerzone w kolejnych mniejszych wydaniach, aby dodać dodatkowe odcienie, podobnie jak paleta odcieni szarości , którą już dodaliśmy.
Oto, jak możesz ich użyć w swoim Sassie:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Klasy użyteczności kolorów są również dostępne dla ustawień color
i background-color
.
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.
Szarości
Rozległy zestaw zmiennych szarości i mapa Sass scss/_variables.scss
zapewniają spójne odcienie szarości w całym projekcie. Zauważ, że są to „chłodne szarości”, które mają tendencję do subtelnego niebieskiego odcienia, a nie neutralnych 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
) !default;
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.
składniki
Wiele komponentów i narzędzi Bootstrap jest zbudowanych z @each
pętli, które iterują po mapie Sassa. Jest to szczególnie pomocne przy generowaniu przez nas wariantów komponentu $theme-colors
i tworzeniu responsywnych wariantów dla każdego punktu przerwania. Gdy dostosujesz te mapy Sass i ponownie je skompilujesz, automatycznie zobaczysz swoje zmiany odzwierciedlone w tych pętlach.
Modyfikatory
Wiele komponentów Bootstrap jest zbudowanych z wykorzystaniem podejścia opartego na klasach modyfikatorów bazowych. Oznacza to, że większość stylizacji jest zawarta w klasie bazowej (np. .btn
), podczas gdy odmiany stylów są ograniczone do klas modyfikujących (np .btn-danger
. ). Te klasy modyfikatorów są budowane na podstawie $theme-colors
mapy, aby dostosować liczbę i nazwę naszych klas modyfikatorów.
Oto dwa przykłady tego, jak zapętlamy $theme-colors
mapę, aby wygenerować modyfikatory do .alert
komponentu i wszystkich naszych .bg-*
narzędzi działających w tle.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
Czuły
Te pętle Sass nie ograniczają się również do map kolorów. Możesz także generować responsywne odmiany swoich komponentów lub narzędzi. Weźmy na przykład nasze responsywne narzędzia do wyrównywania tekstu, w których łączymy @each
pętlę $grid-breakpoints
mapy Sass z zapytaniem o media.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
Jeśli będziesz musiał zmodyfikować swój $grid-breakpoints
, Twoje zmiany zostaną zastosowane do wszystkich pętli iterujących po tej mapie.
Zmienne CSS
Bootstrap 4 zawiera około dwóch tuzinów niestandardowych właściwości CSS (zmiennych) w swoim skompilowanym CSS. Zapewniają one łatwy dostęp do często używanych wartości, takich jak kolory motywu, punkty przerwania i podstawowe stosy czcionek podczas pracy w inspektorze przeglądarki, piaskownicy kodu lub ogólnym prototypowaniu.
Dostępne zmienne
Oto zmienne, które uwzględniamy (pamiętaj, że :root
jest to wymagane). Znajdują się w naszych _root.scss
aktach.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Przykłady
Zmienne CSS oferują podobną elastyczność do zmiennych Sassa, ale bez potrzeby kompilacji przed udostępnieniem ich przeglądarce. Na przykład tutaj resetujemy czcionki i style linków na naszej stronie za pomocą zmiennych CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Zmienne punktu przerwania
Chociaż pierwotnie umieściliśmy punkty przerwania w naszych zmiennych CSS (np. --breakpoint-md
), nie są one obsługiwane w zapytaniach o media , ale nadal można ich używać w zestawach reguł w zapytaniach o media. Te zmienne punktów przerwania pozostają w skompilowanym CSS w celu zapewnienia zgodności z poprzednimi wersjami, biorąc pod uwagę, że mogą być wykorzystywane przez JavaScript. Dowiedz się więcej w specyfikacji .
Oto przykład tego, co nie jest obsługiwane:
@media (min-width: var(--breakpoint-sm)) {
...
}
A oto przykład tego, co jest obsługiwane:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}