Bootstrap (фронтенд-фреймворк)
![]() | |
Оригинальный автор(ы) | Марк Отто, Джейкоб Торнтон |
---|---|
Разработчик(и) | Основная команда Bootstrap |
Первоначальный выпуск | 19 августа 2011 г |
Стабильная версия | 5.3.3 [1] ![]() |
Репозиторий | Репозиторий начальной загрузки |
Написано в | HTML , CSS , Less (v3), Sass (v4) и JavaScript |
Платформа | Веб-платформа |
Лицензия | МОЯ лицензия [2] ( Лицензия Apache 2.0 до 3.1.0) [3] |
Веб-сайт | getbootstrap ![]() |
Bootstrap (ранее Twitter Bootstrap ) — это с открытым исходным кодом, бесплатная платформа CSS предназначенная для адаптивной, ориентированной на мобильные устройства пользовательской веб-разработки . Он содержит HTML , CSS и (опционально) JavaScript шаблоны дизайна на основе для типографики , форм , кнопок , навигации и других компонентов интерфейса.
По состоянию на май 2023 г. [update]Bootstrap — 17-й по популярности проект (4-я по популярности библиотека) на GitHub с более чем 164 000 звезд. [4] По данным W3Techs, Bootstrap используют 19,2% всех веб-сайтов. [5]
Функции
[ редактировать ]Bootstrap — это библиотека HTML, CSS и JS, которая направлена на упрощение разработки информативных веб-страниц (в отличие от веб-приложений ). Основная цель добавления его в веб-проект — применить к этому проекту выбранные Bootstrap цвета, размера, шрифта и макета. Таким образом, основным фактором является то, найдут ли ответственные разработчики этот выбор по своему вкусу. После добавления в проект Bootstrap предоставляет базовые определения стилей для всех элементов HTML . Результатом является единообразный внешний вид текста, таблиц и элементов форм во всех веб-браузерах . Кроме того, разработчики могут использовать классы CSS, определенные в Bootstrap, для дальнейшей настройки внешнего вида своего содержимого. Например, Bootstrap поддерживает светлые и темные таблицы, заголовки страниц, более заметные цитаты и выделенный текст.
Bootstrap также поставляется с несколькими компонентами JavaScript, которые не требуют других библиотек, таких как jQuery . Они предоставляют дополнительные элементы пользовательского интерфейса, такие как диалоговые окна , всплывающие подсказки , индикаторы выполнения, раскрывающиеся списки навигации и карусели. Каждый компонент Bootstrap состоит из структуры HTML, объявлений CSS и, в некоторых случаях, сопутствующего кода JavaScript. Они также расширяют функциональность некоторых существующих элементов интерфейса, включая, например, функцию автозаполнения полей ввода.

Наиболее важными компонентами Bootstrap являются компоненты макета, поскольку они влияют на всю веб-страницу. Базовый компонент макета называется «Контейнер», поскольку в нем размещаются все остальные элементы страницы. Разработчики могут выбирать между контейнером фиксированной ширины и контейнером изменяемой ширины. В то время как последний всегда заполняет ширину веб-страницы, первый использует одну из пяти предопределенных фиксированных ширин, в зависимости от размера экрана, на котором отображается страница: [6]
- Меньше 576 пикселей
- 576–768 пикселей
- 768–992 пикселей
- 992–1200 пикселей
- 1200-1400 пикселей
- Больше 1400 пикселей
После того как контейнер установлен, другие компоненты макета Bootstrap реализуют макет CSS Flexbox путем определения строк и столбцов.
Предварительно скомпилированная версия Bootstrap доступна в виде одного файла CSS и трех файлов JavaScript, которые можно легко добавить в любой проект. Однако необработанная форма Bootstrap позволяет разработчикам реализовывать дальнейшую настройку и оптимизацию размера. Эта необработанная форма является модульной, что означает, что разработчик может удалять ненужные компоненты, применять тему и изменять некомпилированные файлы Sass .
История
[ редактировать ]Раннее начало
[ редактировать ]Bootstrap, первоначально называвшийся Twitter Blueprint, был разработан Марком Отто и Джейкобом Торнтоном в Twitter как основа для обеспечения согласованности внутренних инструментов. До Bootstrap для разработки интерфейса использовались различные библиотеки, что приводило к несогласованности и высокой нагрузке на обслуживание. По словам Отто:
Я и очень маленькая группа разработчиков собрались, чтобы спроектировать и создать новый внутренний инструмент, и увидели возможность сделать что-то большее. Благодаря этому процессу мы увидели, что создаем нечто гораздо более существенное, чем еще один внутренний инструмент. Несколько месяцев спустя у нас появилась ранняя версия Bootstrap, позволяющая документировать и совместно использовать общие шаблоны проектирования и ресурсы внутри компании. [7]
После нескольких месяцев разработки небольшой группой многие разработчики Twitter начали вносить свой вклад в проект в рамках Hack Week, недели в стиле хакатона для команды разработчиков Twitter. Он был переименован из Twitter Blueprint в Twitter Bootstrap и выпущен как проект с открытым исходным кодом 19 августа 2011 года. [8] Его продолжают поддерживать Отто, Торнтон, небольшая группа основных разработчиков и большое сообщество участников. [9]
Бутстрап 2
[ редактировать ]31 января 2012 года был выпущен Bootstrap 2, в котором добавлена встроенная поддержка глификонов, несколько новых компонентов, а также изменения во многих существующих компонентах. Эта версия поддерживает адаптивный веб-дизайн , то есть макет веб-страниц динамически настраивается с учетом характеристик используемого устройства (будь то настольный компьютер, планшет, мобильный телефон). [10] Незадолго до выпуска Bootstrap 2.1.2 Отто и Торнтон покинули Twitter, но решили продолжить работу над Bootstrap как над независимым проектом. [11]
Бутстрап 3
[ редактировать ]19 августа 2013 года был выпущен Bootstrap 3. Компания перепроектировала компоненты, используя плоский дизайн и подход , ориентированный на мобильные устройства . [12] Bootstrap 3 имеет новую систему плагинов с событиями в пространстве имен . существует дополнительный полифилл . В Bootstrap 3 прекращена поддержка Internet Explorer 7 и Firefox 3.6, но для этих браузеров [13] Bootstrap 3 также был первой версией, выпущенной организацией twbs на GitHub вместо версии Twitter. [14]
Бутстрап 4
[ редактировать ]Отто анонсировал Bootstrap 4 29 октября 2014 года. [15] Первая альфа-версия Bootstrap 4 была выпущена 19 августа 2015 года. [16] Первая бета-версия была выпущена 10 августа 2017 года. [17] Отто приостановил работу над Bootstrap 3 6 сентября 2016 года, чтобы освободить время для работы над Bootstrap 4. Bootstrap 4 был завершен 18 января 2018 года. [18]
Значительные изменения включают в себя:
- Значительное переписывание кода
- Замена 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). [19]
Бутстрап 5
[ редактировать ]Bootstrap 5 был официально выпущен 5 мая 2021 года. [20] [21]
Основные изменения включают в себя: [22]
- Новый компонент меню вне холста
- Удаление зависимости от jQuery в пользу ванильного JavaScript
- Переписывание сетки для поддержки адаптивных полей и столбцов, расположенных за пределами строк.
- Перенос документации из Джекила в Хьюго
- Прекращение поддержки Internet Explorer [23]
- Перенос инфраструктуры тестирования с QUnit на Jasmine
- Добавление пользовательского набора значков SVG [24]
- Добавление пользовательских свойств CSS
- Улучшенный API
- Улучшенная сетка
- Улучшенная настройка документов
- Обновленные формы
- Поддержка RTL
- Встроенная поддержка темного режима.
См. также
[ редактировать ]- CSS-фреймворк
- jQuery для мобильных устройств
- Фреймворк JavaScript
- библиотека JavaScript
- CSS попутного ветра
Кроме того, несколько веб-фреймворков поддерживают рендеринг в Bootstrap. [25] [26]
Ссылки
[ редактировать ]- ^ «Выпуск 5.3.3» . 20 февраля 2024 г. . Проверено 20 февраля 2024 г.
- ^ "бутстрап/ЛИЦЕНЗИЯ" . Гитхаб .
- ^ "бутстрап/ЛИЦЕНЗИЯ (v3.0.3)" . Гитхаб .
- ^ «Поиск · звезды:>100000» . Гитхаб . Проверено 4 декабря 2022 г.
- ^ «Статистика использования и доля рынка Bootstrap для веб-сайтов» . w3techs.com . Проверено 24 января 2023 г.
- ^ «Загрузочные контейнеры · Bootstrap v5.0» .
- ^ Отто, Марк (17 января 2012 г.). «Bootstrap в отдельном списке № 342» . Блог Марка Отто . Архивировано из оригинала 28 октября 2016 года . Проверено 23 февраля 2017 г.
- ^ Отто, Марк (19 августа 2011 г.). «Bootstrap из Твиттера» . Блог разработчиков . Твиттер. Архивировано из оригинала 23 февраля 2017 года . Проверено 23 февраля 2017 г.
- ^ "О" . Бутстрап . 19 августа 2011 года . Проверено 23 февраля 2017 г.
- ^ Отто, Марк (31 января 2012 г.). «Поздоровайтесь с Bootstrap 2.0» . Блог разработчиков . Твиттер. Архивировано из оригинала 23 февраля 2017 года . Проверено 23 февраля 2017 г.
- ^ Отто, Марк (29 сентября 2012 г.). «Вперед» . blog.getbootstrap.com .
- ^ «Блог Bootstrap — выпущен Bootstrap 3» .
- ^ Отто, Марк (19 августа 2013 г.). «Выпущен Bootstrap 3» . Архивировано из оригинала 21 октября 2016 года . Проверено 23 февраля 2017 г.
- ^ «Планы Bootstrap 3» . 10 декабря 2012 г.
- ^ Отто, Марк (29 октября 2014 г.). «Выпущен Bootstrap 3.3.0» . Архивировано из оригинала 24 июля 2016 года . Проверено 23 февраля 2017 г.
- ^ Отто, Марк (19 августа 2015 г.). «Бутстрап 4 альфа» . Архивировано из оригинала 23 января 2017 года . Проверено 23 февраля 2017 г.
- ^ Отто, Марк; Торнтон, Джейкоб (10 августа 2017 г.). «Бета-версия Bootstrap 4» . Проверено 16 августа 2017 г.
- ^ «Бутстрап 4» . blog.getbootstrap.com . 18 января 2018 года . Проверено 5 февраля 2021 г.
- ^ «Поддерживаемые браузеры» . Бутстрап . Проверено 23 февраля 2017 г.
- ^ «Выпуск v5.0.0 (#33647) · twbs/bootstrap» . Гитхаб . Проверено 5 мая 2021 г.
- ^ «Бутстрап 5» . blog.getbootstrap.com . 5 мая 2021 г.
- ^ «Сетка Bootstrap 5 от MartijnCuppens · Pull Request #28517 · twbs/bootstrap» . Гитхаб . Проверено 29 сентября 2019 г.
- ^ «v5: прекращение поддержки Internet Explorer со стороны XhmikosR · Pull Request #30377 · twbs/bootstrap» . Гитхаб . Проверено 7 апреля 2020 г.
- ^ «Иконки начальной загрузки» . Проверено 7 ноября 2022 г.
- ^ «Bootstrap-Flask» . ПриветFlask . Проверено 7 ноября 2022 г.
- ^ «Бутстрап-Джанго» . зеленый . Проверено 7 ноября 2022 г.
Внешние ссылки
[ редактировать ]