Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебзастосунків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебзастосунків.
![]() | |
Тип | шаблони HTML та CSS |
---|---|
Автори | , |
Перший випуск | Серпень 2011 р. |
Стабільний випуск | 4.0.0 (18 січня 2018 ) |
Нестабільний випуск | 5.2.0 (Jul 2022) |
Платформа | Веб платформа |
Операційна система | крос-платформовий |
Мова програмування | HTML, CSS, LESS та JavaScript |
Розмір | ~580Кб |
Стан розробки | активний |
Ліцензія | Ліцензія MIT (Apache License 2.0) |
Репозиторій | github.com/twbs/bootstrap |
Вебсайт | getbootstrap.com |
|
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;
- Переписання сітки на підтримку стовпців, розміщених поза рядками, та реагуючих жолобів;
- Перенесення документації з 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 — плагін, що «приліплює» меню до одного з країв екрану під час прокручування сторінки.
Див. також
Примітки
- . Архів оригіналу за 19 березня 2018. Процитовано 20 березня 2018.
- v5.2.0 Latest
- . Архів оригіналу за 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). . 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. . v4-alpha.getbootstrap.com. Архів оригіналу за 27 жовтня 2016. Процитовано 27 жовтня 2016.
- . Bootstrap. Архів оригіналу за 18 серпня 2015. Процитовано 8 січня 2016.
- contributors, Mark Otto, Jacob Thornton, and 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.] (англ.)
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Ne plutati z Statistichnim butstrepom Bootstrap ce bezkoshtovnij nabir instrumentiv z vidkritim kodom priznachenij dlya stvorennya vebsajtiv ta vebzastosunkiv yakij mistit shabloni CSS ta HTML dlya tipografiki form knopok navigaciyi ta inshih komponentiv interfejsu a takozh dodatkovi rozshirennya JavaScript Vin sproshuye rozrobku dinamichnih vebsajtiv i vebzastosunkiv BootstrapTipshabloni HTML ta CSSAvtori Pershij vipuskSerpen 2011 r Stabilnij vipusk4 0 0 18 sichnya 2018 6 rokiv tomu 2018 01 18 Nestabilnij vipusk5 2 0 Jul 2022 PlatformaVeb platformaOperacijna sistemakros platformovijMova programuvannyaHTML CSS LESS ta JavaScriptRozmir 580KbStan rozrobkiaktivnijLicenziyaLicenziya MIT Apache License 2 0 Repozitorijgithub com twbs bootstrapVebsajtgetbootstrap com Mediafajli u Vikishovishi Bootstrap ce kliyentskij frejmvork tobto interfejs dlya koristuvacha na vidminu vid kodu servernoyi storoni yakij znahoditsya na serveri Repozitorij iz cim frejmvorkom ye odnim iz najpopulyarnishih na GitHub Sered inshih jogo vikoristovuyut NASA i MSNBC Istoriya stvorennyaBootstrap pochatkova nazva Twitter Blueprint buv rozroblenij Markom Otto ta Dzhejkobom Torntonom yak frejmvork dlya zabezpechennya odnakovosti vnutrishnih instrumentiv Twitter Do poyavi Bootstrap u rozrobci interfejsu zastosovuvalisya rizni biblioteki sho prizvodilo do poyavi superechnostej ta uskladnyuvalo suprovid Za slovami Marka Otto Malenka grupa rozrobnikiv do skladu yakoyi vhodiv i ya sproektuvala j pobuduvala novij vnutrishnij instrument sho mav potencial dlya stvorennya shirshogo rishennya Za kilka misyaciv z yavilasya pochatkova versiya Bootstrap yaka ye zasobom dlya dokumentuvannya ta poshirennya zagalnih shabloniv i zasobiv proektuvannya vseredini kompaniyi Cherez kilka misyaciv do rozrobki rishennya doluchilosya bagato rozrobnikiv kompaniyi Twitter Proekt bulo perejmenovano z Twitter Blueprint na Bootstrap Reliz iz vidkritim sircevim kodom vijshov 19 serpnya 2011 roku Nini proekt pidtrimuyetsya grupoyu rozrobnikiv na choli z Markom Otto ta Dzhejkobom Torntonom a takozh shirokoyu spilnotoyu prihilnikiv Bootstrap 4 Uprodovzh 2015 2016 rokiv rozroblyayetsya i gotuyetsya do vihodu chetverta versiya frejmvorku z chislennimi onovlennyami vikoristano sintaksis Sass zamist Less pokrasheno proces verstki maketiv zokrema blochnoyi strukturi dodano pidtrimka flexbox komponentu z HTML5 prev yu ta paneli zamineno komponentom karti ce vidnini neveliki za formatom elementi z prev yu zobrazhen tekstovih blokiv z borderami vsi HTML rezeti zibrano v yedinomu moduli pid nazvoyu Reboot v poperednih versiyah cej kod zberigavsya v Normalize css dodano novi mozhlivosti z kastomizaciyi shabloniv Dlya onovlennya stiliv za zamovchannyam dosit vidredaguvati zminnu v Sass fajli i otrimati onovlenih fajl css skasovano pidtrimku IE8 rozmiri vkazano u rem i em zamist pikseliv sho pokrashuye mobilnij viglyad frejmvorku onovleno vsi plagini JavaScript onovleno robotu splivnih vikon i pidkazok pokrasheno dokumentaciyu i poshuk sajtom frejmvorku Sumisnist kodu Bootstrap 3 iz Bootstrap 4 Yak zayavlyat rozrobniki kod napisanij na tretij versiyi bude pidtrimuvatis chetvertoyu Bootstrap 5 Alpha Bootstrap 5 Alpha buv oficijno vipushenij 16 chervnya 2020 roku Osnovni zmini vklyuchayut Vidmova vid jQuery na korist zvichajnogo JavaScript Perepisannya sitki na pidtrimku stovpciv rozmishenih poza ryadkami ta reaguyuchih zholobiv Perenesennya dokumentaciyi z Jekyll na Hugo Vidmova vid pidtrimki IE10 ta IE11 Peremishennya infrastrukturi testuvannya z QUnit na Jasmine Dodavannya vlasnogo naboru piktogram SVG Dodavannya vlasnih vlastivostej CSS Pokrashenij API Pokrashena sistema sitok Pokrasheno nalashtuvannya dokumentiv Onovleni formi Vsogo bulo vipusheno 3 versiyi Bootstrap Alpha Bootstrap 5 Beta Bootstrap 5 Beta buv oficijno vipushenij 7 grudnya 2020 roku cherez tri tizhni pislya zapusku tretoyi alfa versiyi Versiya 5 2 0 na danij moment ye ostannoyu versiyeyu paketu Osnovni zmini vklyuchayut Pidtrimka RTL tekstovij displej sprava nalivo dlya napriklad arabskih mov Perejmenovani klasi dlya logichnih vlastivostej Onovlennya do Popper js v2 Atributi danih iz prostorom imen Udoskonalennya JavaScript ta vipravlennya pomilok Pokrashenij API stanu v utilitah Zmini sho ocinyuyutsya Sistema moduliv Sass Zbilshennya vikoristannya vlasnih vlastivostej CSS Vbudovuvannya SVG v HTML zamist CSS Tehnologiyi ta mozhlivostiBootstrap sumisnij z ostannimi versiyami brauzeriv Google Chrome Firefox Internet Explorer Opera i Safari deyaki z cih brauzeriv pidtrimuyutsya ne na vsih platformah Struktura i funkciyiBootstrap maye modulnu strukturu i skladayetsya perevazhno z naboriv tablic stiliv LESS yaki realizuyut rizni komponenti cogo naboru instrumentiv Rozrobniki mozhut samostijno nalashtovuvati fajli Bootstrap obirayuchi komponenti dlya svogo proektu Osnovni instrumenti Bootstrap Sitki grid napered zadani gotovi do vikoristannya kolonki Shabloni template fiksovani chi adaptivni shabloni storinok Tipografika typography opis ta viznachennya klasiv dlya shriftiv takih yak shrifti dlya kodu citat tosho Multimedia media zasobi upravlinnya zobrazhennyami ta video Tablici table zasobi oformlennya tablic yaki zokrema zabezpechuyut sortuvannya Formi form klasi dlya oformlennya yak form tak i deyakih podij Navigaciya nav navbar klasi dlya oformlennya vkladok storinok menyu i panelej navigaciyi Spovishennya alert klasi dlya oformlennya dialogovih vikon pidkazok i splivayuchih vikon Ikonochnij shrift icon font nabir ikonok u viglyadi shriftu skladayetsya majzhe z 500 komponentiv Bootstrap jsOkrim stiliv frejmvork mistit takozh funkcionalni komponenti yaki pobudovani na js z vikoristannyam jQuery i mistyat taki plagini Transitions plavni zmini plagin vikoristovuyetsya dlya nalashtuvannya ostannih komponentiv frejmvorku Modal modalni vikna yak splivni tak i vbudovani v storinku Dropdown vipadni spiski pobudovani bez tegu select Scrollspy plagin sho avtomatichno zminyuye aktivnij punkt u menyu zalezhno vid poziciyi prokruchuvannya storinki Tab vkladki vikoristovuyetsya zazvichaj dlya stilizovanoyi navigaciyi Tooltip splivni pidkazki tekstovi elementi yaki z yavlyayutsya poryad iz vkazanim ob yektom pislya navedennya kursoru Popover analog splivnih pidkazok ale z bilshimi mozhlivostyami U pidkazku mozhna dodavati zagolovok do togo zh blok z yavlyayetsya pislya kliku na ob yekti Alert informacijni povidomlennya yaki stvoryuyutsya klasom alert ale z mozhlivistyu zakrittya Button plagin dlya keruvannyami stanami knopok Zavdyaki metodam plaginu mozhna zminyuvati stan i tip knopki a takozh stvoryuvati elementi yaki povodyatsya yak checkbox abo radio button ale pri comu ye zvichajnimi blochnimi elementami Collapse zgortannya blochnih elementiv Carousel multimedijna galereya zobrazhen Affix plagin sho priliplyuye menyu do odnogo z krayiv ekranu pid chas prokruchuvannya storinki Div takozhFrejmvorki kaskadnih tablic stiliv Skeleton Skeleton HTML HTML5 CSS LESS CSS frejmvork JavaScript jQueryPrimitki Arhiv originalu za 19 bereznya 2018 Procitovano 20 bereznya 2018 v5 2 0 Latest Arhiv originalu za 19 kviten 2010 Procitovano 26 lipnya 2012 NASA Spot The Station 6 listopada 2012 Arhiv originalu za 24 serpnya 2013 Procitovano 22 serpnya 2013 MSNBC Breaking News 6 listopada 2012 Arhiv originalu za 24 serpnya 2013 Procitovano 22 serpnya 2013 Otto Mark 17 sichnya 2012 Mark Otto Arhiv originalu za 12 travnya 2020 Procitovano 8 sichnya 2016 Otto Mark 19 serpnya 2015 Bootstrap 4 alpha blog getbootstrap com angl Procitovano 15 lyutogo 2024 contributors Mark Otto Jacob Thornton and Bootstrap v4 alpha getbootstrap com Arhiv originalu za 27 zhovtnya 2016 Procitovano 27 zhovtnya 2016 Bootstrap Arhiv originalu za 18 serpnya 2015 Procitovano 8 sichnya 2016 contributors Mark Otto Jacob Thornton and Bootstrap getbootstrap com Arhiv originalu za 26 grudnya 2016 Procitovano 13 grudnya 2016 PosilannyaOficijnij sajt angl Ukrayinskij pereklad dokumentaciyi Bootstrap 21 serpnya 2014 u Wayback Machine CSS Bootstrap ukrayinskoyu 27 bereznya 2018 u Wayback Machine Sircevij kod Bootstrap na Github 4 lipnya 2016 u Wayback Machine angl Nabir interfejsu koristuvacha Bootstrap 22 lipnya 2020 u Wayback Machine angl