Bootstrap — компонентный CSS-фреймворк

Bootstrap — самый известный CSS-фреймворк: готовые кнопки, сетка, формы и модальные окна на лету. В этом уроке ты соберёшь страницу из готовых компонентов, подключишь Bootstrap через CDN и научишься перекрашивать его под свой бренд.

Уровень: начальный 18 разделов 3–4 часа

1. Что такое Bootstrap

Bootstrap — библиотека готовых CSS-стилей и JS-компонентов. В отличие от утилитарного Tailwind, она поставляет «из коробки» полноценные кнопки, навигацию, карточки и формы — достаточно написать нужную разметку с классами. Часть задач фреймворк решает сам, а свойства кастомизируются через переменные.

<!-- Кнопка из двух слов вместо десяти правил CSS -->
<button class="btn btn-primary">Сохранить</button>
<button class="btn btn-outline-danger">Удалить</button>

<!-- Готовый бейдж -->
<span class="badge text-bg-success">Активен</span>

Bootstrap 5 не требует jQuery, работает с современным JavaScript и поддерживает RTL-вёрстку для арабского и иврита. Начинать с него проще всего: результат виден с первой минуты.

2. Подключение: CDN и npm

Быстрый старт — это CSS в <head> и JS-бандл перед закрытием </body>. Компоненты вроде модальных окон и каруселей работают на этом JS.

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
<body>
  <!-- контент страницы -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

Для серьёзного проекта Bootstrap ставят через npm и собирают вместе с Vite или Webpack, чтобы получить кастомизированный CSS и отобрать только нужное.

npm install bootstrap @popperjs/core

// main.js (Vite)
import 'bootstrap/dist/css/bootstrap.min.css'
import * as bootstrap from 'bootstrap'

JS-бандл отвечает за интерактивность компонентов. Если скрипт подключить раньше разметки, модальные окна и вкладки «не стартуют». Общий рецепт: подключать bundle в самом конце body.

3. Сетка container / row / col

Сетка Bootstrap — 12 колонок. Контейнер центрирует контент, ряд row превращает колонки в flex-строку, а col делит ширину. Брейкпоинт в имени класса отвечает за поведение на конкретной ширине экрана.

<div class="container">
  <div class="row">
    <div class="col-md-6">Левая колонка</div>
    <div class="col-md-6">Правая колонка</div>
  </div>

  <!-- три равные части на десктопе, одна на мобильном -->
  <div class="row">
    <div class="col-12 col-md-4">Карточка 1</div>
    <div class="col-12 col-md-4">Карточка 2</div>
    <div class="col-12 col-md-4">Карточка 3</div>
  </div>
</div>

Брейкпоинт	Минимум	Классы
xs (по умолчанию)	0px	col-4
sm	576px	col-sm-4
md	768px	col-md-4
lg	992px	col-lg-4
xl	1200px	col-xl-4
xxl	1400px	col-xxl-4

Класс col-auto делает колонку по размеру контента, а row-cols-3 задаёт сразу число колонок на ряд — удобно для галерей без лишней арифметики.

4. Утилиты: отступы, цвета, flex

Утилиты Bootstrap дублируют большинство свойств CSS короткими классами: m-2, p-3, bg-primary, d-flex.

<!-- отступы: размеры 0..5 и авто -->
<div class="p-4 mb-3 mt-auto">Внутренние и внешние отступы</div>

<!-- цвета фона и текста -->
<div class="bg-primary text-white rounded p-3">Синяя плашка</div>
<div class="bg-warning text-dark rounded p-3">Жёлтая плашка</div>

<!-- flex-раскладка -->
<nav class="d-flex justify-content-between align-items-center p-3 bg-light">
  <strong>Логотип</strong>
  <button class="btn btn-primary btn-sm">Войти</button>
</nav>

Короткие имена сторон читаются по буквам: ms-* — margin слева, pe-* — padding справа, mx-auto — автоотступы по горизонтали. Формула: p/m + сторона (s, e, x, y, t, b).

5. Кнопки, бейджи и карточки

Кнопка — это всегда класс btn плюс вариант: сплошной, контурный, маленький или большой. Карточку собирают из card, card-body, card-title и card-text.

<div class="card" style="width: 18rem;">
  <img src="photo.jpg" class="card-img-top" alt="Фото товара">
  <div class="card-body">
    <h5 class="card-title">Клавиатура</h5>
    <p class="card-text">Механическая, с русской раскладкой.</p>
    <span class="badge text-bg-success">В наличии</span>
    <a href="#" class="btn btn-primary mt-2">В корзину</a>
  </div>
</div>

Вариант	Класс	Назначение
основная	btn-primary	главное действие
вторичная	btn-secondary	нейтральное действие
контурная	btn-outline-*	без заливки
успех	btn-success	подтверждение
опасная	btn-danger	удаление, ошибка
крупная / мелкая	btn-lg / btn-sm	размер

Кнопку-иконку делай элементом <a role="button"> или настоящим <button>, чтобы её можно было активировать с клавиатуры. Не используй для этого div.

6. Навигация и пагинация

Навигация строится из nav nav-tabs или nav nav-pills, а шапка с меню — из компонента navbar. Пагинация — это список pagination с пунктами page-item.

<nav class="navbar navbar-expand-lg bg-body-tertiary px-3">
  <a class="navbar-brand" href="#">Мой магазин</a>
  <div class="collapse navbar-collapse" id="mainMenu">
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Главная</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Каталог</a></li>
    </ul>
    <button class="btn btn-primary">Корзина</button>
  </div>
</nav>

<ul class="pagination mt-4">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

Для мобильной версии навбара не забывай кнопку-«бургер» с атрибутом data-bs-toggle="collapse" и совпадающим id у меню — без них на телефоне меню не раскроется.

7. Формы и валидация

Полям добавляют класс form-control, подписи — form-label, а обёртке — mb-3. Bootstrap умеет подсвечивать валидные и невалидные значения без сложного JavaScript.

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="name" class="form-label">Имя</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">Пожалуйста, укажите имя</div>
  </div>
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Нужен корректный email</div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Отправить</button>
  </div>
</form>

// Включение встроенной валидации
const form = document.querySelector('.needs-validation')
form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault()
    event.stopPropagation()
  }
  form.classList.add('was-validated')
})

Для переключателей используй form-switch, чтобы получить современный вид свитчера вместо старого чекбокса.

8. Модальные окна, карусель и аккордеон

Интерактивные компоненты управляются атрибутами data-bs-toggle, data-bs-target и data-bs-ride. Разметка описательная, менять поведение легко.

<!-- Кнопка, открывающая модальное окно -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Открыть окно
</button>

<!-- Само окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Подтверждение</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Точно удалить товар из корзины?</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-danger">Удалить</button>
      </div>
    </div>
  </div>
</div>

Карусель

<div id="carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide-1.jpg" class="d-block w-100" alt="Первый слайд">
    </div>
    <div class="carousel-item">
      <img src="slide-2.jpg" class="d-block w-100" alt="Второй слайд">
    </div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#carousel" data-bs-slide="prev"></button>
  <button class="carousel-control-next" data-bs-target="#carousel" data-bs-slide="next"></button>
</div>

Аккордеон

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse"
              data-bs-target="#q1">Как оплатить?</button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show"
         data-bs-parent="#faq">
      <div class="accordion-body">Картой, СБП или наличными при доставке.</div>
    </div>
  </div>
</div>

Всем интерактивным компонентам нужен уникальный id, на который ссылается data-bs-target. Два окна с одним id — и браузер откроет первое из них в любом месте страницы.

9. Темы и кастомизация через SCSS

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

// custom.scss
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/maps';

$primary: #7c3aed;
$enable-rounded: true;
$border-radius: 0.75rem;
$font-family-base: "Inter", sans-serif;

@import 'bootstrap/scss/bootstrap';

Если проект подключён через CDN, тёмная тема включается атрибутом data-bs-theme="dark" на корневом <html> — без пересборки и переписывания стилей.

10. Продвинутые компоненты и производительность

Bootstrap умеет больше, чем кажется на первый взгляд: всплывающие подсказки tooltip, поповеры, вкладки nav-tabs и оффканвас-панели. Производительность «из коробки» при этом посредственная: полный CSS весит около 200 КБ, поэтому в продакшене стоит отбрасывать лишнее.

<!-- Всплывающая подсказка (нужен JS-инициализатор) -->
<button class="btn btn-secondary" data-bs-toggle="tooltip"
        data-bs-placement="top" title="Показать детали">
  i
</button>

<!-- Оффканвас: выезжающая боковая панель -->
<button class="btn btn-primary" data-bs-toggle="offcanvas"
        data-bs-target="#cartPanel">Корзина</button>
<div class="offcanvas offcanvas-end" id="cartPanel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Корзина</h5>
  </div>
  <div class="offcanvas-body">Здесь будут товары</div>
</div>

// Инициализация tooltip-ов
import * as bootstrap from 'bootstrap'
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach((el) => new bootstrap.Tooltip(el))

В сборке через Vite подключай только нужные JS-модули: import { Modal, Collapse } from 'bootstrap'. Это в разы уменьшает бандл по сравнению с bootstrap.bundle.min.js.

11. Кастомизация темы через Sass

Bootstrap собран на Sass, поэтому фирменные цвета, шрифты и скругления настраиваются переменными до компиляции — так вы получаете «своё» вместо сине-фиолетового «as is». Такое переопределение не требует поиска перекрывающих правил в CSS.

// custom.scss — переопределяем переменные БЕЗ компромиссов
// 1) стандартные импорты
@import "bootstrap/functions";
@import "bootstrap/variables";

// 2) СВОИ значения
$primary: #7c3aed;
$enable-rounded: true;
$border-radius: 0.75rem;
$font-family-base: "Inter", sans-serif;

// 3) полный стиль
@import "bootstrap/bootstrap.scss";

порядок импортов важен: переопределять можно только после variables и до подключения стилей;
карта $theme-colors собирает всю палитру из $primary, $success и т.д.;
частичную сборку (только grid + utilities) делают через @import "bootstrap/reboot"… — так вес CSS падает в разы.

Если проект не использует Sass-сборку, тему можно поменять и через CSS-переменные (v5): :root { --bs-primary: ... } — быстро, но с ограничениями.

12. Breakpoint-ы и адаптивность

Bootstrap делит экраны на 6 брейкпоинтов (от xs до xxl). Адаптивность строится на суффиксах классов: col-md-6 значит «6 колонок от планшета и шире».

Суффикс	Минимальная ширина	Типичное устройство
sm	576px	телефон ландшафт
md	768px	планшет
lg	992px	ноутбук
xl	1200px	десктоп
xxl	1400px	широкий монитор

<div class="row">
  <div class="col-12 col-md-6 col-xl-4">Карточка 1</div>
  <div class="col-12 col-md-6 col-xl-4">Карточка 2</div>
  <div class="col-12 col-md-6 col-xl-4">Карточка 3</div>
</div>

Правило «снизу вверх»: сначала базовый слой под телефон, затем расширения через медиа-квари на min-width. Bootstrap по умолчанию именно так и работает.

13. Утилиты: spacing, flexbox, display

Утилиты Bootstrap — классы в одну строку (margin, padding, flex, позиционирование) — позволяют верстать без кастомного CSS в 9 из 10 случаев.

<div class="d-flex justify-content-between align-items-center p-3">
  <h3>Заголовок</h3>
  <button class="btn btn-primary ms-auto">Действие</button>
</div>

// p-3 — паддинг уровня 3 (1rem), ms-auto — отступ слева авто

Префикс	Свойство	Пример
m/mt/mb/ms/me	margin	mt-2
p/pt/pb/ps/pe	padding	py-4
d-	display	d-none d-md-block
flex/justify/align	flexbox	justify-content-center
w-/h-	ширина/высота	w-50
text-/bg-	текст/фон	text-danger bg-light

Не злоупотребляйте !important: Bootstrap утилиты сами используют его, а кастомные правила «поверх» делают css-документ неуправляемым.

14. Доступность (a11y) и семантика

Хорошая вёрстка — доступная вёрстка. Bootstrap помогает из коробки: роли, aria-*, фокусировка в модалках и навигация с клавиатуры.

<!-- Модальное окно с ролью dialog и aria-атрибутами -->
<div class="modal fade" id="exampleModal" tabindex="-1"
     aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Подтверждение</h5>
        ...
      </div>
    </div>
  </div>
</div>

контраст текста на фоне: минимум 4.5:1 для обычного текста;
для иконок-кнопок добавляйте aria-label или видимый текст;
проверяйте фокус-катки через Tab и скип-ссылки .visually-hidden.

Инструменты проверки: Lighthouse, axe DevTools, WAVE. Прогоните одну страницу — найдёте 90% проблем доступности за 10 минут.

15. Bootstrap Icons

Bootstrap приносит не только компоненты, но и шрифтовые иконки — Bootstrap Icons. Они встраиваются как обычные SVG, легко меняют размер и цвет и работают внутри кнопок, форм и навигации.

<i class="bi bi-cart"></i>
<button class="btn btn-primary">
  <svg class="bi" width="16" height="16" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#cart" />
  </svg> Купить
</button>

подключаются CSS + шрифт, либо инлайн-SVG без CSS;
цвет наследуется через fill="currentColor";
иконки в grid: d-flex + bi me-2;
каталог иконок — на сайте Bootstrap Icons;
авто-подстановка в кнопки и выпадающие списки.

Используйте SVG-вариант вместо иконочного шрифта, если нужна чёткость на ретине и кастомизация заполнения — так иконки не «размываются».

16. Тёмная тема и data-bs-theme

Bootstrap 5.3 поддерживает переключение тёмной темы on the fly: атрибут data-bs-theme на элементе перекрашивает карточки, формы и навбары без перезагрузки.

<html lang="ru" data-bs-theme="dark">
<!-- компоненты автоматически станут тёмными -->

/* переключатель в JS */
document.documentElement.setAttribute('data-bs-theme', 'dark');

работает на html, body или отдельном блоке;
переменные тёмной темы переопределяют --bs-body-bg;
сохраняйте выбор в localStorage — пользователи не любят повторять;
не забывайте проверять контраст в обеих темах.

Не комбинируйте data-bs-theme со старыми «тёмными классами» утилит: они конфликтуют. Выбирайте один механизм переключения.

17. Анимации и микро-взаимодействия

Живые переходы делают интерфейс отзывчивым: сворачивание аккордеонов, мягкие hover, щиты появления. Bootstrap привозит базу (collapse, fade), остальное — своими CSS-переходами.

/* плавное появление элемента */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade-in.show { opacity: 1; }

/* hover-анимация кнопки */
.btn-scale:hover {
  transform: scale(1.03);
  transition: transform 0.15s ease-in-out;
}

Prefers-reduced-motion: уважайте пользователей — @media;
не анимируйте layout-свойства (width, top) — только opacity/transform;
контролируйте длительность: 150–300 мс для микро-действий;
collapsed-таблицы и аккордеоны из коробки — готовые анимации.

Каждая анимация должна отвечать «чему это помогает»: движение отвлекает, если она просто украшает. Ставьте силу на переход состояния, а не на декорацию.

18. Производительность и сборка проекта

Bootstrap по умолчанию — ~200 кБ минифицированного CSS+JS. Для продакшена склейте, сожмите и подключите только нужные компоненты, чтобы страница открывалась быстро.

# Установка только нужных модулей через npm (пример)
npm i bootstrap
# затем импорт в смысловом файле (SCSS):
@use "bootstrap/scss/functions";
@use "bootstrap/scss/variables";
@use "bootstrap/scss/buttons";
@use "bootstrap/scss/cards";

минификация: cssnano + terser в сборщике (Vite, Webpack);
отключите неиспользуемые формы — --bs-bp-переменные;
критический CSS: стили «выше сгиба» инлайните;
изображения: loading="lazy" для не видимых картинок;
проверка: Lighthouse на реальном сервере.

Для большинства лендингов хватает стандартной сборки: не переусложняйте, если аудит не показывает проблем. 90/100 по Lighthouse — отличный результат.

19. Утилиты перекрытия и отступов

Утилитарные классы Bootstrap решают 80–90% задач вёрстки: отступы, выравнивание, цвета и порядок блоков. Чем меньше кастомного CSS, тем проще поддерживать проект.

p-2, m-3 — паддинги и маргины по шкале от 0 до 5;
d-* — управление display: flex, grid, none, inline;
text-*, bg-* — быстрые цвета текста и фона;
border, rounded, shadow — оформление рамок без собственных стилей;
position-* и translate-middle — позиционирование элементов.

Сначала «собирайте» разметку утилитами и только потом пишите кастомный CSS: так меньше дублей и яснее структура.

Утилиты перекрываемы классами по порядку каскада: для переопределения добавляйте специфичный или инлайн-стиль.

20. Кастомизация переменных Bootstrap

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

:root {
  --bs-primary: #0d6efd;
  --bs-body-bg: #f8f9fa;
  --bs-border-radius: 0.5rem;
}

переопределяйте переменные в собственном CSS после подключения Bootstrap;
темная и светлая темы — через data-bs-theme и переменные;
компоненты наследуют переменные: единая точка правки;
для полной кастомизации используйте сборку через Sass (раздел 9).

Соберите небольшой файл-тему `theme.css` с переопределёнными переменными: дизайн-система в одном месте.

Не переопределяйте переменные точечно в каждом компоненте: правка «бренда» превратится в охоту по файлам.

21. Практический пример: страница со всеми блоками

Соберём мини-лендинг из уже изученных блоков: навигация, hero, карточки, форма и футер. Практика закрепляет теорию лучше повторного чтения.

header с navbar и выпадающим меню;
hero-блок container + flex-выравнивание;
решётку card с картинками и кнопками;
форму обратной связи с валидацией;
footer с прочими ссылками и бейджами.

Выполните задание с нуля, не подглядывая: именно ошибки на этом этапе учат лучше всего.

Готовую страницу проверьте в DevTools на трёх breakpoints: от мобильного до десктопа.

22. Bootstrap и сторонние библиотеки

Bootstrap отлично сочетается с иконочными шрифтами, слайдерами и календарями: чужие библиотеки подключаются рядом, не конфликтуя с собственной стилистикой.

иконки: Bootstrap Icons, Font Awesome подключение одной строкой;
слайдеры и карусели сторонних решений — поверх собственных компонентов;
datalist + bootstrap-стили форм — удобные комбобоксы;
соблюдайте порядок подключения: jQuery → библиотеки → свои стили.

Прежде чем тащить тяжёлую библиотеку, поищите привычное решение в документации Bootstrap: часто его хватает.

Проверяйте конфликты классов: сторонние таблицы стилей могут переопределять Bootstrap-свойства.

Что дальше

Теперь ты умеешь собирать страницу из готовых компонентов Bootstrap: сетка, навигация, формы, модалки и карусели. Чтобы упростить себе жизнь на чистой вёрстке, изучи Sass для переопределения тем и сравни Bootstrap с утилитарным Tailwind CSS, чтобы осознанно выбирать инструмент под задачу.

← Вернуться к курсам