Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach

Skorzystaj z naszych źródłowych plików Sass, aby skorzystać ze zmiennych, map, domieszek i funkcji, które pomogą Ci szybciej budować i dostosowywać projekt.

Skorzystaj z naszych źródłowych plików Sass, aby skorzystać ze zmiennych, map, domieszek i nie tylko.

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/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

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, ale przed pozostałymi importami.

Oto przykład, który zmienia background-colori colordla <body>podczas importowania i kompilowania Bootstrap przez npm:

// Required
@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 zawiera garść 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ę

Wszystkie zmienne w $theme-colorsmapie są zdefiniowane jako zmienne samodzielne. Aby zmodyfikować istniejący kolor na naszej $theme-colorsmapie, dodaj następujące elementy do niestandardowego pliku Sass:

$primary: #0074d9;
$danger: #ff4136;

Później te zmienne są ustawiane w $theme-colorsmapie Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Dodaj do mapy

Dodaj nowe kolory do $theme-colorsmapy lub dowolnej innej mapy, tworząc nową mapę Sass ze swoimi niestandardowymi wartościami i łącząc ją z oryginalną mapą. W takim przypadku utworzymy nową $custom-colorsmapę i połączymy ją z $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

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";
// etc

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

Zabarwienie

Oprócz map Sass , które mamy, kolory motywu mogą być również używane jako samodzielne zmienne, takie jak $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Możesz rozjaśnić lub przyciemnić kolory za pomocą funkcji tint-color()i Bootstrap shade-color(). Funkcje te będą mieszać kolory z czernią lub bielą, w przeciwieństwie do natywnych Sassa lighten()i darken()funkcji zmieniających jasność o ustaloną wartość, co często nie prowadzi do pożądanego efektu.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

W praktyce wywołasz funkcję i przekażesz parametry koloru i wagi.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Kontrast kolorów

Aby spełnić standardy dostępności WCAG 2.0 dla kontrastu kolorów , autorzy muszą zapewnić współczynnik kontrastu co najmniej 4,5:1 , z nielicznymi wyjątkami.

Dodatkową funkcją, którą zawieramy w Bootstrap jest funkcja kontrastu kolorów, color-contrast. Wykorzystuje algorytm WCAG 2.0 do obliczania progów kontrastu na podstawie względnej luminancji w sRGBprzestrzeni kolorów, aby automatycznie zwracać kontrast jasny ( #fff), ciemny ( #212529) lub czarny ( #000) 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-contrast($value);
  }
}

Może być również używany do jednorazowych potrzeb związanych z kontrastem:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Możesz również określić kolor bazowy za pomocą naszych funkcji mapy kolorów:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Ucieczka SVG

Używamy tej escape-svgfunkcji do ucieczki znaków <, >i #dla obrazów tła SVG. 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);
}

Mieszanki

Nasz scss/mixins/katalog zawiera mnóstwo domieszek, które zasilają części Bootstrap i mogą być również używane w Twoim własnym projekcie.

Schematy kolorów

Dostępny jest skrócony mixin dla prefers-color-schemezapytania o media z obsługą light, darki niestandardowych schematów kolorów.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}
.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}