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

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

¶История

¶Создание в Twitter

Bootstrap был разработан внутри Twitter в 2010—2011 годах. Первоначально проект назывался «Blueprint», затем «Bootstrap». Авторы — Марк Отто (Mark Otto) и Джейкоб Торнтон (Jacob Thornton) — создали фреймворк для унификации внутренних инструментов компании и ускорения разработки интерфейсов. В августе 2011 года исходный код был открыт и опубликован на GitHub. Проект быстро привлёк внимание сообщества: за первые месяцы он набрал десятки тысяч звёзд на GitHub и стал одним из самых быстрорастущих open source-проектов того времени.

¶Основные версии

Версия 4 разрабатывалась более четырёх лет и была выпущена в январе 2018 года. Главным изменением стало использование CSS Flexbox для построения сетки вёрстки вместо плавающих элементов (float). Версия 5.0 вышла в мае 2021 года и избавила фреймворк от зависимости от библиотеки jQuery — вместо неё используются нативные JavaScript-модули. Также были удалены устаревшие компоненты и добавлена поддержка CSS-переменных.

¶Основные возможности

¶Сетка вёрстки

Центральное место в Bootstrap занимает адаптивная сетка (grid system), построенная на принципе двенадцатиколоночной раскладки. Разработчик задаёт классы колонок (.col-lg-6, .col-md-4 и т. д.), а фреймворк автоматически перестраивает макет в зависимости от ширины экрана. Сетка работает на основе медиазапросов и поддерживает пять «точек перелома» (breakpoints): Extra small, Small, Medium, Large и Extra large.

¶Компоненты

Bootstrap включает более двух десятков готовых UI-компонентов:

• Навигационные панели, меню, хлебные крошки;
• Кнопки, группы кнопок, выпадающие списки;
• Формы с валидацией и стилизованными полями ввода;
• Модальные окна, всплывающие подсказки (tooltip), поповеры;
• Карусели (слайдеры), аккордеоны, вкладки;
• Таблицы, карточки, алерты, уведомления;
• Пагинация, прогресс-бары, индикаторы загрузки.

¶Утилитарные классы

Помимо компонентов, Bootstrap предоставляет набор утилитарных CSS-классов для быстрой настройки отступов (.mt-3, .p-2), выравнивания, видимости элементов на разных экранах, цветов и фона. Это позволяет вносить точечные правки без написания собственного CSS.

¶JavaScript-расширения

Фреймворк содержит модули на JavaScript для интерактивных элементов: модальные окна, всплывающие подсказки, поповеры, карусели, вкладки, аккордеоны. Начиная с версии 5 эти модули написаны на нативном JavaScript и не требуют сторонних библиотек.

¶Использование

¶Подключение

Bootstrap можно подключить несколькими способами: через CDN (контент-доставляющую сеть), загрузив файлы локально, либо установив через менеджер пакетов npm, yarn или Composer. Для базового подключения достаточно двух строк в HTML-файле: ссылка на CSS-файл и ссылка на JavaScript-файл.

``html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"; rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>; ``

¶Кастомизация

Фреймворк поддерживает глубокую кастомизацию. Начиная с версии 4 сборка выполняется с помощью Sass-препроцессора, что позволяет переопределять переменные цветов, шрифтов, отступов и точек перелома. Для пользователей, не использующих Sass, доступен визуальный конструктор Bootstrap, который генерирует настроенный CSS-файл.

¶Критика

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

¶Bootstrap в России

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

¶Источники

• Официальная документация Bootstrap (getbootstrap.com)
• Репозиторий проекта на GitHub (github.com/twbs/bootstrap)
• Mark Otto, Jacob Thornton. Bootstrap: A front-end framework for faster and easier web development (2011)
• Статья «Bootstrap» в журнале .net Magazine