Source

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 distplikach. 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 skorzystać ze zmiennych, map, domieszek i nie tylko. W naszej wersji zwiększyliśmy precyzję zaokrąglania Sassa do 6 (domyślnie jest to 5), aby zapobiec problemom z zaokrąglaniem w przeglądarce.

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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 // Optionalsekcji, w razie potrzeby. Sugerujemy użycie pełnego stosu importu z naszego bootstrap.scsspliku jako punktu wyjścia.

Zmienne wartości domyślne

Każda zmienna Sass w Bootstrap 4 zawiera !defaultflagę 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ń !defaultflagę. 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 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-colori colordla <body>podczas importowania i kompilowania Bootstrap przez npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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ą !defaultflagę 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-colorsmapie, 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-colorslub 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 dangerfrom $theme-colorsdla łą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-colorsmapy. 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-colorsmapy:

@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-svgfunkcji do ucieczki znaków <, >i #dla obrazów tła SVG. Te znaki muszą zostać zmienione, aby poprawnie renderować obrazy tła w IE.

Funkcje dodawania i odejmowania

Używamy funkcji addi subtractdo owijania calcfunkcji CSS. Podstawowym celem tych funkcji jest unikanie błędów, gdy do wyrażenia 0jest przekazywana wartość „bez jednostek” . calcWyraż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 testw razie potrzeby.

Możesz znaleźć i dostosować te zmienne dla kluczowych opcji globalnych w scss/_variables.scsspliku 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-radiusstyle na różnych komponentach.
$enable-shadows truelub false(domyślnie) Włącza predefiniowane box-shadowstyle na różnych komponentach.
$enable-gradients truelub false(domyślnie) Włącza wstępnie zdefiniowane gradienty za pomocą background-imagestylów na różnych komponentach.
$enable-transitions true(domyślnie) lubfalse Włącza predefiniowane transitions na różnych komponentach.
$enable-prefers-reduced-motion-media-query true(domyślnie) lubfalse Włącza prefers-reduced-motionzapytanie o media , które blokuje określone animacje/przejścia na podstawie preferencji przeglądarki/systemu operacyjnego użytkownika.
$enable-hover-media-query truelub 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-1itp.).
$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 truelub false(domyślnie) Włącza responsywne rozmiary czcionek .
$enable-validation-icons true(domyślnie) lubfalse Włącza background-imageikony w tekstowych danych wejściowych i niektóre niestandardowe formularze dla stanów walidacji.
$enable-deprecation-messages truelub false(domyślnie) Ustaw, trueaby wyświetlać ostrzeżenia 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.scsspliku. Zostanie to rozszerzone w kolejnych mniejszych wydaniach, aby dodać dodatkowe odcienie, podobnie jak paleta odcieni szarości , którą już dodaliśmy.

Niebieski
Indygo
Fioletowy
Różowy
Czerwony
Pomarańczowy
Żółty
Zielony
Cyraneczka
Cyjan

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ń colori 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.

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.scsspliku Bootstrap.

Podstawowy
Wtórny
Powodzenie
Zagrożenie
Ostrzeżenie
Informacje
Światło
Ciemny

Szarości

Rozległy zestaw zmiennych szarości i mapa Sass scss/_variables.scsszapewniają 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.

100
200
300
400
500
600
700
800
900

Wewnątrz scss/_variables.scssznajdziesz zmienne kolorów Bootstrap i mapę Sass. Oto przykład $colorsmapy 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 @eachpętli, które iterują po mapie Sassa. Jest to szczególnie pomocne przy generowaniu przez nas wariantów komponentu $theme-colorsi 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-colorsmapy, aby dostosować liczbę i nazwę naszych klas modyfikatorów.

Oto dwa przykłady tego, jak zapętlamy $theme-colorsmapę, aby wygenerować modyfikatory do .alertkomponentu 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 @eachpętlę $grid-breakpointsmapy 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 :rootjest to wymagane). Znajdują się w naszych _root.scssaktach.

: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", 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);
  }
}