Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Бутстрап
Bootstrap logo.svg
Автор (ы) оригиналаМарк Отто, Джейкоб Торнтон
Разработчики)Основная команда Bootstrap
изначальный выпуск19 августа 2011 г . ; 9 лет назад ( 2011-08-19 )
Стабильный выпуск
4.6.0 [1] Отредактируйте это в Викиданных / 19 января 2021 г . ; 2 месяца назад ( 19 января 2021 г. )
РепозиторийРепозиторий Bootstrap
Написано вHTML , CSS , Less (v3), Sass (v4) и JavaScript
ПлатформаВеб-платформа
ЛицензияЛицензия MIT ( лицензия Apache 2.0 до 3.1.0)
Интернет сайтgetbootstrap .com Отредактируйте это в Викиданных

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

Bootstrap - один из самых популярных проектов на GitHub с более чем 142000 звезд, уступая freeCodeCamp (почти 312000 звезд) и незначительно уступая фреймворку Vue.js. [2]

История [ править ]

Раннее начало [ править ]

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

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

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

Bootstrap 2 [ править ]

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

Bootstrap 3 [ править ]

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

Bootstrap 4 [ править ]

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

К значительным изменениям относятся:

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

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

Bootstrap 5 Beta [ править ]

Bootstrap 5 Alpha был официально выпущен 16 июня 2020 года. [13]

Бета версии 5 в настоящее время является последней версией пакета, запущенного 7 декабря 2020 года. [14]

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

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

Скоро появятся изменения: [13]

  • Реализация меню вне холста

Изменения, которые сейчас оцениваются: [13]

  • Модульная система Sass
  • Повышенное использование настраиваемых свойств CSS
  • Встраивание SVG в HTML вместо CSS

Особенности [ править ]

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 .

Цвета начальной загрузки по умолчанию по сравнению с одноименными веб-цветами
ИмяШестнадцатеричный
(RGB)		Красный
(RGB)		Зеленый
(RGB)		Синий
(RGB)		Оттенок
(HSL / HSV)		Суббота.
(HSL)		Свет
(HSL)		Суббота.
(HSV)		Значение
(HSV)		Альтернативы
Бутстрап Белый #FFFFFF100%100%100%0 °0%100%0%100%белый
Bootstrap Серый 100 # F8F9FA97%98%98%210 °17%98%1%98%
Бутстрап Серый 200 # E9ECEF91%93%94%210 °16%93%3%94%
Bootstrap Серый 300 # DEE2E687%89%90%210 °14%89%4%90%
Bootstrap Серый 400 # CED4DA81%83%85%210 °14%83%6%86%
Bootstrap Серый 500 # ADB5BD68%71%74%210 °11%71%9%74%
Bootstrap Серый 600 # 6C757D42%46%49%208 °7%46%14%49%Bootstrap серый
Bootstrap Серый 700 # 49505729%31%34%210 °9%31%16%34%
Bootstrap Серый 800 # 343A4020%23%25%210 °10%23%19%25%Bootstrap Темно-серый
Bootstrap Серый 900 # 21252913%15%16%210 °11%15%20%16%
Bootstrap Черный # 0000000%0%0%0 °0%0%0%0%Чернить
Bootstrap Синий # 0D6EFD5%43%99%216 °98%52%95%99%
Бутстрап Индиго # 6610F240%6%95%263 °90%51%93%95%
Бутстрап Фиолетовый # 6F42C144%26%76%261 °51%51%66%76%
Бутстрап розовый # D6338484%20%52%330 °67%52%76%84%
Бутстрап красный # DC354586%21%27%354 °71%54%76%86%
Бутстрап Оранжевый # FD7E1499%49%8%27 °98%54%92%99%
Бутстрап желтый # FFC107100%76%3%45 °100%51%97%100%
Bootstrap Зеленый # 19875410%53%33%152 °69%31%82%53%
Bootstrap бирюзовый # 20C99713%79%59%162 °73%46%84%79%
Голубой бутстрап # 0DCAF05%79%94%190 °90%50%95%94%
серый # 80808050%50%50%0 °0%50%0%50%Серый
Синий# 0000FF0%0%100%240 °100%50%100%100%
Индиго# 4B008229%0%51%275 °100%26%100%51%
Фиолетовый # 80008050%0%50%300 °100%25%100%50%
Розовый# FFC0CB100%75%80%350 °100%88%25%100%
красный# FF0000100%0%0%0 °100%50%100%100%
апельсин# FFA500100%65%0%39 °100%50%100%100%
Желтый# FFFF00100%100%0%60 °100%50%100%100%
Зеленый # 0080000%50%0%120 °100%25%100%50%
Бирюзовый# 0080800%50%50%180 °100%25%100%50%
Голубой# 00FFFF0%100%100%180 °100%50%100%100%Аква

См. Также [ править ]

  • CSS-фреймворк
  • jQuery Mobile

Ссылки [ править ]

  1. ^ https://blog.getbootstrap.com/2021/01/19/bootstrap-4.6.0/ ; получено: 28 января 2021 г .; дата публикации: 19 января 2021 г.
  2. ^ "Искать · звезды:> 1" . GitHub . Проверено 14 ноября 2018 года .
  3. ↑ Отто, Марк (17 января 2012 г.). «Бутстрап в списке A List Apart No. 342» . Блог Марка Отто . Архивировано 28 октября 2016 года . Проверено 23 февраля 2017 года .
  4. ↑ Отто, Марк (19 августа 2011 г.). «Бутстрап из Твиттера» . Блог разработчиков . Twitter. Архивировано 23 февраля 2017 года . Проверено 23 февраля 2017 года .
  5. ^ "О" . Бутстрап . Проверено 23 февраля 2017 года .
  6. ↑ Отто, Марк (31 января 2012 г.). «Поприветствуйте Bootstrap 2.0» . Блог разработчиков . Twitter. Архивировано 23 февраля 2017 года . Проверено 23 февраля 2017 года .
  7. ↑ Отто, Марк (19 августа 2013 г.). «Выпущен Bootstrap 3» . Архивировано 21 октября 2016 года . Проверено 23 февраля 2017 года .
  8. ↑ Отто, Марк (29 октября 2014 г.). «Выпущен Bootstrap 3.3.0» . Архивировано 24 июля 2016 года . Проверено 23 февраля 2017 года .
  9. ↑ Отто, Марк (19 августа 2015 г.). "Bootstrap 4 alpha" . Архивировано 23 января 2017 года . Проверено 23 февраля 2017 года .
  10. ^ Отто, Марк; Торнтон, Джейкоб (10.08.2017). «Bootstrap 4 Beta» . Проверено 16 августа 2017 .
  11. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (18 января 2018 г.). «Bootstrap 4» . blog.getbootstrap.com . Проверено 16 марта 2018 .
  12. ^ «Поддерживаемые браузеры» . Бутстрап . Проверено 23 февраля 2017 года .
  13. ^ a b c "Bootstrap 5 Alpha" . Блог разработчиков . 22 июня 2020.
  14. ^ "Bootstrap 5 Beta" . Блог разработчиков . 7 декабря 2020.
  15. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (21.12.2018). «Bootstrap 4.2.1» . Блог Bootstrap . Проверено 22 марта 2019 .
  16. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (11.02.2019). «Bootstrap 4.3.0» . Блог Bootstrap . Проверено 29 сентября 2019 .
  17. ^ "Сетка Bootstrap 5 от MartijnCuppens · Запрос на извлечение # 28517 · twbs / bootstrap" . GitHub . Проверено 29 сентября 2019 .
  18. ^ "v5: отказаться от поддержки Internet Explorer от XhmikosR · Запрос на включение # 30377 · twbs / bootstrap" . GitHub . Проверено 7 апреля 2020 .

Внешние ссылки [ править ]

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