0

Основи bootstrap

Практично будь-яка веб-сторінка містить безліч схожих компонентів, які зустрічаються і на інших сайтах. Це меню, навігація, елементи форм, заголовки і ін. Не кажучи вже про багатоколонковe верстку, без якої взагалі складно перетворити картинку макета в готову веб-сторінку. Щоб менше писати коду і по максимуму задіяти вже готові рішення застосовуються спеціалізовані бібліотеки, їх часто називають фреймворками. Одним з таких фреймворків для верстки є Bootstrap. 

Bootstrap розробили Марк Отто і Якоб Торнтон, співробітники Twitter, саме тому в назві фігурує ім'я компанії. Їх мета зрозуміла будь-якому розробнику - створити єдиний стандартний набір інструментів для співробітників компанії, що прискорює їх роботу. 

На сьогоднішній день Bootstrap давно переріс рамки однієї компанії, це відкритий продукт застосовується веб-розробниками для верстки сайтів в усьому світі.

 Які плюси несе в собі використання бібліотеки.

  •  Висока швидкість розробки/ Фактично Bootstrap є конструктор, фрагменти якого включа.ють в свій проект при необхідності. Це зменшує час розробки, тому що не потрібно придумувати і писати їх самостійно. 
  • Адаптивний дизайн. Bootstrap спрямований на створення макета під різні пристрої - ноутбуки, планшети, смартфони. При цьому код пишеться один, а масштабування в залежності від ширини пристрою бере на себе фреймворк. 
  • Відкрита програма. Ви можете вільно вивчати вихідні коди бібліотеки, змінювати і розширювати її під власні потреби. 
  • Сумісність з браузерами. Компоненти бібліотеки написані і протестовані з урахуванням роботи різних браузерів. Це гарантує, що макет буде виглядати однаково незалежно від обраного браузера. 
  • Низький поріг входження. Щоб використовувати бібліотеку в своїй роботі, потрібно мати мінімальні знання по HTML, CSS і JavaScript. Це дозволяє створювати ефектні сайти навіть початківцям розробникам. 
  • Єдина робота компонент. Bootstrap не просто вставляє якісь елементи на сторінку, але відразу ж встановлює їх оформлення і взаємодію з користувачем через JavaScript.  

Недоліки, звичайно ж, теж є і вони випливають в основному з універсальності системи. 

По-перше, файли бібліотеки, навіть стислі, займають досить багато місця і збільшують навантаження на сервер. З підвищенням досвіду потрібно завантажувати і встановлювати тільки необхідні компоненти Bootstrap, скорочуючи тим самим обсяг файлів.

 По-друге, пропоновані в бібліотеці стилі можуть не підходити під дизайн розроблюваного сайту і доведеться багато переробляти. У таких випадках, як відомо, простіше написати все самому з нуля. 

Загалом, Bootstrap годиться для типових сайтів, дизайн яких орієнтований на бібліотеку.

Установка bootstrap

Для початку необхідно завантажити Bootstrap з сайту розробника за наступною адресою:

https://v5.getbootstrap.com/docs/5.0/getting-started/download/

Це повна версія, яка містить всі необхідні скрипти і стилі. Всередині знаходиться три папки: css, js.

У папках зі стилями і скриптами докладено дві версії файлів - вихідна і компактна (в імені міститься min). Компактна відрізняється лише розміром файлу і зниженням читання коду. Найкраще на робочий сайт додавати саме цю версію, так трохи прискориться завантаження веб-сторінок. Зкопіювати всі папки в проект і в корені створити  index.html. 

В результаті структура проекту буде виглядати наступним чином.

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <link href="css/bootstrap.css" rel="stylesheet">
 </head>
 <body>
  <h1>Проект на bootstrap!</h1>
  <script src="js/bootstrap.js"></script>
 </body>
</html>

Якщо в процесі роботи буде потрібно перевизначити стилі якихось елементів, то можна підключити ще один власний стильовий файл і в ньому поставити необхідні властивості. Bootstrap також пропонує відразу налаштувати бажані параметри прямо у них на сайті, відзначити необхідні компоненти і завантажити персоніфіковану версію робочих файлів. Це робиться за наступним посиланням: 

https://getbootstrap.com/docs/3.4/customize/

Для покращення роботи з сітками bootstrap варто встановити для браузера Google Chrome розширення  Bootstrap Grid Overlay