Bootstrap
(также известен как
Twitter Bootstrap
) — свободный набор инструментов для создания
сайтов
и
веб-приложений
. Включает в себя
HTML
- и
CSS
-шаблоны оформления для
типографики
, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая
JavaScript
-расширения.
Bootstrap использует современные наработки в области
CSS
и
HTML
, поэтому необходимо быть внимательным при поддержке старых
браузеров
.
История
Bootstrap начала разрабатываться как внутренняя библиотека компании
Twitter
под названием
Twitter Blueprint
. После нескольких месяцев разработки он был открыт под названием Bootstrap
19 августа
2011 года
.
Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка
адаптивности
.
Третья версия была выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции
mobile first
, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию теперь стал
плоским
.
Работа над четвёртой версией начата 29 октября 2014 года
. Альфа-версия вышла 19 августа 2015 года
. Первая бета-версия выпущена 10 августа 2017 года
. Вторая бета-версия выпущена 19 октября 2017
. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4
.
5 мая 2021 года увидел свет Bootstrap 5.
Основные инструменты
Основными инструментами 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.
-
Добавлена поддержка Flexbox, а затем отключена поддержка 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-поддержка.
См. также
Примечания
-
— 2023.
-
-
.
-
.
-
.
-
(неопр.)
. Дата обращения: 12 января 2016.
18 августа 2015 года.
-
Mark Otto.
(неопр.)
.
Developer Blog
.
Twitter
(19 августа 2011). Дата обращения: 27 января 2016.
23 февраля 2017 года.
-
Mark Otto.
(неопр.)
.
Developer Blog
.
Twitter
(31 января 2011). Дата обращения: 27 января 2016.
(недоступная ссылка)
-
(неопр.)
. Bootstrap Blog (19 августа 2013). Дата обращения: 27 января 2016.
21 октября 2016 года.
-
(неопр.)
. Bootstrap Blog (29 октября 2014). Дата обращения: 27 января 2016.
24 июля 2016 года.
-
(неопр.)
. Bootstrap Blog (19 августа 2015). Дата обращения: 27 января 2016.
21 августа 2015 года.
-
(неопр.)
. Bootstrap Blog (10 августа 2017). Дата обращения: 6 октября 2017.
8 октября 2017 года.
-
(неопр.)
. Bootstrap Blog (19 октября 2017). Дата обращения: 31 октября 2017.
1 ноября 2017 года.
-
(неопр.)
. Bootstrap Blog (18 января 2018). Дата обращения: 19 января 2018.
20 января 2018 года.
-
(англ.)
.
GitHub
. Дата обращения: 5 мая 2021.
5 апреля 2022 года.
-
(неопр.)
.
blog.getbootstrap.com
. Дата обращения: 5 апреля 2022.
25 марта 2022 года.
-
(англ.)
.
GitHub
. Дата обращения: 29 сентября 2019.
5 апреля 2022 года.
-
(англ.)
.
GitHub
. Дата обращения: 7 апреля 2020.
5 апреля 2022 года.
Литература
Книги
-
Jake Spurlock.
. —
O'Reilly
, 2013. — 128 с. —
ISBN 978-1-4493-4460-3
.
-
David Cochran, Ian Whitley.
. — Packt, 2014. — 304 с. —
ISBN 978-1-78216-453-1
.
-
Matt Lambert.
. — Packt, 2016. — 328 с. —
ISBN 978-1-78528-109-9
.
-
Syed Fazle Rahman.
. — SitePoint, 2014. — 150 с. —
ISBN 978-0-9922794-3-1
.
-
Aravind Shenoy.
. — Packt, 2014. — 204 с. —
ISBN 978-1-78216-185-1
.
-
Alexandre Magno.
. — Packt, 2013. — 92 с. —
ISBN 978-1-78328-579-2
.
-
Peter Shaw.
. — Syncfusion, Inc., 2014. — 114 с.
-
Peter Shaw.
. — Syncfusion, Inc, 2014. — 110 с.
-
David Cochran.
. —
(англ.)
(
, 2012. — 68 с. —
ISBN 978-1-84951-883-3
.
Статьи и обзоры
-
Уче Огбуйи (Uche Ogbuji).
(неопр.)
.
IBM DeweloperWorks
(29 ноября 2013).
-
Serdar Yegulalp.
. Twitter Bootstrap, HTML5 Boilerplate, 52Framework, and 320 and Up take the sting out of building websites for both large and small screens
(неопр.)
.
InfoWorld
(12 сентября 2012).
Ссылки
-
(англ.)
-
GitHub
(англ.)
-
(англ.)
-
(рус.)
-
(рус.)