Перейти до основного вмісту Перейти до навігації документами
Check
in English

колір

Bootstrap підтримується великою системою кольорів, яка тематизує наші стилі та компоненти. Це дозволяє більш комплексно налаштувати та розширити будь-який проект.

Кольори теми

Ми використовуємо підмножину всіх кольорів, щоб створити меншу кольорову палітру для генерації колірних схем, також доступну як змінні Sass і карту Sass у scss/_variables.scssфайлі Bootstrap.

Первинний
Вторинний
Успіх
Небезпека
УВАГА
Інформація
світло
Темний

Усі ці кольори доступні як карта Sass, $theme-colors.

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

Ознайомтеся з нашими картами Sass і документацією циклів , щоб дізнатися, як змінити ці кольори.

Всі кольори

Усі кольори Bootstrap доступні як змінні Sass і карта Sass у scss/_variables.scssфайлі. Щоб уникнути збільшення розмірів файлів, ми не створюємо класи кольору тексту чи фону для кожної з цих змінних. Натомість ми вибираємо підмножину цих кольорів для палітри теми .

Обов’язково стежте за коефіцієнтом контрастності під час налаштування кольорів. Як показано нижче, ми додали три коефіцієнти контрастності до кожного з основних кольорів — один для поточних кольорів зразка, один для білого та один для чорного.

$синій#0d6efd
синій-100 доларів
синій-200$
синій-300$
синій-400$
синій-500 доларів
синій-600$
синій-700$
синій-800$
синій-900$
$indigo#6610f2
$indigo-100
індиго-200 доларів
індиго-300 доларів
$indigo-400
$indigo-500
індиго-600 доларів
індиго-700 доларів
$indigo-800
$indigo-900
$фіолетовий#6f42c1
фіолетовий-100 доларів
фіолетовий-200$
фіолетовий-300$
фіолетовий-400$
фіолетовий-500$
фіолетовий-600$
фіолетовий-700$
фіолетовий-800$
фіолетовий-900$
$рожевий#d63384
рожевий - 100 доларів
рожевий-200$
рожевий-300$
рожевий-400$
рожевий-500$
рожевий-600$
рожевий-700$
рожевий-800$
рожевий-900$
$червоний#dc3545
червоний - 100 доларів
червоний - 200 доларів
червоний - 300 доларів
червоний - 400 доларів
червоний - 500 доларів
червоний - 600 доларів
червоний-700$
червоний - 800 доларів
червоний-900$
$апельсин#fd7e14
апельсин-100$
апельсин-200$
апельсин-300$
апельсин-400$
апельсин-500$
апельсин-600$
апельсин-700$
апельсин-800$
апельсин-900$
$жовтий#ffc107
жовтий-100 доларів
жовтий-200$
жовтий-300$
жовтий-400$
жовтий-500$
жовтий-600$
жовтий-700$
жовтий-800$
жовтий-900$
$зелений#198754
Грін-100
зелених - 200 доларів
зелених - 300 доларів
зелених 400 доларів
500 доларів США
Грін-600 $
зелених - 700 доларів
800 доларів США
зелених - 900 доларів
$teal#20c997
100 доларів США
200 доларів США
300 доларів США
400 доларів США
500 доларів США
600 доларів США
700 доларів США
800 доларів США
900 доларів США
$блакитний#0dcaf0
$cyan-100
200 доларів США
300 доларів США
$cyan-400
500 доларів США
600 доларів США
$cyan-700
$cyan-800
900 доларів США
сірий-500$#adb5bd
сірий-100$
сірий-200$
сірий-300$
сірий-400$
сірий-500$
сірий-600$
сірий-700$
сірий-800$
сірий-900$
$чорний#000
$білий#fff

Нотатки про Sass

Sass не може програмно генерувати змінні, тому ми самі вручну створили змінні для кожного відтінку. Ми вказуємо середнє значення (наприклад, $blue-500) і використовуємо власні функції кольору, щоб відтінити (освітлити) або затінити (темніти) наші кольори за допомогою mix()функції кольору Sass.

Використання mix()не те саме, що lighten()і darken()— перше змішує вказаний колір із білим або чорним, тоді як останнє регулює лише значення освітленості кожного кольору. Результатом є набагато повніший набір кольорів, як показано в цій демонстрації CodePen .

Наші функції tint-color()та shade-color()використовуються mix()разом із нашою $theme-color-intervalзмінною, яка вказує ступінчасте відсоткове значення для кожного створеного нами змішаного кольору. Перегляньте файли scss/_functions.scssта scss/_variables.scssдля повного вихідного коду.

Кольорові карти Sass

Вихідні файли Sass Bootstrap містять три карти, які допоможуть вам швидко та легко переглядати список кольорів та їх шістнадцяткові значення.

  • $colorsмістить список усіх доступних базових ( 500) кольорів
  • $theme-colorsперераховує всі семантично названі кольори теми (показано нижче)
  • $graysперелічує всі відтінки та відтінки сірого

У scss/_variables.scssньому ви знайдете колірні змінні Bootstrap і карту Sass. Ось приклад $colorsкарти Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Додайте, видаліть або змініть значення на карті, щоб оновити спосіб їх використання в багатьох інших компонентах. На жаль, зараз не кожен компонент використовує цю карту Sass. Подальші оновлення намагатимуться покращити це. До того часу плануйте використовувати ${color}змінні та цю карту Sass.

приклад

Ось як ви можете використовувати їх у своєму Sass:

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

Допоміжні класи кольору та фону також доступні для налаштування colorта background-colorвикористання 500значень кольорів.

Генерація утиліт

Додано у v5.1.0

Bootstrap не включає утиліти colorдля background-colorкожної змінної кольору, але ви можете створити їх самостійно за допомогою нашого API утиліти та наших розширених карт Sass, доданих у v5.1.0.

  1. Для початку переконайтеся, що ви імпортували наші функції, змінні, міксини та утиліти.
  2. Використовуйте нашу map-merge-multiple()функцію, щоб швидко об’єднати декілька карт Sass у нову карту.
  3. Об’єднайте цю нову об’єднану карту, щоб розширити будь-яку утиліту за допомогою {color}-{level}імені класу.

Ось приклад, який генерує утиліти кольору тексту (наприклад, .text-purple-500) за допомогою наведених вище кроків.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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";

Це створить нові .text-{color}-{level}утиліти для кожного кольору та рівня. Ви можете зробити те саме для будь-якої іншої комунальної власності та власності.