Frontend
Быстрый старт в Bootstrap 5: Утилиты и кастомизация #4
admin toni_wheel
Иконка календаря 07.05.2025
Иконка чата 0
Иконка глаза 1 196
 

Bootstrap предлагает обширный набор утилит-классов для быстрой стилизации без написания CSS. Это классы для отступов, цветов, теней, обтекания и прочего. Рассмотрим ключевые из них.

Утилиты отступов и размеров в Bootstrap

Bootstrap предоставляет удобные утилитные классы для управления отступами — внешними (margin) и внутренними (padding). Это помогает быстро настраивать расстояния между и внутри элементов без написания CSS вручную.

Эти классы универсальны и следуют единой структуре. Они особенно полезны при создании адаптивных интерфейсов, где важна гибкость и читаемость.

Общий синтаксис классов

Классы строятся по следующему шаблону:

{тип}{сторона}-{размер}
Часть Обозначение Описание
тип m или p m — внешний отступ (margin), p — внутренний отступ (padding)
сторона t, b, s, e, x, y Конкретная сторона: t (top), b (bottom), s (start), e (end), x (по горизонтали), y (по вертикали), без указания — все стороны
размер 0 до 5 Числовой уровень отступа (шаги по умолчанию описаны ниже)

Размеры отступов

Числа от 0 до 5 соответствуют фиксированным значениям:

Значение Размер в rem (по умолчанию)
0 0
1 0.25rem
2 0.5rem
3 1rem
4 1.5rem
5 3rem

Эти значения можно изменить через настройки Sass переменных, если вы кастомизируете Bootstrap.

Примеры классов и их действия

Класс Значение Что делает
mt-3 Margin Top = 1rem Отступ сверху
p-2 Padding All Sides = 0.5rem Внутренние отступы со всех сторон
px-4 Padding X (left & right) = 1.5rem Внутренние отступы по горизонтали
ms-1 Margin Start (start/left) = 0.25rem Внешний отступ слева
mb-0 Margin Bottom = 0 Убирает нижний отступ
py-5 Padding Y (top & bottom) = 3rem Внутренние отступы сверху и снизу

Примеры HTML с отступами

<!-- Пример 1: Внешний отступ снизу и внутренний отступ -->
<div class="mb-4 p-3 border">
  Элемент с отступом снизу и внутренним паддингом
</div>

<!-- Пример 2: Внешний и внутренний отступ слева -->
<div class="ms-2 ps-4 border">
  Элемент с отступом слева и дополнительным внутренним отступом
</div>

Утилиты gap для Flexbox и Grid

Если вы используете Flexbox или CSS Grid, вы можете задавать промежутки между элементами с помощью gap. Это особенно удобно для создания карточек, сеток и списков.

Класс Что делает
gap-{n} Устанавливает отступ между всеми элементами
row-gap-{n} Устанавливает вертикальный промежуток
column-gap-{n} Устанавливает горизонтальный промежуток

Пример использования:

<div class="d-grid gap-3">
  <div class="p-2 border">Элемент 1</div>
  <div class="p-2 border">Элемент 2</div>
</div>

Утилиты для цветов, фона и теней в Bootstrap

Bootstrap предоставляет широкий набор классов-утилит для управления цветом текста, фоном, тенями, а также другими визуальными и структурными свойствами — без написания кастомного CSS.

Цвет текста и фона

Для задания цвета текста и фона используются классы следующего формата:

Тип класса Формат Что делает
Цвет текста .text-{color} Изменяет цвет текста
Цвет фона .bg-{color} Устанавливает цвет фона

Доступные цветовые значения

Это так называемые контекстуальные цвета:

Цветовая роль Пример Описание
primary .text-primary Основной (обычно синий)
secondary .bg-secondary Вторичный (серый)
success .bg-success Успешное действие (зеленый)
danger .text-danger Ошибка/опасность (красный)
warning .bg-warning Предупреждение (желтый/оранжевый)
info .bg-info Информационный (голубой)
light .bg-light Светлый фон
dark .text-dark Темный текст
body .text-body Основной цвет текста
muted .text-muted Приглушенный серый текст

Цвета соответствуют предопределённым CSS-переменным Bootstrap и поддерживают тёмную тему.

Subtle-утилиты (Bootstrap 5.3+)

Добавлены мягкие, ненасыщенные цвета для фона и границ:

Класс Описание
.bg-primary-subtle Светлый вариант основного цвета фона
.border-danger-subtle Светлая красная рамка
.bg-success-subtle Светлый зелёный фон

Примеры HTML:

<!-- Ошибочное сообщение -->
<p class="text-danger">Важное сообщение об ошибке.</p>

<!-- Голубой фон и белый текст -->
<div class="p-3 mb-2 bg-info text-white">
  Пример блока с голубым фоном.
</div>

<!-- Светлый зеленый фон -->
<div class="bg-success-subtle p-3 border">
  Мягкий фон успеха
</div>

Утилиты для теней

Bootstrap позволяет добавлять тени к элементам с помощью классов:

Класс Описание
.shadow Стандартная тень
.shadow-sm Маленькая тень
.shadow-lg Крупная тень
.shadow-none Убирает тень

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

Пример тени:

<div class="shadow p-3 bg-body-tertiary rounded">
  Блок с небольшой тенью
</div>

Другие полезные утилиты

Bootstrap включает множество дополнительных классов:

Класс Что делает
.border Добавляет рамку
.rounded Скругляет углы
.d-flex Делает элемент flex-контейнером
.d-none Скрывает элемент
.text-center Центрирует текст по горизонтали
.opacity-50 Делает элемент полупрозрачным (50%)

Все они входят в раздел Utilities и предназначены для быстрой настройки внешнего вида без написания кастомного CSS.

Кастомизация темы и цветов в Bootstrap 5.3+

Bootstrap специально спроектирован так, чтобы вы могли гибко адаптировать стили под собственный бренд или проект — как с помощью Sass, так и через CSS-переменные. Это позволяет менять внешний вид без необходимости полностью переписывать стили.

Настройка через Sass-переменные (при сборке)

Если вы работаете с исходниками Bootstrap (.scss), вы можете переопределить переменные до подключения Bootstrap:

Примеры Sass-переменных:

Переменная Назначение
$primary Основной цвет интерфейса
$font-size-base Базовый размер шрифта
$body-bg Цвет фона по умолчанию
$border-radius Скругление углов компонентов

Пример:

$primary: #ff5722;
$font-size-base: 1rem;

@import "bootstrap";

После этого необходимо скомпилировать Sass в CSS.

Кастомизация через CSS-переменные (без сборки)

Начиная с Bootstrap 5.3, большинство стилей используют CSS Custom Properties, которые можно переопределять прямо в своем CSS или внутри тега style в HTML. Это позволяет менять цвета "на лету", без пересборки.

Синтаксис:

:root {
  --bs-primary: #ff5722;
  --bs-success: #4caf50;
}
Переменная Что изменяет
--bs-primary Основной цвет (.bg-primary, .text-primary)
--bs-success Цвет успеха (.bg-success, .text-success)
--bs-body-color Цвет текста по умолчанию
--bs-body-bg Цвет фона по умолчанию

Переключение темы (тёмная/светлая)

Bootstrap 5.3 позволяет динамически переключать тему через HTML-атрибут:

Пример:

<html lang="ru" data-bs-theme="dark">
  ...
</html>
Атрибут Режим интерфейса
data-bs-theme="light" Светлая тема (по умолчанию)
data-bs-theme="dark" Тёмная тема

Это работает во всех компонентах: фоны, тексты, кнопки и т.д. автоматически подстраиваются.

Создание собственной темы

Вы можете создать собственную тему, просто указав своё имя:

<html data-bs-theme="custom-theme">

Затем в CSS добавьте кастомные переменные только для этой темы:

[data-bs-theme="custom-theme"] {
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  --bs-primary: #ff9800;
}

Теперь при переключении data-bs-theme="custom-theme" весь интерфейс адаптируется под ваши стили.

Локальные переменные компонентов

Каждый крупный компонент Bootstrap (например, .btn, .navbar, .alert) имеет локальные переменные, которые можно настроить независимо.

Пример:

.btn-primary {
  --bs-btn-bg: #ff5722;
  --bs-btn-border-color: #e64a19;
}

Это меняет только кнопки с классом .btn-primary, не затрагивая остальную тему.

Пример полной HTML-структуры с кастомной темой:

<html lang="ru" data-bs-theme="custom-theme">
  <head>
    <style>
      [data-bs-theme="custom-theme"] {
        --bs-body-bg: #1a1a1a;
        --bs-body-color: #f5f5f5;
        --bs-primary: #ff5722;
      }
    </style>
  </head>
  <body class="bg-body text-body">
    <h1 class="text-primary">Привет, мир!</h1>
    <button class="btn btn-primary">Кнопка</button>
  </body>
</html>

Комментарии

0

Без регистрации и смс