in English

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 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 // 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 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 muszą nastąpić po zaimportowaniu naszych funkcji, zmiennych i domieszek, ale przed pozostałymi importami.

Oto przykład, który zmienia background-colori colordla <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.

Zacznij korzystać z Bootstrap przez npm dzięki naszemu projektowi startowemu! Przejdź do repozytorium szablonów twbs /bootstrap-npm-starter , aby zobaczyć, jak zbudować i dostosować Bootstrap we własnym projekcie npm. Zawiera kompilator Sass, Autoprefixer, Stylelint, PurgeCSS i ikony Bootstrap.

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. Podczas korzystania z escape-svgfunkcji identyfikatory URI danych muszą być cytowane.

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 dekoracyjne na różnych komponentach. Nie wpływa na box-shadows używane do stanów skupienia.
$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 true(domyślnie) lubfalse Ustaw na falseukrywanie 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.scsspliku. Zostanie to rozszerzone w kolejnych mniejszych wydaniach, aby dodać dodatkowe odcienie, podobnie jak paleta odcieni szarości , którą już dodaliśmy.

$niebieski #007bff
$indygo #6610f2
$fioletowy #6f42c1
$różowy #e83e8c
$czerwony #dc3545
$pomarańczowy #fd7e14
$żółty #ffc107
$zielony #28a745
$cyraneczka #20c997
$cyjan #17a2b8

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 #007bff
$wtórny #6c757d
$sukces #28a745
$niebezpieczeństwo #dc3545
$ostrzeżenie #ffc107
$informacje #17a2b8
$lekki #f8f9fa
$ciemny #343a40

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.

$szary-100 #f8f9fa
$szary-200 #e9ecef
$szary-300 #dee2e6
$szary-400 #ced4da
$szary-500 #adb5bd
$szary-600 #6c757d
$szary-700 #495057
$szary-800 #343a40
$szary-900 #212529

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