Kolor

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.

Na tej stronie

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ńcz-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 bielą lub czernią, 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()obok naszej $theme-color-intervalzmiennej, która określa schodkową wartość procentową dla każdego produkowanego przez nas koloru mieszanego. Zobacz pliki scss/_functions.scssi scss/_variables.scsspełny kod źródłowy.

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