Bootstrap
![]() | |
Тип | шаблони HTML та CSS |
---|---|
Автори | Марк Отто, Джейкоб Торнтон |
Перший випуск | Серпень 2011 р. |
Стабільний випуск | 4.0.0 (18 січня 2018[1]) |
Нестабільний випуск | 5.2.0[2] (Jul 2022) |
Платформа | Веб платформа |
Операційна система | крос-платформовий |
Мова програмування | HTML, CSS, LESS та JavaScript |
Розмір | ~580Кб |
Стан розробки | активний |
Ліцензія | Ліцензія MIT (Apache License 2.0) |
Репозиторій | github.com/twbs/bootstrap |
Вебсайт | getbootstrap.com |
Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебзастосунків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебзастосунків.
Bootstrap — це клієнтський фреймворк, тобто інтерфейс для користувача, на відміну від коду серверної сторони, який знаходиться на сервері. Репозиторій із цим фреймворком є одним із найпопулярніших на GitHub.[3] Серед інших, його використовують NASA і MSNBC[4][5].
Bootstrap (початкова назва — Twitter Blueprint) був розроблений Марком Отто та Джейкобом Торнтоном як фреймворк для забезпечення однаковості внутрішніх інструментів Twitter. До появи Bootstrap у розробці інтерфейсу застосовувалися різні бібліотеки, що призводило до появи суперечностей та ускладнювало супровід. За словами Марка Отто:
![]() |
Маленька група розробників, до складу якої входив і я, спроектувала й побудувала новий внутрішній інструмент, що мав потенціал для створення ширшого рішення. За кілька місяців з'явилася початкова версія Bootstrap, яка є засобом для документування та поширення загальних шаблонів і засобів проектування всередині компанії[6]. | ![]() |
Через кілька місяців до розробки рішення долучилося багато розробників компанії Twitter. Проект було перейменовано з Twitter Blueprint на Bootstrap. Реліз із відкритим сирцевим кодом вийшов 19 серпня 2011 року. Нині проект підтримується групою розробників на чолі з Марком Отто та Джейкобом Торнтоном, а також широкою спільнотою прихильників.
Упродовж 2015—2016 років розробляється і готується до виходу четверта версія фреймворку з численними оновленнями:[7]
- використано синтаксис Sass замість Less;
- покращено процес верстки макетів, зокрема блочної структури;
- додано підтримка flexbox, компоненту з HTML5;
- прев'ю та панелі замінено компонентом «карти» — це віднині невеликі за форматом елементи з прев'ю зображень, текстових блоків з бордерами;
- всі HTML-резети зібрано в єдиному модулі під назвою «Reboot» (в попередніх версіях цей код зберігався в Normalize.css);
- додано нові можливості з кастомізації шаблонів. Для оновлення стилів за замовчанням досить відредагувати змінну в Sass-файлі і отримати оновлених файл css.
- скасовано підтримку IE8;
- розміри вказано у rem і em замість пікселів, що покращує мобільний вигляд фреймворку;
- оновлено всі плагіни JavaScript;
- оновлено роботу спливних вікон і підказок;
- покращено документацію і пошук сайтом фреймворку.
Як заявлять розробники, код, написаний на третій версії, буде підтримуватись четвертою.[8]
Bootstrap 5 Alpha був офіційно випущений 16 червня 2020 року.
- Відмова від jQuery на користь звичайного JavaScript;
- Переписання сітки на підтримку стовпців, розміщених поза рядками, та реагуючих жолобів;
- Перенесення документації з Jekyll на Hugo;
- Відмова від підтримки IE10 та IE11;
- Переміщення інфраструктури тестування з QUnit на Jasmine;
- Додавання власного набору піктограм SVG;
- Додавання власних властивостей CSS;
- Покращений API;
- Покращена система сіток;
- Покращено налаштування документів;
- Оновлені форми.
Всього було випущено 3 версії Bootstrap Alpha.
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 (деякі з цих браузерів підтримуються не на всіх платформах).[9]
Bootstrap має модульну структуру і складається переважно з наборів таблиць стилів LESS, які реалізують різні компоненти цього набору інструментів. Розробники можуть самостійно налаштовувати файли Bootstrap, обираючи компоненти для свого проекту.
Основні інструменти Bootstrap:
- Сітки (grid) — наперед задані, готові до використання колонки
- Шаблони (template) — фіксовані чи адаптивні шаблони сторінок
- Типографіка (typography) — опис та визначення класів для шрифтів, таких як шрифти для коду, цитат тощо
- Мультимедіа (media) — засоби управління зображеннями та відео
- Таблиці (table) — засоби оформлення таблиць, які зокрема забезпечують сортування
- Форми (form) — класи для оформлення як форм, так і деяких подій
- Навігація (nav, navbar) — класи для оформлення вкладок, сторінок, меню і панелей навігації
- Сповіщення (alert) — класи для оформлення діалогових вікон, підказок і спливаючих вікон
- Іконочний шрифт (icon font) — набір іконок у вигляді шрифту, складається майже з 500 компонентів.
Окрім стилів, фреймворк містить також функціональні компоненти, які побудовані на js з використанням jQuery і містять такі плагіни:[10]
- 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 4.0.0 released. Архів оригіналу за 19 березня 2018. Процитовано 20 березня 2018.
- ↑ v5.2.0 Latest
- ↑ GitHub: Popular Watched Repositories. Архів оригіналу за 19 квітень 2010. Процитовано 26 липня 2012.
- ↑ NASA - Spot The Station. 6 листопада 2012. Архів оригіналу за 24 серпня 2013. Процитовано 22 серпня 2013.
- ↑ MSNBC - Breaking News. 6 листопада 2012. Архів оригіналу за 24 серпня 2013. Процитовано 22 серпня 2013.
- ↑ Otto, Mark (17 січня 2012). Bootstrap in A List Apart No. 342. Mark Otto. Архів оригіналу за 12 травня 2020. Процитовано 8 січня 2016.
- ↑ Otto, Mark (19 серпня 2015). Bootstrap 4 alpha. blog.getbootstrap.com (англ.). Процитовано 15 лютого 2024.
- ↑ contributors, Mark Otto, Jacob Thornton, and Bootstrap. Bootstrap. v4-alpha.getbootstrap.com. Архів оригіналу за 27 жовтня 2016. Процитовано 27 жовтня 2016.
- ↑ Supported browsers. Bootstrap. Архів оригіналу за 18 серпня 2015. Процитовано 8 січня 2016.
- ↑ contributors, Mark Otto, Jacob Thornton, and Bootstrap. JavaScript · Bootstrap. getbootstrap.com. Архів оригіналу за 26 грудня 2016. Процитовано 13 грудня 2016.
- Офіційний сайт (англ.)
- Український переклад документації Bootstrap [Архівовано 21 серпня 2014 у Wayback Machine.] | CSS · Bootstrap (українською) [Архівовано 27 березня 2018 у Wayback Machine.]
- Сирцевий код Bootstrap на Github [Архівовано 4 липня 2016 у Wayback Machine.] (англ.)
- Набір інтерфейсу користувача Bootstrap [Архівовано 22 липня 2020 у Wayback Machine.] (англ.)