Bootstrap (фронтенд-фреймворк)

Что это такое

Bootstrap — это CSS-фреймворк с готовой библиотекой компонентов и сеточной системой. Вы подключаете таблицу стилей и скрипт, принимаете его соглашения об именах классов — btn btn-primary, row, col-md-6 — и быстро получаете работающий, единообразный интерфейс. Он был первым фреймворком у большинства команд и до сих пор идёт в комплекте с большим объёмом серверного рендеринга и внутренних инструментов.

Почему это важно

Сильная сторона Bootstrap и его цена — одно и то же свойство: он узнаваем. Эта узнаваемость делает его самым быстрым способом вывести на экран убедительный интерфейс — прототип, админ-панель, инструмент, которым три человека будут пользоваться месяц. Она же означает, что результат выглядит как Bootstrap, — сегодня пользователи читают это как устаревшее, — а чтобы это отменить, придётся переопределять именно те классы, которые и дали скорость. Понимать, когда такой компромисс оправдан, полезнее, чем знать имена классов, ведь имена классов есть в документации.

Ключевые идеи

Сетка — единственное, что доживает

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

<div class="row g-3">
  <div class="col-12 col-md-8">Основное</div>
  <div class="col-12 col-md-4">Боковое</div>
</div>

Компоненты идут готовыми и потому обобщёнными

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

Переопределение — обычный рабочий процесс, и фреймворк сопротивляется

Настроить компонент Bootstrap — значит перебить собственную специфичность фреймворка. Пути отхода: пользовательские свойства CSS, сборка только с нужными модулями и тонкая обёртка из ваших собственных классов — в этом порядке предпочтения. Правка исходников фреймворка или россыпь !important ведут к тому, что следующее обновление становится невозможным.

.btn-brand {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
}

Это всё ещё разумный ответ

Для внутренних инструментов, ограниченных по времени прототипов, серверных приложений, где сборочный конвейер нежелателен, и проектов, чей бюджет не растянется на дизайн-систему, Bootstrap остаётся защитимым выбором. Отправной точкой для продукта, чья визуальная идентичность входит в его ценность, он при этом не является: сэкономленные усилия вы потратите на то, чтобы её отменить.

Заложите бюджет на обновление

Зафиксированная мажорная версия — обязательство с длинным запалом. Прочитать список изменений и обновляться по расписанию стоит день; обновление через два мажора за два года стоит недели и редизайна.

Практика

Соберите один экран с фреймворком и без него

Создайте одну и ту же страницу дважды: один раз из компонентов Bootstrap, другой — на CSS, написанном вручную. Замерьте время в обоих случаях и сравните результат.

Готово, когда: вы можете сказать, сколько времени сэкономил фреймворк, сколько результата придётся переопределить ради идентичности продукта и какую версию вы бы выпустили.

Переоформите один компонент без `!important`

Возьмите компонент Bootstrap и переоформите его через документированные пользовательские свойства и класс-обёртку.

Готово, когда: !important не добавлен, файл фреймворка не изменён, а компонент продолжает работать, когда JavaScript фреймворка обновляет его состояние.

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

Переопределение через !important — следующая смена темы ломается в не связанном месте; исправить: используйте пользовательские свойства фреймворка или сборку только с нужными модулями.
Использование всех компонентов, раз они есть — страница превращается в каталог умолчаний, а не в дизайн; исправить: выбирайте те несколько компонентов, что оправдывают свой вес.
Правка исходников фреймворка — обновления превращаются в ручные слияния; исправить: не трогайте вендорные файлы, а наслаивайте свои.
Игнорирование JavaScript-бандла — маленькая страница тащит рантайм подсказок и выпадающих меню, которые не использует; исправить: подключайте только нужные модули или ни одного.
Забытые имена классов точек останова — колонки складываются на любом экране, и раскладка выглядит сломанной; исправить: один раз внимательно прочитайте документацию по сетке.

Что читать дальше

Каскадные таблицы стилей (CSS) (02-frontend/05-css) — механизм, вокруг которого идёт всякая борьба с переопределением.
Tailwind CSS (02-frontend/14-tailwind-css) — современный ответ на тот же компромисс между скоростью и идентичностью.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — чего стоит подключить CSS и JavaScript целого фреймворка.