Цвета и фоны
В Bootstrap восемь именованных цветов темы. Имя цвета описывает его роль, а не оттенок: danger — опасное действие, success — успех. Благодаря этому одни и те же классы подходят для кнопок, текста, фона и рамок, а палитру потом можно поменять в одном месте.
Цвета темы
| Имя | Назначение |
|---|---|
primary | Главный цвет, основные действия |
secondary | Второстепенное |
success | Успех, готово |
danger | Ошибка, удаление |
warning | Предупреждение |
info | Справка |
light, dark | Светлый и тёмный |
Цвет текста и фона
Классы text-{цвет} красят текст, bg-{цвет} — фон:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="text-success">Задача выполнена</p>
<p class="text-danger">Срок истёк</p>
<div class="bg-primary text-white p-3">Синий блок с белым текстом</div>Первые две строки цветные, а синий блок с белым текстом подходит для заметного баннера.
Фон с подходящим текстом
Подбирать цвет текста к фону вручную не нужно: классы text-bg-{цвет} задают фон и контрастный текст сразу.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-bg-warning p-2 mb-2">Жёлтый фон, тёмный текст</div>
<div class="text-bg-dark p-2">Тёмный фон, светлый текст</div>На жёлтом фоне текст тёмный, на тёмном — светлый: Bootstrap выбрал их сам.
Приглушённые оттенки
Для спокойных плашек есть светлые варианты фона bg-{цвет}-subtle и тёмный текст к ним text-{цвет}-emphasis:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="bg-success-subtle text-success-emphasis p-3 rounded">
Оплата получена: $49.00
</div>Светло-зелёная плашка с тёмно-зелёным текстом выглядит мягче, чем яркая bg-success.
Цвета страницы
Для нейтральных частей интерфейса есть цвета, которые сами подстраиваются под светлую и тёмную тему:
| Класс | Что даёт |
|---|---|
text-body-secondary | Серый поясняющий текст |
text-body-emphasis | Самый контрастный текст |
bg-body-tertiary | Слегка серый фон для панелей и шапки |
bg-body | Фон страницы |
Прозрачность
Классы bg-opacity-* и text-opacity-* со значениями 10, 25, 50 и 75 делают цвет полупрозрачным: bg-primary bg-opacity-25 — бледно-синий фон.
Частая ошибка
Передавать смысл только цветом: красный текст «ошибка», зелёный «готово». Человек с нарушением цветового зрения разницы не увидит, а программа чтения с экрана цвет не озвучивает. Добавляйте слово или значок: «Ошибка: срок истёк», а не просто красная дата.