Уроки адаптивної верстки Twitter Bootstrap 3
Що таке система сіток.
Система сіток у Twitter Bootstrap 3 - це швидкий шлях для створення html макету сайту. Саме це основна частина в bootstrap, т.к. завдяки сітки можна створити адаптивну версію сайту, забезпечує правильне розташування всіх елементів. І починає розробка макету з css класу container.
Container (контейнер) із фіксованою шириною.
З назви очевидно, що container містить задану width, зміни якої відбуваються внаслідок зміни робочого вікна браузера.
Вирівнювання відбувається по центру за допомогою css властивостей: Container має внутрішні відступи:
У таблиці нижче представлено ширину container, яка залежить від ширини вікна веб-клієнта користувача:
| 1170px | Понад або дорівнює 1200px |
| 970px | Понад або дорівнює 992px і менше 1200px |
| 750px | Понад або дорівнює 768px і менше 992px |
| Динамічна ширина (ширина дорівнює ширині робочої області вікна веб-клієнта) | Менше 768px |
Рис 1. Container з фіксованою шириною
Контейнер із гумовою шириною.
Рис 2. Container-fluid
Ряд всередині контейнера.
Після того, як ви визначилися з контейнером, потрібно переходити до рядів. Ряд приймає таку саму ширину, як і контейнер. Має негативний margin:
У результаті наша конструкція вже отримує вигляд (наприклад візьму фіксовану ширину):
Застосування блоків у Twitter Bootstrap.
Усередині блоку розміщується контент сайту. Також можна розміщувати ще однілави. Один ряд містить 12 блоків.
Рис 4. Блоки в одному ряду
Ширина блоку вказується у відносному форматі за допомогою необхідної кількості колонок. Стартова ширина – 1 – відповідає одній колонці Bootstrap, максимальна ширина – 12 – максимальна кількість колонок в одному ряду.
Наприклад: якщо нам необхідно в одному ряду мати 4 блоки з ідентичною шириною, то нам потрібно задати w> div class = "col-*-3" > . div > ). У сумі виходить 12 (3+3+3+3).
Рис 5. Приклад чотирьох блоків в одному ряду
Адаптивна верстка під гаджети
Але будьте тут уважніше! Наприклад, якщо ви використовуєте клас class = "col-sm-*" , то він буде застосовуватися не тільки до планшетів, але і до нетбуків і великих екранів, але це діє в тому випадку , якщо ви не вказали "col-md-*" та "col-lg-*" . Тобто. якщо у вашому ряду буде один блок для всіх екранів, достатньо написати div class = "col-xs-12" > . div > , а не div class = "col-xs-12 col-sm-12 col-md-12 col-lg-12" > . div > .
Приклад адаптивної верстки на Twitter Bootstrap 3
Теоретично – начебто все зрозуміло, і водночас нічого зрозуміло. Щоб хоч якось розібратися і закріпити всі ці блоки, ряди й зрозуміти зміст цієї сітки розгляну невеликий шматок коду, за допомогою якого все стане на свої місця.
Я не дизайнер, та й у цьому уроці ні чого не потрібно вигадувати супер гарного. Для загальної думки буде достатньо і схематичних зображень.
Як приклад я зверстаю макет, що складається з трьох блоків, які розташовані в одному ряду, але по-різному відображатимуться на пристроях користувача. На малюнку нижче якраз усе це показано. І, до речі, коли замовлятимете розробкумакету, то заздалегідь потрібно говорити дизайнеру, що верстка буде робитися під фреймворк Twitter Bootstrap 3, т.к. дизайнер відразу зображатиме елементи відповідно до сітки.
Рис 6. Схематичне розташування блоків на різних екранах
Велика ширина екрана
Стилі, що застосовуються до макету, будуть підключатися, коли активна область вікна браузера (ширина) більша і дорівнює 1200px. З зображення видно, що контейнери займають весь простір ряду і ділять його на три рівні частини. Виходить, 12 блоків потрібно розділити на 3 контейнери (бо вони всі однакові), отримуємо, що в одному такому контейнері 4 блоки.
Підсумок для великої ширини екрану:
Середня ширина екрана
Стилі, що застосовуються до макету, будуть підключатися, коли активна область вікна браузера (ширина) більша або дорівнює 992px і менше 1200px. Два контейнери розташовані горизонтально і займають ширину 100% (кожен контейнер займає 6 блоків), і один розташований з нового рядка і також займає 100% ширини (контейнер №12 займає 12 блоків). Щоб чітко пояснити браузеру, що контейнер потрібно розмістити без обтікання до інших контейнерів у twitter bootstrap, передбачений css-клас class = "clearfix" . Але ще один момент, т.к. цей клас повинен поширюватися на цей вид екранів, потрібно додати ще один клас - class = "visible-md-block" (md – це назва екрану, аналогічно з класами для блоку).
Підсумок для середньої ширини екрана (будьте уважні, я додаватиму до вже написаного коду нові класи та елементи):
Маленька ширина екрану та «крихта-екран»
Для "крихта-екран" можна опустити css-клас class = "col-xs-12", т.к. він займає 100% ширини екрану автоматично і щоб не захаращувати код зайвимисимволи можна видалити.
Кінцевий код для цього шаблону виглядатиме: