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,
  "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значень кольорів.