0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Цвет - важная особенность дизайна и всего Bootstrap. Если открыть любой дизайн-документ крупной компании, то можно увидеть, что цвету и его использованию уделяется много внимания.</p>
1
<p>Цвет - важная особенность дизайна и всего Bootstrap. Если открыть любой дизайн-документ крупной компании, то можно увидеть, что цвету и его использованию уделяется много внимания.</p>
2
<p>Хороший дизайн легко "убить" плохим цветом. Также с помощью цвета можно запутать пользователя. Например, если кнопка "Принять" станет красной, а "Отменить" - зеленой. Посмотрите в примере на<a>CodePen</a>.</p>
2
<p>Хороший дизайн легко "убить" плохим цветом. Также с помощью цвета можно запутать пользователя. Например, если кнопка "Принять" станет красной, а "Отменить" - зеленой. Посмотрите в примере на<a>CodePen</a>.</p>
3
<p>Это все относится к дизайну и пользовательскому поведению. И чтобы не испортить интерфейс, важно уметь правильно работать с цветом внутри экосистемы Bootstrap.</p>
3
<p>Это все относится к дизайну и пользовательскому поведению. И чтобы не испортить интерфейс, важно уметь правильно работать с цветом внутри экосистемы Bootstrap.</p>
4
<p>В этом уроке мы разберем, как формируется основная тема Bootstrap и как реализовать темную и светлую тему.</p>
4
<p>В этом уроке мы разберем, как формируется основная тема Bootstrap и как реализовать темную и светлую тему.</p>
5
<h2>Устройство цветовой схемы Bootstrap</h2>
5
<h2>Устройство цветовой схемы Bootstrap</h2>
6
<p>В Bootstrap есть восемь основных цветов:</p>
6
<p>В Bootstrap есть восемь основных цветов:</p>
7
<ul><li>Primary</li>
7
<ul><li>Primary</li>
8
<li>Secondary</li>
8
<li>Secondary</li>
9
<li>Success</li>
9
<li>Success</li>
10
<li>Danger</li>
10
<li>Danger</li>
11
<li>Warning</li>
11
<li>Warning</li>
12
<li>Info</li>
12
<li>Info</li>
13
<li>Light</li>
13
<li>Light</li>
14
<li>Dark</li>
14
<li>Dark</li>
15
</ul><p>Пример на<a>CodePen</a>.</p>
15
</ul><p>Пример на<a>CodePen</a>.</p>
16
<p>В этих названиях нет привязки к конкретным цветам. Здесь переданы семантические - смысловые названия. Такой подход пришел из мира дизайна, где привычно использовать основной, второстепенный и другие цвета, а не просто синий, желтый, серый.</p>
16
<p>В этих названиях нет привязки к конкретным цветам. Здесь переданы семантические - смысловые названия. Такой подход пришел из мира дизайна, где привычно использовать основной, второстепенный и другие цвета, а не просто синий, желтый, серый.</p>
17
<p>Это позволяет менять цветовую схему и не боятся нарушения логики в названиях. Если синий цвет primary поменяется на оранжевый, то он не перестанет быть "основным цветом".</p>
17
<p>Это позволяет менять цветовую схему и не боятся нарушения логики в названиях. Если синий цвет primary поменяется на оранжевый, то он не перестанет быть "основным цветом".</p>
18
<p>Рассмотрим, как цветовая схема указывается внутри Bootstrap. Все цвета записываются через переменные и хранятся в файле _<em>variables.scss</em>:</p>
18
<p>Рассмотрим, как цветовая схема указывается внутри Bootstrap. Все цвета записываются через переменные и хранятся в файле _<em>variables.scss</em>:</p>
19
<p>На этом примере видно, что цвета формируются из уже готовых переменных, которые потом попадают в массив $theme-colors. Проследим, как появился цвет Secondary:</p>
19
<p>На этом примере видно, что цвета формируются из уже готовых переменных, которые потом попадают в массив $theme-colors. Проследим, как появился цвет Secondary:</p>
20
<p>Основной путь цвета от его первого появления до появления в теме выглядит так:</p>
20
<p>Основной путь цвета от его первого появления до появления в теме выглядит так:</p>
21
<ol><li>Определение цвета. $gray-600: #6c757d;</li>
21
<ol><li>Определение цвета. $gray-600: #6c757d;</li>
22
<li>Указание цвета в смысловой переменной. $secondary: $gray-600;</li>
22
<li>Указание цвета в смысловой переменной. $secondary: $gray-600;</li>
23
<li>Добавление цвета в массив $theme-colors</li>
23
<li>Добавление цвета в массив $theme-colors</li>
24
</ol><p>Второй и третий пункты - самые важные. Bootstrap не ограничивает, как именно появится цвет в переменной $secondary. Это может происходить по-разному.</p>
24
</ol><p>Второй и третий пункты - самые важные. Bootstrap не ограничивает, как именно появится цвет в переменной $secondary. Это может происходить по-разному.</p>
25
<p>Например, для серого цвета все определено "в лоб", то есть напрямую указаны цвета в формате HEX без использования различных функций или миксинов. Некоторые цвета генерируются автоматически, например, так выглядит синий цвет и его вариации от темного к светлому:</p>
25
<p>Например, для серого цвета все определено "в лоб", то есть напрямую указаны цвета в формате HEX без использования различных функций или миксинов. Некоторые цвета генерируются автоматически, например, так выглядит синий цвет и его вариации от темного к светлому:</p>
26
<p>Для осветленных значений (от blue-100 до blue-400) используется функция tint-color(), которая смешивает передаваемый цвет и белый. Для затемненных значений используется функция shade-color(), которая смешивает передаваемый цвет с черным. Это встроенные в Bootstrap функции. Их можно использовать для создания своих цветовых схем.</p>
26
<p>Для осветленных значений (от blue-100 до blue-400) используется функция tint-color(), которая смешивает передаваемый цвет и белый. Для затемненных значений используется функция shade-color(), которая смешивает передаваемый цвет с черным. Это встроенные в Bootstrap функции. Их можно использовать для создания своих цветовых схем.</p>
27
<p>Попробуйте открыть файл _<em>variables.scss</em>и проследить, как появились остальные цвета в массиве $theme-colors. Теперь можно создать свою тему для Bootstrap. Для этого нам нужно будет изменить уже готовые цвета в Bootstrap.</p>
27
<p>Попробуйте открыть файл _<em>variables.scss</em>и проследить, как появились остальные цвета в массиве $theme-colors. Теперь можно создать свою тему для Bootstrap. Для этого нам нужно будет изменить уже готовые цвета в Bootstrap.</p>
28
<h2>Создание своей цветовой схемы</h2>
28
<h2>Создание своей цветовой схемы</h2>
29
<p>Создадим новую цветовую схему с помощью пастельных цветов.</p>
29
<p>Создадим новую цветовую схему с помощью пастельных цветов.</p>
30
<p>В этом уроке не будем останавливаться на том, как правильно выбирать цвета. Но можно использовать сервисы с палитрами цветов. Например,<a>Color Hunt</a>.</p>
30
<p>В этом уроке не будем останавливаться на том, как правильно выбирать цвета. Но можно использовать сервисы с палитрами цветов. Например,<a>Color Hunt</a>.</p>
31
<p>Воспользуемся такой палитрой цветов:</p>
31
<p>Воспользуемся такой палитрой цветов:</p>
32
<p>В этом примере у нас уже есть конкретные вариации цветов, поэтому не будем использовать генерацию с помощью различных SASS-функций.</p>
32
<p>В этом примере у нас уже есть конкретные вариации цветов, поэтому не будем использовать генерацию с помощью различных SASS-функций.</p>
33
<p>Создадим новый массив с цветовой схемой и заменим переменные $primary, $secondary и так далее. В этом случае не затрагиваются старые цветовые схемы и можно быстро откатиться в случае необходимости.</p>
33
<p>Создадим новый массив с цветовой схемой и заменим переменные $primary, $secondary и так далее. В этом случае не затрагиваются старые цветовые схемы и можно быстро откатиться в случае необходимости.</p>
34
<p>Все изменения внесем в кастомный SASS-файл, чтобы не изменять оригинальный файл Bootstrap:</p>
34
<p>Все изменения внесем в кастомный SASS-файл, чтобы не изменять оригинальный файл Bootstrap:</p>
35
<p>Подключим файл с цветами и сам фреймворк к нашему проекту:</p>
35
<p>Подключим файл с цветами и сам фреймворк к нашему проекту:</p>
36
<p>После компиляции цветовая схема сменится.</p>
36
<p>После компиляции цветовая схема сменится.</p>
37
<p>Так выглядит предыдущий пример с<a>новыми цветами</a>.</p>
37
<p>Так выглядит предыдущий пример с<a>новыми цветами</a>.</p>
38
<p>Изменение основных цветов также переопределило цвет надписей на блоках. Это высчитывается автоматически внутри Bootstrap, и менять самостоятельно это не стоит.</p>
38
<p>Изменение основных цветов также переопределило цвет надписей на блоках. Это высчитывается автоматически внутри Bootstrap, и менять самостоятельно это не стоит.</p>
39
<h2>Выводы</h2>
39
<h2>Выводы</h2>
40
<p>В этом уроке мы изучили, из чего состоит цветовая схема Bootstrap. В ее основе лежит восемь цветов:</p>
40
<p>В этом уроке мы изучили, из чего состоит цветовая схема Bootstrap. В ее основе лежит восемь цветов:</p>
41
<ul><li>Primary</li>
41
<ul><li>Primary</li>
42
<li>Secondary</li>
42
<li>Secondary</li>
43
<li>Success</li>
43
<li>Success</li>
44
<li>Danger</li>
44
<li>Danger</li>
45
<li>Warning</li>
45
<li>Warning</li>
46
<li>Info</li>
46
<li>Info</li>
47
<li>Light</li>
47
<li>Light</li>
48
<li>Dark</li>
48
<li>Dark</li>
49
</ul><p>Эти цвета имеют семантическое название. Это позволяет не привязываться к конкретным цветам и не путаться при изменении цветовой схемы.</p>
49
</ul><p>Эти цвета имеют семантическое название. Это позволяет не привязываться к конкретным цветам и не путаться при изменении цветовой схемы.</p>
50
<p>Чтобы изменить цветовую схему, достаточно поменять переменные цветов внутри Bootstrap:</p>
50
<p>Чтобы изменить цветовую схему, достаточно поменять переменные цветов внутри Bootstrap:</p>
51
<ul><li>$primary</li>
51
<ul><li>$primary</li>
52
<li>$secondary</li>
52
<li>$secondary</li>
53
<li>$success</li>
53
<li>$success</li>
54
<li>$danger</li>
54
<li>$danger</li>
55
<li>$warning</li>
55
<li>$warning</li>
56
<li>$info</li>
56
<li>$info</li>
57
<li>$light</li>
57
<li>$light</li>
58
<li>$dark</li>
58
<li>$dark</li>
59
</ul><p>После компиляции фреймворка цвета внутри всех компонентов автоматически заменятся.</p>
59
</ul><p>После компиляции фреймворка цвета внутри всех компонентов автоматически заменятся.</p>