Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебзастосунків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебзастосунків.
Bootstrap — це клієнтський фреймворк, тобто інтерфейс для користувача, на відміну від коду серверної сторони, який знаходиться на сервері. Репозиторій із цим фреймворком є одним із найпопулярніших на GitHub. Серед інших, його використовують NASA і MSNBC .
Історія створення Bootstrap (початкова назва — Twitter Blueprint) був розроблений Марком Отто та Джейкобом Торнтоном як фреймворк для забезпечення однаковості внутрішніх інструментів Twitter. До появи Bootstrap у розробці інтерфейсу застосовувалися різні бібліотеки, що призводило до появи суперечностей та ускладнювало супровід. За словами Марка Отто:
Через кілька місяців до розробки рішення долучилося багато розробників компанії Twitter. Проект було перейменовано з Twitter Blueprint на Bootstrap. Реліз із відкритим сирцевим кодом вийшов 19 серпня 2011 року. Нині проект підтримується групою розробників на чолі з Марком Отто та Джейкобом Торнтоном, а також широкою спільнотою прихильників.
Bootstrap 4 Упродовж 2015—2016 років розробляється і готується до виходу четверта версія фреймворку з численними оновленнями: використано синтаксис Sass замість Less; покращено процес верстки макетів, зокрема блочної структури; додано підтримка flexbox, компоненту з HTML5; прев'ю та панелі замінено компонентом «карти» — це віднині невеликі за форматом елементи з прев'ю зображень, текстових блоків з бордерами; всі HTML-резети зібрано в єдиному модулі під назвою «Reboot» (в попередніх версіях цей код зберігався в Normalize.css); додано нові можливості з кастомізації шаблонів. Для оновлення стилів за замовчанням досить відредагувати змінну в Sass-файлі і отримати оновлених файл css. скасовано підтримку IE8; розміри вказано у rem і em замість пікселів, що покращує мобільний вигляд фреймворку; оновлено всі плагіни JavaScript; оновлено роботу спливних вікон і підказок; покращено документацію і пошук сайтом фреймворку.
Сумісність коду Bootstrap 3 із Bootstrap 4 Як заявлять розробники, код, написаний на третій версії, буде підтримуватись четвертою.
Bootstrap 5 Alpha Bootstrap 5 Alpha був офіційно випущений 16 червня 2020 року.
Основні зміни включають
Відмова від jQuery на користь звичайного JavaScript; Переписання сітки на підтримку стовпців, розміщених поза рядками, та реагуючих жолобів; Перенесення документації з Jekyll на Hugo; Відмова від підтримки IE10 та IE11; Переміщення інфраструктури тестування з QUnit на Jasmine; Додавання власного набору піктограм SVG; Додавання власних властивостей CSS; Покращений API; Покращена система сіток; Покращено налаштування документів; Оновлені форми.
Всього було випущено 3 версії Bootstrap Alpha.
Bootstrap 5 Beta Bootstrap 5 Beta був офіційно випущений 7 грудня 2020 року — через три тижні після запуску третьої альфа-версії.
Версія 5.2.0 на даний момент є останньою версією пакету.
Основні зміни включають
Підтримка RTL — текстовий дисплей «справа наліво» для, наприклад, арабських мов; Перейменовані класи для логічних властивостей; Оновлення до Popper.js v2; Атрибути даних із простором імен; Удосконалення JavaScript та виправлення помилок; Покращений API — стану в утилітах.
Зміни, що оцінюються
Система модулів Sass; Збільшення використання власних властивостей CSS; Вбудовування SVG в HTML замість CSS.
Технології та можливості Bootstrap сумісний з останніми версіями браузерів Google Chrome, Firefox, Internet Explorer, Opera і Safari (деякі з цих браузерів підтримуються не на всіх платформах).
Структура і функції Bootstrap має модульну структуру і складається переважно з наборів таблиць стилів LESS, які реалізують різні компоненти цього набору інструментів. Розробники можуть самостійно налаштовувати файли Bootstrap, обираючи компоненти для свого проекту.
Основні інструменти Bootstrap:
Сітки (grid) — наперед задані, готові до використання колонки Шаблони (template) — фіксовані чи адаптивні шаблони сторінок Типографіка (typography) — опис та визначення класів для шрифтів, таких як шрифти для коду, цитат тощо Мультимедіа (media) — засоби управління зображеннями та відео Таблиці (table) — засоби оформлення таблиць, які зокрема забезпечують сортування Форми (form) — класи для оформлення як форм, так і деяких подій Навігація (nav, navbar) — класи для оформлення вкладок, сторінок, меню і панелей навігації Сповіщення (alert) — класи для оформлення діалогових вікон, підказок і спливаючих вікон Іконочний шрифт (icon font) — набір іконок у вигляді шрифту, складається майже з 500 компонентів.
Bootstrap.js Окрім стилів, фреймворк містить також функціональні компоненти, які побудовані на js з використанням jQuery і містять такі плагіни: Transitions — плавні зміни, плагін використовується для налаштування останніх компонентів фреймворку. Modal — модальні вікна, як спливні, так і вбудовані в сторінку. Dropdown — випадні списки, побудовані без тегу select. Scrollspy — плагін, що автоматично змінює активний пункт у меню залежно від позиції прокручування сторінки. Tab — вкладки, використовується зазвичай для стилізованої навігації. Tooltip — спливні підказки, текстові елементи, які з'являються поряд із вказаним об'єктом після наведення курсору. Popover — аналог спливних підказок, але з більшими можливостями. У підказку можна додавати заголовок, до того ж блок з'являється після кліку на об'єкті. Alert — інформаційні повідомлення, які створюються класом .alert, але з можливістю закриття. Button — плагін для керуваннями станами кнопок. Завдяки методам плагіну можна змінювати стан і тип кнопки, а також створювати елементи, які поводяться як checkbox або radio button, але при цьому є звичайними блочними елементами. Collapse — згортання блочних елементів. Carousel — мультимедійна галерея зображень. Affix — плагін, що «приліплює» меню до одного з країв екрану під час прокручування сторінки.
Див. також Фреймворки каскадних таблиць стилів Скелетон (Skeleton) HTML HTML5 CSS LESS CSS-фреймворк JavaScript jQuery
Примітки
Посилання
Український переклад документації Bootstrap | CSS · Bootstrap (українською) Сирцевий код Bootstrap на Github Набір інтерфейсу користувача Bootstrap