Bootstrap

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Bootstrap
Boostrap logo.svg
Тип шаблони HTML та CSS
Автор(и) Марк Отто, Джейкоб Торнтон
Перший випуск Серпень 2011 р.
Стабільний випуск 4.0.0 (18 січня 2018; 298 днів тому[1])
Версії 4.0.0-alpha.6 (6 січня 2017)[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 — це безкоштовний набір інструментів з відкритим кодом, призначений для створення веб-сайтів та веб-додатків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних веб-сайтів і веб-додатків.

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. https://github.com/twbs/bootstrap/releases/tag/v4.0.0-alpha.6
  3. GitHub: Popular Watched Repositories. Процитовано 26 July 2012. 
  4. NASA - Spot The Station. 2012-11-06. Архів оригіналу за 2013-08-25. 
  5. MSNBC - Breaking News. 2012-11-06. Архів оригіналу за 2013-08-25. 
  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. 

Посилання[ред. | ред. код]