Відкрити головне меню

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

Bootstrap
Bootstrap logo.svg
Тип шаблони HTML та CSS
Автор(и) Марк Отто, Джейкоб Торнтон
Перший випуск Серпень 2011 р.
Стабільний випуск 4.0.0 (18 січня, 2018; 21 місяць тому (2018-01-18)[1])
Версії 4.4.1 (28 листопада 2019)[2]
Репозиторій github.com/twbs/bootstrap
Нестабільний випуск 4 Beta 3 (28 Dec 2017)
Операційна система крос-платформовий
Написано на HTML, CSS, LESS та JavaScript
Розмір ~580Кб
Стан розробки активний
Ліцензія Ліцензія MIT (Apache License 2.0)
getbootstrap.com

Bootstrap у Вікісховищі?

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

Історія створенняРедагувати

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

« Маленька група розробників, до складу якої входив і я, спроектувала й побудувала новий внутрішній інструмент, що мав потенціал для створення ширшого рішення. За кілька місяців з'явилася початкова версія Bootstrap, яка є засобом для документування та поширення загальних шаблонів і засобів проектування всередині компанії[6]. »

Через кілька місяців до розробки рішення долучилося багато розробників компанії Twitter. Проект було перейменовано з Twitter Blueprint на Bootstrap. Реліз із відкритим сирцевим кодом вийшов 19 серпня 2011 року. Нині проект підтримується невеликою групою розробників на чолі з Марком Отто та Джейкобом Торнтоном, а також широкою спільнотою прихильників.

Bootstrap 4Редагувати

Упродовж 2015—2016 років розробляється і готується до виходу четверта версія фреймворку з численними оновленнями:[7]

  • використано синтаксис Sass замість Less;
  • покращено процес верстки макетів, зокрема блочної структури;
  • додано підтримка flexbox, компоненту з HTML5;
  • прев'ю та панелі замінено компонентом «карти» — це віднині невеликі за форматом елементи з прев'ю зображень, текстових блоків з бордерами;
  • всі HTML-резети зібрано в єдиному модулі під назвою «Reboot» (в попередніх версіях цей код зберігався в Normalize.css);
  • додано нові можливості з кастомізації шаблонів. Для оновлення стилів за замовчанням досить відредагувати змінну в Sass-файлі і отримати оновлених файл css.
  • скасовано підтримку IE8;
  • розміри вказано у rem і em замість пікселів, що покращує мобільний вигляд фреймворку;
  • оновлено всі плагіни JavaScript;
  • оновлено роботу спливних вікон і підказок;
  • покращено документацію і пошук сайтом фреймворку.

Сумісність коду Bootstrap 3 із Bootstrap 4Редагувати

Як заявлять розробники, код, написаний на третій версії, буде підтримуватись четвертою.[8]

Технології та можливостіРедагувати

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 компонентів.

Bootstrap.jsРедагувати

Окрім стилів, фреймворк містить також функціональні компоненти, які побудовані на js з використанням jQuery і містять такі плагіни:[10][11]

  • Transitions — плавні зміни, плагін використовується для налаштування останніх компонентів фреймворку.
  • Modal — модальні вікна, як спливні, так і вбудовані в сторінку.
  • Dropdown — випадні списки, побудовані без тегу select.
  • Scrollspy — плагін, що автоматично змінює активний пункт у меню залежно від позиції прокручування сторінки.
  • Tab — вкладки, використовується зазвичай для стилізованої навігації.
  • Tooltip — спливні підказки, текстові елементи, які з'являються поряд із вказаним об'єктом після наведення курсору.[12]
  • Popover — аналог спливних підказок, але з більшими можливостями. У підказку можна додавати заголовок, до того ж блок з'являється після кліку на об'єкті.
  • Alert — інформаційні повідомлення, які створюються класом .alert, але з можливістю закриття.
  • Button — плагін для керуваннями станами кнопок. Завдяки методам плагіну можна змінювати стан і тип кнопки, а також створювати елементи, які поводяться як checkbox або radio button, але при цьому є звичайними блочними елементами.
  • Collapse — згортання блочних елементів.[13]
  • Carousel — мультимедійна галерея зображень.[14]
  • Affix — плагін, що «приліплює» меню до одного з країв екрану під час прокручування сторінки.

Див. такожРедагувати

ПриміткиРедагувати

  1. Bootstrap 4.0.0 released
  2. Release 4.4.1 — 2019.
  3. GitHub: Popular Watched Repositories. Архів оригіналу за 19 квітень 2010. Процитовано 26 July 2012. 
  4. NASA - Spot The Station. 2012-11-06. Архів оригіналу за 2013-08-24. Процитовано 2013-08-22. 
  5. MSNBC - Breaking News. 2012-11-06. Архів оригіналу за 2013-08-24. Процитовано 2013-08-22. 
  6. Otto, Mark (17 January 2012). Bootstrap in A List Apart No. 342. Mark Otto. 
  7. Обзор 4-й версии Bootstrap: описание, преимущества и недостатки » Tokar.ua. Tokar.ua. Процитовано 2016-10-27. 
  8. contributors, Mark Otto, Jacob Thornton, and Bootstrap. Bootstrap. v4-alpha.getbootstrap.com. Процитовано 2016-10-27. 
  9. Supported browsers. Bootstrap. 
  10. bootstrap » Tokar.ua. Tokar.ua. Процитовано 2016-12-13. 
  11. contributors, Mark Otto, Jacob Thornton, and Bootstrap. JavaScript · Bootstrap. getbootstrap.com. Процитовано 2016-12-13. 
  12. Уроки по Bootstrap: спливні підказки (tooltip.js) » Tokar.ua. Tokar.ua. Процитовано 2016-12-13. 
  13. Уроки по Bootstrap. Урок №12: JS collapse, спойлеры, сворачивание блоков. Tokar.ua. Процитовано 2016-12-13. 
  14. contributors, Mark Otto, Jacob Thornton, and Bootstrap. JavaScript · Bootstrap. getbootstrap.com. Процитовано 2016-12-13. 

ПосиланняРедагувати