Bootstrap — фреймворк веб-интерфейсов¶

Bootstrap — бесплатный фронтенд-фреймворк с открытым исходным кодом для разработки адаптивных (реагирующих на размер экрана) веб-интерфейсов. Создан в 2011 году программистами Марком Отто и Джейкобом Торнтоном из компании Twitter. Bootstrap включает готовые HTML- и CSS-шаблоны типографики, форм, кнопок, навигации, модальных окон, каруселей и других компонентов интерфейса, а также набор опциональных JavaScript-расширений. Фреймворк распространяется под лицензией MIT и доступен на GitHub.

¶История

Разработка Bootstrap началась в 2011 году внутри Twitter как внутренний инструмент под названием Twitter Blueprint. Авторы — Марк Отто (Mark Otto) и Джейкоб Торнтон (Jacob Thornton) — стремились унифицировать стиль интерфейсов внутри компании и ускорить разработку новых продуктов. В августе 2011 года фреймворк был открыт для широкой публики, а в январе 2012 года вышла версия 2.0 с поддержкой сетки на 12 колонок и адаптивных утилит.

Версия 3.0 (август 2013) сделала акцент на мобильной вёрстке — появился подход «mobile-first», а визуальный стиль перешёл на плоский дизайн. Версия 4.0 (январь 2017) была переписана с использованием Sass вместо Less и добавила поддержку Flexbox. Версия 5.0 (май 2021) полностью отказалась от зависимости от jQuery — JavaScript-часть была переписана на чистый JavaScript с использованием модулей ES.

После передачи проекта в руки сообщества Bootstrap остаётся одним из самых популярных фронтенд-фреймворков в мире. По данным статистики на GitHub, репозиторий проекта набрал более 170 тысяч звёзд (звёздочек — отметок «понравилось» у пользователей).

¶Основные компоненты

Bootstrap состоит из нескольких ключевых элементов:

• Сетка (grid system) — двенадцатиколоночная система вёрстки, основанная на комбинации классов .container, .row и .col-*. Позволяет создавать макеты, которые автоматически перестраиваются под разные размеры экрана — от смартфонов до широких мониторов.
• CSS-компоненты — готовые стили для кнопок, форм, таблиц, навигационных панелей, карточек, модальных окон, предупреждений (alert), всплывающих подсказок (tooltip) и других элементов.
• JavaScript-расширения — модули для динамических компонентов: выпадающие меню, модальные окна, карусели (слайдеры), аккордеоны, вкладки. В версии 5 написаны на чистом JavaScript без jQuery.
• Иконки — в ранних версиях включался набор Glyphicons, начиная с версии 4 рекомендуется использовать отдельную библиотеку Bootstrap Icons.
• Утилиты — вспомогательные CSS-классы для отступов, выравнивания, видимости элементов, цветов и других быстрых правок.

¶Типографика и цвета

Bootstrap задаёт базовые стили типографики: размеры заголовков (h1–h6), стили списков, цитат, кода. Цветовая палитра определяется набором CSS-переменных (в версии 5) или Sass-переменными, что позволяет кастомизировать цвета под конкретный проект без правки всех файлов стилей. Основные цвета: синий (основной), зелёный (успех), красный (ошибка), жёлтый (предупреждение), серый (нейтральный).

¶Установка и использование

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

1. Через CDN (контент-доставляющую сеть) — добавление ссылок на скомпилированные CSS- и JS-файлы в HTML-разметку.
2. Через менеджер пакетов npm или yarn — для проектов на Node.js.
3. Скачиванием файлов с официального сайта.

Для кастомизации используется сборщик, который компилирует Sass-исходники в итоговый CSS с заданными настройками (цвета, шрифты, отступы).

¶Применение

Bootstrap широко применяется при:

• быстрой прототипировании интерфейсов;
• разработке админ-панелей и панелей управления;
• создании лендингов и корпоративных сайтов;
• разработке веб-приложений на React, Vue, Angular (существуют адаптеры, например React-Bootstrap).

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

¶Альтернативы

Среди альтернатив Bootstrap называют:

• Foundation — фреймворк от ZURBI с похожей функциональностью;
• Bulma — CSS-фреймворк на Flexbox без JavaScript-части;
• Tailwind CSS — утилитарный CSS-фреймворк, построенный на наборе мелких utility-классов;
• Materialize — реализация принципов Material Design от Google.

¶Интересные факты

• Название «Bootstrap» отсылает к фразе «pull yourself up by your bootstraps» («подтянуться за шнурки собственных сапог») — метафоре самодостаточности и независимости.
• Первоначально проект назывался Twitter Blueprint, но перед публичным релизом был переименован.
• Bootstrap стал одним из первых фреймворков, массово внедривших концепцию адаптивной вёрстки в повседневную практику веб-разработки.

Источники:

• Официальная документация Bootstrap (getbootstrap.com)
• Репозиторий проекта на GitHub (github.com/twbs/bootstrap)
• Mark Otto, Jacob Thornton. Bootstrap: A front-end framework for the modern web. — 2012
• Статья «Bootstrap (framework)» в Википедии (англ.)