Motywacja Bootstrap
Dostosuj Bootstrap 4 za pomocą naszych nowych wbudowanych zmiennych Sass, aby uzyskać globalne preferencje stylów, aby łatwo zmieniać motywy i komponenty.
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.
Skorzystaj z naszych źródłowych plików Sass, aby skorzystać ze zmiennych, map, domieszek i nie tylko.
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:
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.
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.
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.
Każda zmienna Sass w Bootstrap 4 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.
Nadpisania zmiennych w tym samym pliku Sass mogą występować przed lub za zmiennymi domyślnymi. Jednak podczas nadpisywania w plikach Sass, nadpisania muszą nastąpić przed zaimportowaniem plików Sass Bootstrap.
Oto przykład, który zmienia background-color
i color
dla <body>
podczas importowania i kompilowania Bootstrap przez npm:
Powtórz w razie potrzeby dla dowolnej zmiennej w Bootstrap, w tym poniższych opcji globalnych.
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.
Aby zmodyfikować istniejący kolor na naszej $theme-colors
mapie, dodaj następujące elementy do niestandardowego pliku Sass:
Aby dodać nowy kolor do $theme-colors
, dodaj nowy klucz i wartość:
Aby usunąć kolory z $theme-colors
lub dowolnej innej mapy, użyj map-remove
:
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.
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:
Pozwalają one wybrać jeden kolor z mapy Sass, podobnie jak używa się zmiennej koloru z wersji 3.
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.
W praktyce wywołasz funkcję i przekażesz dwa parametry: nazwę koloru $theme-colors
(np. podstawowy lub niebezpieczeństwo) i poziom liczbowy.
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.
Dodatkową funkcją, którą zawiera 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:
Może być również używany do jednorazowych potrzeb związanych z kontrastem:
Możesz również określić kolor bazowy za pomocą naszych funkcji mapy kolorów:
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 naszym _variables.scss
pliku.
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 na różnych komponentach. |
$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-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-print-styles |
true (domyślnie) lubfalse |
Włącza style do optymalizacji drukowania. |
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 dostępne w Bootstrap 4 są dostępne jako zmienne Sass i mapa Sass w naszym 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:
Klasy użyteczności kolorów są również dostępne dla ustawień color
i background-color
.
W przyszłości postaramy się zapewnić mapy i zmienne Sass dla odcieni każdego koloru, tak jak to zrobiliśmy z poniższymi kolorami w skali szarości.
Używamy podzbioru wszystkich kolorów, aby utworzyć mniejszą paletę kolorów do generowania schematów kolorów, dostępną również jako zmienne Sass i mapę Sass w naszym scss/_variables.scss
pliku.
Rozległy zestaw zmiennych szarości i mapa Sass scss/_variables.scss
zapewniają spójne odcienie szarości w całym projekcie.
W _variables.scss
programie znajdziesz nasze zmienne kolorów i mapę Sass. Oto przykład $colors
mapy Sass:
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.
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.
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.
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.
Jeśli będziesz musiał zmodyfikować swój $grid-breakpoints
, Twoje zmiany zostaną zastosowane do wszystkich pętli iterujących po tej mapie.
Bootstrap 4 zawiera około dwóch tuzinów niestandardowych właściwości CSS (zmiennych) w 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.
Oto zmienne, które uwzględniamy (pamiętaj, że :root
jest to wymagane). Znajdują się w naszych _root.scss
aktach.
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.
Możesz również użyć naszych zmiennych punktów przerwania w swoich zapytaniach o media: