Bootstrap (также известен как Twitter Bootstrap) — популярный CSS-фреймворк с открытым исходным кодом для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Bootstrap использует современные наработки в области CSS, JavaScript и HTML, поэтому использование данного инструмента не всегда может быть правильным решением при использовании старых браузеров.

Bootstrap является одним из самых популярных проектов на GitHub: у него около 170 тысяч звёзд.

История Bootstrap начала разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт, 19 августа 2011 года, под названием Bootstrap.

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности. С этого момента фреймворк позволяет создавать страницы, которые подстраиваются под ширину экрана.

Третья версия была выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию теперь стал плоским.

Работа над четвёртой версией начата 29 октября 2014 года. Альфа-версия вышла 19 августа 2015 года. Первая бета-версия выпущена 10 августа 2017 года. Вторая бета-версия выпущена 19 октября 2017. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4.

5 мая 2021 года увидел свет Bootstrap 5.

Основные инструменты

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

Основными инструментами Bootstrap являются: Сетки — заранее заданные размеры колонок, которые можно сразу использовать. Например, ширина колонки 140 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа. Шаблоны — фиксированный или резиновый шаблон документа. Типографика — инструмент описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п. Медиа — инструмент, предоставляющий некоторое управление изображениями и видео. Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки. Формы — некоторые классы для оформления форм и некоторых событий, происходящих с ними. Навигация — некоторые классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов. Алерты — инструмент оформления диалоговых окон, подсказок и всплывающих окон.

История версий Bootstrap 4 29 октября 2014 года Марк Отто объявил, что Bootstrap 4 находится в разработке. 6 сентября 2016 года Марк приостановил работу над Bootstrap 3, чтобы высвободить время для работы над Bootstrap 4; на тот момент было внесено более 4000 изменений к базовому коду Bootstrap 4. Первая стабильная версия вышла 18 января 2018 года.

Bootstrap 4 — это почти полностью переписанный Bootstrap 3. Перечень самых значительных изменений: Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены набором исходных шрифтов для оптимальной отрисовки текста на любом устройстве под любой ОС. Переход от использования языка стилей Less к Sass. Более не поддерживаются IE8, IE9 и iOS 6. Добавлена поддержка , а затем отключена поддержка non-flexbox. Смена основной единицы измерения с px на rem. Увеличенный глобальный размер шрифта с 14px до 16px. Новый компонент «карточка», обобщающий панели и другие компоненты. Удалён шрифт значков Glyphicons. Удалены компоненты пейджера. Переписаны почти все компоненты, плагины jQuery и документация.

Bootstrap 5 Bootstrap 5 был официально выпущен 5 мая 2021 года.

Основные изменения включают:

Новый компонент меню offcanvas. Удаление зависимости от jQuery в пользу ванильного JavaScript. Переписывание сетки для поддержки адаптивных желобов и столбцов, размещённых за пределами строк. Перенос документации с Jekyll на Hugo. Прекращение поддержки Internet Explorer. Перенос инфраструктуры тестирования с QUnit на Jasmine. Добавление собственного набора иконок SVG. Добавление пользовательских свойств CSS. Улучшенный API. Усовершенствованная система сетки. Улучшенная настройка документов. Обновлённые формы. RTL-поддержка.

См. также LESS HTML5 jQuery

Примечания

Литература Книги

Статьи и обзоры

Ссылки Официальная страница Bootstrap GitHub Bootstrap in A List Apart No. 342 A List Apart Bootstrap 4 — документация на русском языке Bootstrap 5 — документация на русском языке

Категория:HTML Категория:Веб-дизайн Категория:Веб-разработка Категория:Каскадные таблицы стилей