Уроки Bootstrap 3
Що ви навчитеся у цьому уроці? У цьому уроці ви зможете самостійно створити свій перший каркас (шаблон) сайту за допомогою сітки Bootstrap. Сітка Bootstrap складається з колонок і рядків. Щоб полегшити розуміння створення сітки, умовно розіб'ємо роботу на два етапи.
Етап 1 – створення рядків.
Створення сітки потрібно починати із створення рядків. Щоб створити рядок, потрібно в контейнері прописати div тег з класом «row» . "row" з англ. означає рядок. Рядок може бути необмежену кількість, але при створенні кожного нового рядка до тега div потрібно надавати клас «row» .
Етап 2 - робота з колонками.
Сітка Bootstrap складається з 12 колонок, усі колонки мають однакову ширину.
Колонки можна зливати по кілька штук та розміщувати їх у потрібній позиції.
Щоб злити (сумістити) колонки, необхідно всередині «row» вказати клас «col-md- * » , де * – число, що відповідає кількості колонок, які з'єднуємо.
Важливо! При з'єднанні колонок їх загальна кількість завжди повинна дорівнювати 12-ти.
Схема сітки Bootstrap
1-ий ряд: всі 12 колонок, з яких складається сітка; Другий ряд: припустимо, нам потрібна колонка, ширина якої дорівнює двом стандартним колонкам. Ми злили дві колонки, але загальна кількість колонок, як і раніше, дорівнює 12-ти. 7-ой ряд : у разі нам потрібно було поділити сітку на три рівних колонки, при цьому ми тричі злили по 4 колонки, що у сумі одно 12.
Отже, як би ви не розбивали колонки, загальна сума доданих колонок має бути 12.
А тепер я переведу схему сітки Bootstrap у код:
Якщо ви ще нічого не зрозуміли, то спробую пояснити так. Вам потрібно 2-х колонковий сайт. Ліворуч сайтбар,праворуч контент. Ви вже знаєте, що сітка в Bootstrap побудувати з 12 колонок. Пробуємо злити 4 колонки в одну. 1колонка + 1колонка + 1колонка + 1колонка = 4колонок Отже, для сайтбара, клас «col-md-» виглядатиме так: «col-md-4». 12 (колонок) - 4 (колонки, які ми об'єднали) = 8 (колонок залишилося).
Отже, для контенту клас «col-md-» виглядатиме так: «col-md-8» Ось так виглядає загальний код:
Ось і все диво.
У Bootstrap можна прописати різні CSS-стилі або розбити осередки по-різному для груп пристроїв.
Таблиця розмітки Bootstrap для різних груп пристроїв
| Дуже маленькі пристроїТелефони («col-lg-12»): |
- при середніх пристроях (≥992px) будуть на екрані дві колонки (діє клас «col-md-8» та клас «col-md-4»):
- при малих пристроях (≥768px) на екрані будуть дві колонки з однаковою шириною (діє клас «col-sm-6»):
- при дуже маленьких пристроях ("col-xs-12"):
Я гадаю, тут ви розібралися! Переходимо до практичного заняття. Припустимо, у мене є ось такий ескіз сайту:
Щоб створити цей макет, вам достатньо використати знання сьогоднішнього уроку. Ось так я вирішив це завдання:
Результат ви можете переглянути тут. Якщо хочете, можете змінити розмір екрана або відкрити сторінку результату через різні групи пристроїв.