Bootstrap

Bootstrap

Тип	шаблони HTML та CSS
Автор(и)	Марк Отто, Джейкоб Торнтон
Перший випуск	Серпень 2011 р.
Стабільний випуск	4.0.0 (18 січня 2018 (2018-01-18))
Нестабільний випуск	5.2.0 (Jul 2022)
Платформа	Веб платформа і Microsoft Windows
Операційна система	крос-платформовий
Мова програмування	HTML, CSS, LESS та JavaScript
Розмір	~580Кб
Стан розробки	активний
Ліцензія	Ліцензія MIT (Apache License 2.0)
Репозиторій	github.com/twbs/bootstrap
Вебсайт	getbootstrap.com
Bootstrap у Вікісховищі

Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебзастосунків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебзастосунків.

Bootstrap — це клієнтський фреймворк, тобто інтерфейс для користувача, на відміну від коду серверної сторони, який знаходиться на сервері. Репозиторій із цим фреймворком є одним із найпопулярніших на GitHub. Серед інших, його використовують NASA і MSNBC.

Історія створення

Bootstrap (початкова назва — Twitter Blueprint) був розроблений Марком Отто та Джейкобом Торнтоном як фреймворк для забезпечення однаковості внутрішніх інструментів Twitter. До появи Bootstrap у розробці інтерфейсу застосовувалися різні бібліотеки, що призводило до появи суперечностей та ускладнювало супровід. За словами Марка Отто:

Маленька група розробників, до складу якої входив і я, спроектувала й побудувала новий внутрішній інструмент, що мав потенціал для створення ширшого рішення. За кілька місяців з'явилася початкова версія 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
• Переписання сітки на підтримку стовпців, розміщених поза рядками, та реагуючих жолобів
• Перенесення документації з Джекіла на Гюго
• Відмова від підтримки IE10 та IE11
• Переміщення інфраструктури тестування з QUnit на Jasmine
• Додавання власного набору піктограм SVG
• Додавання власних властивостей CSS
• Покращений API
• Покращена система сіток
• Покращено налаштування документів
• Оновлені форми

Всього було випущено 3 версії Bootstrap Alpha.

Bootstrap 5 Beta

Bootstrap 5 Beta був офіційно випущений 7 грудня 2020 року — через три тижні після запуску третьої альфа-версії.

Версія 5.2.0 на даний момент є останньою версією пакету.

Основні зміни включають

• Підтримка RTL — текстовий дисплей «справа наліво» для f.e. Арабські мови
• Перейменовані класи для логічних властивостей
• Оновлення до 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 [Архівовано 21 серпня 2014 у Wayback Machine.] | CSS · Bootstrap (українською) [Архівовано 27 березня 2018 у Wayback Machine.]
• Сирцевий код Bootstrap на Github [Архівовано 4 липня 2016 у Wayback Machine.] (англ.)
• Набір інтерфейсу користувача Bootstrap [Архівовано 22 липня 2020 у Wayback Machine.] (англ.)