Что такое «Bootstrap»

Bootstrap — популярный фронтенд-фреймворк (CSS + JS) для быстрой адаптивной верстки. Дает готовую сетку, базовые стили типографики и компонентные блоки (кнопки, формы, навбар, карточки, модальные окна, offcanvas, dropdown, toast и др.), а также утилитарные классы (отступы, флексы, позиционирование). Распространяется по MIT-лицензии. Не путать со «статистическим bootstrap» (метод ресемплинга) — это другая область.

Время прочтения:

4 минуты

Дата публикации:

15.09.25

42

Главная

Что такое «Bootstrap»

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

Ключевые идеи и устройство

Адаптивная сетка: контейнеры (.container, .container-fluid), строки .row, колонки .col-*, брейкпоинты sm/md/lg/xl/xxl;
Утилиты: классы вроде d-flex, gap-2, mt-3, text-center, position-absolute, order-lg-2;
Компоненты (семантика + стили + JS-поведение): Navbar, Card, Modal, Dropdown, Offcanvas, Accordion, Carousel, Toast, Alert, Tabs, Forms;
JS без jQuery (с v5): нативный JS, поведение вешается через data-bs-* атрибуты или модули. Для Dropdown/Tooltip/Popover нужен Popper;
Темизация: переменные CSS и Sass (карты, функции). С v5 есть color modes (data-bs-theme="dark|light"), RTL, RFS (responsive font sizes);
Сборка: можно брать через CDN, npm (bootstrap), импортировать только нужные части через Sass/ESM.

Как начать (самый быстрый способ, CDN)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-4">
  <nav class="navbar navbar-expand-lg bg-body-tertiary rounded mb-4">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="nav" class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto gap-2">
          <li class="nav-item"><a class="nav-link active" href="#">Главная</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Контакты</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="row g-3">
    <div class="col-md-4"><div class="card p-3">Блок 1</div></div>
    <div class="col-md-4"><div class="card p-3">Блок 2</div></div>
    <div class="col-md-4"><div class="card p-3">Блок 3</div></div>
  </div>

  <button class="btn btn-primary mt-4" data-bs-toggle="modal" data-bs-target="#m">Открыть модал</button>
  <div class="modal fade" id="m" tabindex="-1"><div class="modal-dialog">
    <div class="modal-content p-3">Привет, Bootstrap!</div>
  </div></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js"></script>

Сетка и брейкпоинты (в двух словах)

Блоки в 12-колоночной сетке: .col-6 (всегда 50%), .col-md-4 (с ≥768px — треть);
Отступы между карточками — классы g-2 … g-5;
Брейкпоинты: sm (576px), md (768), lg (992), xl (1200), xxl (1400). Пример: d-none d-md-block — скрыть на мобиле, показать с md.

Темизация и кастомизация

CSS-переменные (runtime): --bs-primary, --bs-body-bg и т. п. Тёмная тема: <html data-bs-theme="dark"> или переключатель, меняющий атрибут.
Sass (build-time): переопределяйте карты переменных до импорта:

$primary: #0ea5e9;
@import "bootstrap/scss/bootstrap";

Правило: не правьте bootstrap.min.css. Своё — отдельным файлом после Бутстрапа, либо через Sass.

Доступность и семантика

Компоненты снабжены ARIA-атрибутами, фокус-стилями, контрастами. Но ответственность за семантическую разметку (правильные теги, alt, label) на разработчике.

Плюсы и когда он «зайдёт»

Очень быстрый старт, одинакова верстка в разных браузерах;
Много готовых, проверенных паттернов;
Отличная документация и экосистема (Bootstrap Icons, темы).

Минусы и когда лучше другое

«Бутстраповый» вид без кастомизации;
Возможен «перегруз» CSS, если тянуть весь пакет и не пользоваться treeshaking;
Если нужен утилитарный подход «всё классами» и минимальный слой UI — Tailwind может быть удобнее. Если чистый кастом-дизайн — можно обойтись собственной дизайн-системой.

Частые ошибки

Редактируют скомпилированный bootstrap.min.css → дальше девопс-боль;
Подключают и CSS, и bundle JS, но забывают Popper — не работают dropdown/tooltip;
Миксуют сетку с «сломанной» версткой (колонки не в .row, забыли .container);
Перебор утилит-классов в HTML без слоёв абстракции → сложно поддерживать;
Грузят весь Bootstrap ради пары кнопок — лучше брать только нужные части через Sass/ESM.

Мини-чек-лист внедрения

Определили способ подключения: CDN для прототипа, npm+Sass для продакшна;
Сетка соблюдена: .container → .row → .col-*, используются g-*;
JS-компоненты работают: есть Popper; поведение через data-bs-* или JS-API;
Темизация: переменные (CSS/Sass), единый токен-цветов, проверен контраст;
Производительность: подключены только нужные компоненты, есть minify/treeshake, критический CSS;
Доступность: aria, фокусы, семантика, тест клавиатурой.

Заключение

Bootstrap — быстрый и надёжный способ собрать адаптивный интерфейс из готовых блоков и утилит. Используйте сетку, утилиты и компоненты, кастомизируйте через CSS-переменные и Sass, подключайте только нужное — и получите предсказуемую, доступную и поддерживаемую верстку без избыточного кода.