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

Bootstrap jest wspierany przez rozbudowany system kolorów, który motywuje nasze style i komponenty. Umożliwia to bardziej wszechstronne dostosowywanie i rozbudowę dowolnego projektu.

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

Wszystkie te kolory są dostępne jako mapa Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Zapoznaj się z naszą dokumentacją dotyczącą map i pętli Sass, aby dowiedzieć się, jak modyfikować te kolory.

Wszystkie kolory

Wszystkie kolory Bootstrap są dostępne jako zmienne Sass i mapa Sass w scss/_variables.scsspliku. Aby uniknąć zwiększonych rozmiarów plików, nie tworzymy klas kolorów tekstu ani tła dla każdej z tych zmiennych. Zamiast tego wybieramy podzbiór tych kolorów dla palety motywów .

Pamiętaj, aby monitorować współczynniki kontrastu podczas dostosowywania kolorów. Jak pokazano poniżej, dodaliśmy trzy współczynniki kontrastu do każdego z głównych kolorów — jeden dla bieżących kolorów próbki, jeden dla bieli i jeden dla czerni.

$niebieski#0d6efd
$niebieski-100
$niebieski-200
$niebieski-300
$niebieski-400
$niebieski-500
$niebieski-600
$niebieski-700
$niebieski-800
$niebieski-900
$indygo#6610f2
$indygo-100
$indygo-200
$indygo-300
$indygo-400
$indygo-500
$indygo-600
$indygo-700
$indygo-800
$indygo-900
$fioletowy#6f42c1
$fioletowy-100
$fioletowy-200
$fioletowy-300
$fioletowy-400
$fioletowy-500
$fioletowy-600
$fioletowy-700
$fioletowy-800
$fioletowy-900
$różowy#d63384
$różowy-100
$różowy-200
$różowy-300
$różowy-400
$różowy-500
$różowy-600
$różowy-700
$różowy-800
$różowy-900
$czerwony#dc3545
$czerwony-100
$czerwony-200
$czerwony-300
czerwony-400
czerwony-500
$czerwony-600
czerwony-700
$czerwony-800
czerwony-900
$pomarańczowy#fd7e14
$pomarańczowy-100
$pomarańczowy-200
$pomarańczowy-300
pomarańcza-400
$pomarańczowy-500
$pomarańczowy-600
pomarańcz-700
pomarańcz-800
pomarańczowy-900
$żółty#ffc107
$żółty-100
$żółty-200
$żółty-300
$żółty-400
żółty-500
żółty-600
żółty-700
żółty-800
żółty-900
$zielony#198754
$zielony-100
$zielony-200
$zielony-300
$zielony-400
$zielony-500
$zielony-600
$zielony-700
$zielony-800
$zielony-900
$cyraneczka#20c997
$cyraneczka-100
cyraneczka-200
cyraneczka-300
cyraneczka-400
cyraneczka-500
cyraneczka-600
cyraneczka-700
cyraneczka-800
cyraneczka-900
$cyjan#0dcaf0
cyjan-100
cyjan-200
cyjan-300
cyjan-400
cyjan-500
cyjan-600
cyjan-700
cyjan-800
cyjan-900
$szary-500#adb5bd
$szary-100
$szary-200
$szary-300
$szary-400
$szary-500
$szary-600
$szary-700
$szary-800
$szary-900
$czarny#000
$biały#ffff

Notatki o Sassie

Sass nie może programowo generować zmiennych, więc sami stworzyliśmy zmienne dla każdego odcienia i odcienia. Określamy wartość punktu środkowego (np. $blue-500) i używamy niestandardowych funkcji kolorów, aby zabarwić (rozjaśnić) lub przyciemnić (przyciemnić) nasze kolory za pomocą mix()funkcji kolorów Sassa.

Używanie mix()nie jest tym samym co lighten()i darken()— to pierwsze miesza określony kolor z białym lub czarnym, podczas gdy drugie dostosowuje tylko wartość jasności każdego koloru. Rezultatem jest znacznie pełniejszy zestaw kolorów, jak pokazano w tym demo CodePen .

Nasze tint-color()i shade-color()funkcje są używane mix()wraz z naszą $theme-color-intervalzmienną, która określa schodkową wartość procentową dla każdego produkowanego przez nas koloru mieszanego. Zobacz pliki scss/_functions.scssi scss/_variables.scssdla pełnego kodu źródłowego.

Kolorowe mapy Sass

Źródłowe pliki Sass Bootstrapa zawierają trzy mapy, które pomagają w szybkim i łatwym przeglądaniu listy kolorów i ich wartości szesnastkowych.

  • $colorszawiera listę wszystkich dostępnych 500kolorów bazowych ( )
  • $theme-colorswymienia wszystkie semantycznie nazwane kolory motywu (pokazane poniżej)
  • $grayswymienia wszystkie odcienie i odcienie szarości

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
);

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.

Przykład

Oto, jak możesz ich użyć w swoim Sassie:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Do ustawiania i używania wartości kolorów dostępne są również klasy narzędziowe kolorów i tła .colorbackground-color500

Generowanie narzędzi

Dodano w wersji 5.1.0

Bootstrap nie zawiera colornarzędzi background-colordla każdej zmiennej koloru, ale możesz je wygenerować samodzielnie za pomocą naszego narzędzia API i naszych rozszerzonych map Sass dodanych w wersji 5.1.0.

  1. Na początek upewnij się, że zaimportowałeś nasze funkcje, zmienne, domieszki i narzędzia.
  2. Skorzystaj z naszej map-merge-multiple()funkcji, aby szybko połączyć wiele map Sass w nową mapę.
  3. Połącz tę nową połączoną mapę, aby rozszerzyć dowolne narzędzie o {color}-{level}nazwę klasy.

Oto przykład, który generuje narzędzia koloru tekstu (np. .text-purple-500) przy użyciu powyższych kroków.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Spowoduje to wygenerowanie nowych .text-{color}-{level}narzędzi dla każdego koloru i poziomu. Możesz zrobić to samo dla każdego innego narzędzia i nieruchomości.