Як підключити Bootstrap до CSS та як працювати із сіткою Bootstrap?

Bootstrap – найпопулярніший CSS-фреймворк. Більше того, це не тільки css, а й js-фреймворк. Тобто в ньому написані готові стилі та скрипти, для застосування яких достатньо всього лише прописати необхідні стильові класи й атрибути html-елементам. Він ідеально підходить для розробки мобільних проєктів. В першу чергу завдяки сітці Bootstrap, яка дає змогу легко адаптувати будь-який сайт і добре відображати його на будь-яких пристроях.

Читайте також: Як видалити обліковий запис Google – детальний гайд

Для чого потрібен Bootstrap?

Css-фреймворк – це файл або кілька файлів із готовим написаним кодом, які підключаються до сайту в секції head, спрощуючи верстку сайту. Річ у тім, що якщо робити розробку сайту з нуля, то доведеться подбати про дуже багато речей. Усі css-стилі, усі веб-сценарії доведеться писати з нуля, але це можуть бути сотні й тисячі рядків коду. До того ж можна припуститися безлічі помилок у верстці. Наприклад, шаблон матиме різний вигляд в основних браузерах або він буде не адаптивний.

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

А що ж Bootstrap? Цей фреймворк він сильно спрощує верстку. Він бере на себе кросбраузерність і адаптивність, а це основні речі, про які має подбати розробник. Він дає змогу створити html-шаблон навіть людині, яка раніше дуже мало займалася версткою і особливо не знайома з css.

Цей фреймворк ідеально підходить для роботи в команді. Верстка за належного вміння і розуміння відбувається в 3-5 разів швидше, а однаковість коду дасть змогу будь-якому вашому колезі внести правки.

Мінімальний набір інструментів для розробки на Bootstrap

Перед підключенням Bootstrap і створенням на його основі дизайну сайтів і веб-додатків необхідно мати такий мінімальний набір програм:

• Текстовий редактор для роботи з кодом (Visual Studio Code, Sublime Text, Atom або ін.) або IDE (WebStorm, NetBeans або ін.);
• Браузер (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Opera або ін.).

Як підключити Bootstrap

Створення дизайну веб-проєкту, в основу якого покладено Bootstrap, завжди починається з його встановлення.

Підключити Bootstrap до сайту можна трьома основними способами:

1. Збірка з вихідних кодів. Варіант із самостійною збіркою з вихідних кодів здебільшого застосовується, коли потрібно детально налаштувати Bootstrap під свій проєкт, а також виключити з нього всі непотрібні компоненти і плагіни. Більше підійде для просунутих верстальників. 
2. Підключення через CDN. Це найпростіший варіант встановлення. Тут завантажувати нічого не потрібно. Необхідно лише вставити в HTML посилання на файли, розміщені на CDN серверах.
3. Локальне встановлення. Для локального встановлення Bootstrap (з налаштуваннями за замовчуванням) необхідно завантажити готову збірку з GitHub. Потім розпаковуємо отриманий архів і копіюємо з нього мінімізовані версії файлів у свій проєкт. Підключаємо ці файли до HTML-сторінки. Ці збірки містять скомпільовані та готові до використання файли CSS і JavaScript. такий варіант більше підходить для проєктів, де немає великих вимог до дизайну та які можуть бути виконані у стилях, закладених авторами фреймворку за замовчуванням.

Як працювати з сіткою Bootstrap

Сітка Bootstrap використовується для розбивки інтерфейсу користувача на чітко визначені секції та рядки, що будуть виглядати логічно на екранах будь-якого розміру та роздільної здатності. Вона допомагає створювати макети, які підійдуть для різних пристроїв –  від настільних комп’ютерів до смартфонів.

Основні принципи

Сітка Bootstrap розділена на 12 стовпців. Кожен рядок може містити від 1 до 12 стовпців.

Bootstrap надає класи для створення рядків і стовпців. Наприклад, клас .row використовується для створення рядка, а класи .col-sm-4 .col-md-6 і .col-lg-12 використовуються для створення стовпців, які займають 4, 6 і 12 стовпців на екранах малих, середніх і великих розмірів відповідно.

Для створення простору між елементами використовується система відступів. Ви можете використовувати класи .offset- для зміщення стовпців вправо або вліво. Класи .text-left, .text-center, і .text-right використовують для вирівнювання тексту в стовпцях.

Приклад:

HTML

<div class=”container”>

  <div class=”row”>

    <div class=”col-sm-4″>Стовпець 1</div>

    <div class=”col-sm-4″>Стовпець 2</div>

    <div class=”col-sm-4″>Стовпець 3</div>

  </div>

</div>

Цей код створить три стовпці, які займатимуть по 4 стовпці на екранах малих розмірів. На екранах середніх розмірів стовпці 1 і 2 займатимуть по 6 стовпців, а стовпець 3-4 стовпці. На екранах великих розмірів всі стовпці займатимуть по 4 стовпці.

Як користуватися Bootstrap – відео

Щоб краще розібратися як користуватися цим популярним фреймворком, перегляньте відео:

Висновки

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

Відповіді на часті запитання про Bootstrap