Bootstrap (интерфейсный фреймворк) - Bootstrap (front-end framework)

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

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

Bootstrap - седьмой по популярности проект на GitHub, с более чем 142 000 звезд, позади freeCodeCamp (почти 312 000 звезд) и немного отстает Vue.js рамки.[2]

История

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

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

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

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

Bootstrap 2 и 3

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

Следующая основная версия, Bootstrap 3, была выпущена 19 августа 2013 г. В ней были переработаны компоненты для использования плоский дизайн и сначала мобильный подход.[7]

Бутстрап 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]

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

  • Существенная переработка кода
  • Замена Меньше с Sass
  • Добавление Перезагрузить, набор изменений CSS для конкретных элементов в одном файле на основе Нормализовать
  • Прекращение поддержки IE8, IE9, и iOS 6
  • Гибкая коробка CSS поддерживать
  • Добавление параметров настройки навигации
  • Добавление гибких утилит интервалов и размеров
  • Переход с пиксели блок в CSS для корень ems
  • Увеличение глобального размера шрифта с 14 до 16 пикселей для улучшения читаемости
  • Отбрасывая панель, миниатюра, пейджер, и Что ж составные части
  • Отбрасывая Глификоны значок шрифта
  • Огромное количество[количественно оценить ] служебных классов
  • Улучшенный стиль форм, кнопки, раскрывающиеся меню, медиа-объекты и классы изображений.

Bootstrap 4 поддерживает последние версии Гугл Хром, Fire Fox, Internet Explorer, Опера, и Сафари (кроме Windows). Он дополнительно поддерживает возврат к IE10 и последний Fire Fox Выпуск с расширенной поддержкой (ESR).[12]

Бутстрап 5 Альфа

Bootstrap 5 Alpha был официально выпущен 16 июня 2020 г.[13] хотя экспериментальная версия пакета, созданная Material Design для Bootstrap на основе версии Alpha для разработчиков, уже появилась в Интернете за несколько недель до этого.[14]

Версия 5 Alpha в настоящее время является последней версией пакета.

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

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

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

  • Поддержка RTL
  • Реализация меню вне холста

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

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

Сценарии использования:

Первые варианты использования альфа-версии Bootstrap 5 появились всего через несколько дней после официальной премьеры, самые известные из них:

  • MDB 5 - UI Kit для материального дизайна для Bootstrap 5[21]

Функции

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

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

Пример веб-страницы с использованием фреймворка Bootstrap
Пример веб-страницы с использованием фреймворка Bootstrap, отрисованного в Fire Fox

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

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

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

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

Цвета Bootstrap по умолчанию по сравнению с Веб-цвета с таким же названием
ИмяHex
(RGB)		красный
(RGB)		Зеленый
(RGB)		Синий
(RGB)		Оттенок
(HSL / HSV)		Суббота.
(HSL)		Свет
(HSL)		Суббота.
(HSV)		Ценить
(HSV)		Альтернативы
Bootstrap Белый #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%
Бутстрап Серый 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%
Bootstrap Orange # 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%
Bootstrap Cyan # 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%Аква

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

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

  1. ^ «Релизы - twbs / bootstrap». Получено 31 октября 2020.
  2. ^ «Поиск · звезды:> 1». GitHub. Получено 14 ноября, 2018.
  3. ^ Отто, Марк (17 января 2012 г.). "Bootstrap в списке кроме № 342". Блог Марка Отто. В архиве с оригинала 28 октября 2016 г.. Получено 23 февраля, 2017.
  4. ^ Отто, Марк (19 августа 2011 г.). "Bootstrap из Twitter". Блог разработчиков. 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". Получено 2017-08-16.
  11. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (18 января 2018 г.). "Bootstrap 4". blog.getbootstrap.com. Получено 2018-03-16.
  12. ^ «Поддерживаемые браузеры». Бутстрап. Получено 23 февраля, 2017.
  13. ^ "Bootstrap 5 Alpha". Блог разработчиков. 22 июня 2020.
  14. ^ "Bootstrap 5 Experimental". MDBootstrap.com. 22 июня 2020.
  15. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (21 декабря 2018 г.). "Bootstrap 4.2.1". Блог Bootstrap. Получено 2019-03-22.
  16. ^ участники, Марк Отто, Джейкоб Торнтон и Bootstrap (11.02.2019). "Bootstrap 4.3.0". Блог Bootstrap. Получено 2019-09-29.
  17. ^ "Сетка Bootstrap 5 от MartijnCuppens · Запрос на включение # 28517 · twbs / bootstrap". GitHub. Получено 2019-09-29.
  18. ^ "v5: отказаться от поддержки Internet Explorer от XhmikosR · Запрос на включение # 30377 · twbs / bootstrap". GitHub. Получено 2020-04-07.
  19. ^ "Bootstrap 5 Alpha". Блог разработчиков. 22 июня 2020.
  20. ^ "Bootstrap 5 Alpha". Блог разработчиков. 22 июня 2020.
  21. ^ "Bootstrap 5 Материальный дизайн". MDBootstrap.com. 22 июня 2020.

22. ^CSS Bootstrap Автор: getbootstrap.com.vn

внешняя ссылка