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

Интерфейсный фреймворк веб-дизайна

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

По состоянию на май 2023 года ^{[обновлять]}Bootstrap является 17-м по популярности проектом (4-м по популярности библиотекой) на GitHub с более чем 164 000 звезд. ^[2] По данным W3Techs, Bootstrap используют 19,2% всех веб-сайтов. ^[3]

Функции

Bootstrap — это библиотека HTML, CSS и JS, которая ориентирована на упрощение разработки информативных веб-страниц (в отличие от веб-приложений ). Основная цель добавления его в веб-проект — применить к этому проекту выбранные Bootstrap цвета, размера, шрифта и макета. Таким образом, основным фактором является то, найдут ли ответственные разработчики этот выбор по своему вкусу. После добавления в проект Bootstrap предоставляет базовые определения стилей для всех элементов HTML . Результатом является единообразный внешний вид текста, таблиц и элементов форм во всех веб-браузерах . Кроме того, разработчики могут использовать классы CSS, определенные в Bootstrap, для дальнейшей настройки внешнего вида своего содержимого. Например, Bootstrap поддерживает светлые и темные таблицы, заголовки страниц, более заметные цитаты и выделенный текст.

Bootstrap также поставляется с несколькими компонентами JavaScript, которые не требуют других библиотек, таких как jQuery . Они предоставляют дополнительные элементы пользовательского интерфейса, такие как диалоговые окна , всплывающие подсказки , индикаторы выполнения, раскрывающиеся списки навигации и карусели. Каждый компонент Bootstrap состоит из структуры HTML, объявлений CSS и, в некоторых случаях, сопутствующего кода JavaScript. Они также расширяют функциональность некоторых существующих элементов интерфейса, включая, например, функцию автозаполнения полей ввода.

Пример веб-страницы с использованием платформы Bootstrap, отображаемой в Firefox

Наиболее важными компонентами Bootstrap являются компоненты макета, поскольку они влияют на всю веб-страницу. Базовый компонент макета называется «Контейнер», поскольку в нем размещаются все остальные элементы страницы. Разработчики могут выбирать между контейнером фиксированной ширины и контейнером изменяемой ширины. В то время как последний всегда заполняет ширину веб-страницы, первый использует одну из пяти предопределенных фиксированных ширин, в зависимости от размера экрана, на котором ^{отображается страница :}

• Меньше 576 пикселей
• 576–768 пикселей
• 768–992 пикселей
• 992–1200 пикселей
• Больше 1200 пикселей

Как только контейнер установлен, другие компоненты макета Bootstrap реализуют макет CSS Flexbox путем определения строк и столбцов.

Предварительно скомпилированная версия Bootstrap доступна в виде одного файла CSS и трех файлов JavaScript, которые можно легко добавить в любой проект. Однако необработанная форма Bootstrap позволяет разработчикам реализовывать дальнейшую настройку и оптимизацию размера. Эта необработанная форма является модульной, что означает, что разработчик может удалять ненужные компоненты, применять тему и изменять некомпилированные файлы Sass .

История

Раннее начало

Bootstrap, первоначально называвшийся Twitter Blueprint, был разработан Марком Отто и Джейкобом Торнтоном в Twitter как основа для обеспечения согласованности внутренних инструментов. До Bootstrap для разработки интерфейса использовались различные библиотеки, что приводило к несогласованности и высокой нагрузке на обслуживание. По словам Отто:

Я и очень маленькая группа разработчиков собрались, чтобы спроектировать и создать новый внутренний инструмент, и увидели возможность сделать что-то большее. Благодаря этому процессу мы увидели, что создаем нечто гораздо более существенное, чем еще один внутренний инструмент. Несколько месяцев спустя у нас появилась ранняя версия Bootstrap, позволяющая документировать и совместно использовать общие шаблоны проектирования и ресурсы внутри компании. ^[4]

После нескольких месяцев разработки небольшой группой многие разработчики Twitter начали вносить свой вклад в проект в рамках Hack Week, недели в стиле хакатона для команды разработчиков Twitter. Он был переименован из Twitter Blueprint в Bootstrap и выпущен как проект с открытым исходным кодом 19 августа 2011 года. ^[5] Его продолжают поддерживать Отто, Торнтон, небольшая группа основных разработчиков и большое сообщество участников. ^[6]

Бутстрап 2

31 января 2012 года был выпущен Bootstrap 2, в котором добавлена ​​встроенная поддержка глификонов, несколько новых компонентов, а также изменения во многих существующих компонентах. Эта версия поддерживает адаптивный веб-дизайн , то есть макет веб-страниц динамически настраивается с учетом характеристик используемого устройства (будь то настольный компьютер, планшет, мобильный телефон). ^[7]

Бутстрап 3

19 августа 2013 года был выпущен Bootstrap 3. Компания переработала компоненты, чтобы использовать плоский дизайн и подход, ориентированный на мобильные устройства . ^{[ нужна цитация ]} Bootstrap 3 включает новую систему плагинов с событиями в пространстве имен . В Bootstrap 3 прекращена поддержка Internet Explorer 7 и Firefox 3.6, но для этих браузеров существует дополнительный полифилл . ^[8]

Бутстрап 4

Отто анонсировал Bootstrap 4 29 октября 2014 года. ^[9] Первая альфа-версия Bootstrap 4 была выпущена 19 августа 2015 года. ^[10] Первая бета-версия была выпущена 10 августа 2017 года. ^[11] Отто приостановил работу над Bootstrap 3 6 сентября 2016 г., чтобы освободить время для работы над Bootstrap 4. Bootstrap 4 был завершен 18 января 2018 г. ^[12]

Значительные изменения включают в себя:

• Значительное переписывание кода
• Замена Less на Sass
• Добавление Reboot, набора изменений CSS для конкретных элементов в одном файле на основеNormalize
• Прекращение поддержки IE8 , IE9 и iOS 6.
• Поддержка CSS Flexible Box
• Добавление параметров настройки навигации
• Добавление адаптивных утилит для определения интервалов и размеров
• Переключение с единицы пикселей в CSS на корневой ems
• Увеличение глобального размера шрифта с 14 до 16 пикселей для повышения читабельности.
• Удаление компонентов panel, thumbnail, pagerиwell
• Удаление Glyphiconsшрифта значка
• Огромное количество ^{[ количественных ]} классов полезности
• Улучшен стиль форм, кнопок, раскрывающихся меню, медиа-объектов и классов изображений.

Bootstrap 4 поддерживает последние версии Google Chrome , Firefox , Internet Explorer , Opera и Safari (кроме Windows). Он также поддерживает IE10 и последнюю версию расширенной поддержки Firefox (ESR). ^[13]

Бутстрап 5

Bootstrap 5 был официально выпущен 5 мая 2021 года. ^{[14] [15]}

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

• Новый компонент меню вне холста
• Удаление зависимости от jQuery в пользу ванильного JavaScript
• Переписывание сетки для поддержки адаптивных полей и столбцов, расположенных за пределами строк.
• Перенос документации из Джекила в Хьюго
• Прекращение поддержки Internet Explorer ^[17]
• Перенос инфраструктуры тестирования с QUnit на Jasmine
• Добавление пользовательского набора значков SVG ^[18]
• Добавление пользовательских свойств CSS
• Улучшенный API
• Улучшенная сетка
• Улучшенная настройка документов
• Обновленные формы
• Поддержка RTL
• Встроенная поддержка темного режима

Смотрите также

• Портал бесплатного программного обеспечения с открытым исходным кодом

• CSS-фреймворк
• jQuery для мобильных устройств
• Фреймворк JavaScript
• библиотека JavaScript
• CSS попутного ветра

Кроме того, несколько веб-фреймворков поддерживают рендеринг в Bootstrap. ^{[19] [20]}

Рекомендации

1. «Выпуск 5.3.2». 14 сентября 2023 г. . Проверено 18 сентября 2023 г.
2. "Поиск · звезды:>100000" . Гитхаб . Проверено 4 декабря 2022 г.
3. «Статистика использования и рыночная доля Bootstrap для веб-сайтов» . w3techs.com . Проверено 24 января 2023 г.
4. Отто, Марк (17 января 2012 г.). «Bootstrap в отдельном списке № 342». Блог Марка Отто . Архивировано из оригинала 28 октября 2016 года . Проверено 23 февраля 2017 г.
5. Отто, Марк (19 августа 2011 г.). «Bootstrap из Твиттера». Блог разработчиков . Твиттер. Архивировано из оригинала 23 февраля 2017 года . Проверено 23 февраля 2017 г.
6. «О» . Бутстрап . 19 августа 2011 года . Проверено 23 февраля 2017 г.
7. Отто, Марк (31 января 2012 г.). «Поздоровайтесь с Bootstrap 2.0». Блог разработчиков . Твиттер. Архивировано из оригинала 23 февраля 2017 года . Проверено 23 февраля 2017 г.
8. Отто, Марк (19 августа 2013 г.). «Выпущен Bootstrap 3». Архивировано из оригинала 21 октября 2016 года . Проверено 23 февраля 2017 г.
9. Отто, Марк (29 октября 2014 г.). «Выпущен Bootstrap 3.3.0». Архивировано из оригинала 24 июля 2016 года . Проверено 23 февраля 2017 г.
10. Отто, Марк (19 августа 2015 г.). «Бутстрап 4 альфа». Архивировано из оригинала 23 января 2017 года . Проверено 23 февраля 2017 г.
11. Отто, Марк; Торнтон, Джейкоб (10 августа 2017 г.). «Бета-версия Bootstrap 4» . Проверено 16 августа 2017 г.
12. "Бутстрап 4" . blog.getbootstrap.com . 18 января 2018 года . Проверено 5 февраля 2021 г.
13. «Поддерживаемые браузеры». Бутстрап . Проверено 23 февраля 2017 г.
14. «Выпуск v5.0.0 (#33647) · twbs/bootstrap» . Гитхаб . Проверено 5 мая 2021 г.
15. "Бутстрап 5" . blog.getbootstrap.com . 5 мая 2021 г.
16. «Сетка Bootstrap 5 от MartijnCuppens · Запрос на извлечение № 28517 · twbs/bootstrap» . Гитхаб . Проверено 29 сентября 2019 г.
17. «v5: прекращение поддержки Internet Explorer со стороны XhmikosR · Запрос на извлечение № 30377 · twbs/bootstrap» . Гитхаб . Проверено 7 апреля 2020 г.
18. «Иконки начальной загрузки» . Проверено 7 ноября 2022 г.
19. "Загрузочная колба" . ПриветFlask . Проверено 7 ноября 2022 г.
20. "Bootstrap-Django". зеленый . Проверено 7 ноября 2022 г.

Внешние ссылки

• Официальный веб-сайт
• Bootstrap на GitHub