Що таке сітка бутстрап?

37

Від автора: я вітаю вас. У минулих статтях ми розглянув підключення фреймворку Bootstrap і перші кроки роботи з ним. Настав час торкнутися саму важливу тему. А саме, як працює в Bootstrap сітка. Саме розуміння цього питання сильно спростить вам верстку сайтів.

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

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

12-ти колоночная сітка Bootstrap

Отже, в сітці цього фреймворку за замовчуванням 12 колонок. Насправді при кастомізації фреймворку ви зможете виставити будь-яке інше значення, але практично завжди вас буде влаштовувати 12 колонок. Число 12 ділиться на багато інших чисел, тому їм дуже зручно оперувати.

Якщо ви раніше створювали за допомогою html тегів таблиці, то таке порівняння буде для вас як не можна до речі. Адже сітку фреймворку можна порівняти із звичайною таблицею.

Вся сітка повинна розташовуватися в загальному контейнері. Це повинен бути блок з класом container або container-fluid. Відмінність у класів у тому, що перший має максимальні фіксовані розміри, а саме 1170 пікселів. Тобто ширина сайту не буде більше цього значення.

Container-fluid – це повністю гумовий контейнер, який розтягується завжди на 100% ширини вікна, тому якщо у вас повністю гумовий сайт, вам потрібен саме такий контейнер. Якщо ми говоримо про таблицях, то там теж є свій глобальний контейнер – table.

Усередині цього контейнера повинен бути ще один блок з класом row, тобто один рядок сітки. І знову ж таки, якщо порівнюємо з таблицями, то там за виведення одного табличного ряду відповідає тег tr. Ряди сітки таблиці дуже схожі, тому що в обох випадках вони просто виступають контейнерами для основного вмісту в них самих ніякої контент не розміщується, так і стилі до них не застосовуються.

Наприклад, якщо ми говоримо про простому сайті, то можна розділити його на три ряди – шапка сайту, блок для основного вмісту і бічна колонка і підвал. Зауважте, що контент і сайдбар ми помістили в один ряд, бо це дійсно так.

У самому ряду розташовуються вже безпосередньо осередку іл колонки, як прийнято говорити при верстці на Bootstrap. Колонка має клас col-x-x, де x – позначення пристрою, а другий – кількість колонок від 1 до 12. Як це працює, ми з вами зараз подивимося. Якщо вам вдасться це зрозуміти, ви швидко зрозумієте, чому так легко робити адаптивні сайти на Bootstrap.

Отже, розробники фремворка при створенні сітки виділили 4 основних типи пристроїв по ширині екрану. Гарну таблицю з переліком класів для сітки ви можете знайти в російській документації, яка знаходиться тут — http://www.oneskyapp.com/ru/docs/bootstrap/css#grid.

Ось скріншот цієї таблиці. Отже, ми бачимо, що для самих маленьких пристроїв, у яких ширина екрана менш 768 пікселів, префікс класу – col-xs — або якщо відкинути col, просто xs. Далі йде sm (small-devices, ширина від 768 до 991 пікселів), md (medium-devices, ширина від 992 до 1199 пікселів) і large-devices, з шириною понад 1200 пікселів.

Як же все це працює? Розбір на прикладах

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

Отже, давайте розглянемо цей шматок коду:

Перший
Перший

Якщо ви уважно читали попередній текст, то вже розумієте, що ми зараз створюємо свої перші блоки в сітці. Ми помістили в клас container 1 ряд, а в нього, у свою чергу, 2 блоку.

Як же працюють класи типу col-x-x? Дуже просто відкрийте поки браузер і подивіться на результат. До речі, результату-то й не видно, тому що ми ніяк не стилізували наші блоки. Давайте це виправимо. Цей код можна вставити у style.css, який ви самостійно створите і підключіть:

div[class^=col]{
background: #8CC7D9;
border: 1px solid #6B6ACD;
}

Відмінно, ось що ми бачимо в браузері:

Зазначу, що я переглядаю результат на своєму комп’ютері, у якого ширина екрана понад 1200 пікселів, а значить Bootstrap класифікує його як large-пристрій.

Отже, перший блок займає 25% ширини контейнера (якщо 12 колонок вважається за 100% ширини, 3, відповідно, за 25%). Ну а другий приблизно 8-8,5%, точні розрахунки нам ні до чого. Решта 66% ширини контейнера будуть порожні. Звичайно, на скріншоті ви цього не бачите, так як я просто не можу запхати в статтю скріншот всього мого екрану, так як він занадто великий, тому я і радив вам повторювати всі за мною.

А тепер давайте перевіримо, як поведуть себе блоки на ширині менш 992 пікселя. Почніть звужувати вікно. У Google Chrome після натискання F12 при звуженні ви будете бачити в правому верхньому куті точну ширину вікна.

Ну а я, мабуть, скористаюся браузером Internet Explorer. Ось так блоки виглядають на ширині трохи більше 768 пікселів, тобто на small-екранах.

Як бачите, замість 25% і 8% кожен блок займає тепер рівно на 50% ширини ряду. А все завдяки цим інструкціям:

col-md-3 col-sm-6
col-md-1 col-sm-6

Тобто за допомогою цих класів ми як би говоримо бутстрапу: на середніх і великих пристроях дай першого блоку ширину колонки 3 з 12, а другого – 1 з 12. А ось на маленьких, будь добрий, обидва блоки показати на 50% ширини ряду.

А що ж станеться самих маленьких екранах? Ось я зовсім звузив вікно, ніби ми дивимося сайт з телефону:

Як бачите, інструкція, яка діяла для small-пристроїв, скасувалася для extra-small і кожен блок став займати 100% ширини в ряді. Запам’ятайте, що це поведінка блоків за замовчуванням – займати 100% ширини у своєму контейнері.

З цього всього випливає кілька висновків, можете перечитати їх кілька разів, тому що зрозуміти ці речі вкрай важливо:

Якщо ми ставимо, наприклад, col-sm-6, то така ширина зберегтися у блоку і на md і lg, якщо для цих пристроїв нічого не прописано.

Візьмемо цей же приклад (col-sm-6). А ось на xs, тобто на екстра-маленьких пристроях, ширина блоку буде 100%, а не 50%. Тобто спадкування прописаної ширини відбувається тільки для великих пристроїв, але ні в якому випадків не для менших. Наприклад, якщо ви напишіть такий клас: col-lg-6, то така ширина блоку буде тільки на екранах більше 1200 пікселів. На md, sm, xs пристроях буде інша ширина.

Ви можете вказувати блоку не один, а кілька класів. Наприклад, col-xs-6 col-md-4. Спробуйте самі себе відповісти, якою буде ширина блоку на різних пристроях? Не читайте далі)

А відповідь така:

На xs-екранах буде 50%, тобто половина ширини контейнера

На sm те ж саме – 50%. Чому? Як я вже сказав вище, значення успадковується для пристроїв з більшою шириною.

На md блок займе третину ширини.

На найбільших екранах теж третину. Знову ж таки, значення успадковується з md.

Але Bootstrap нічим вас не обмежує і ви можете прописати навіть так:

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

УВАГА! Ніколи не допускайте ситуації, щоб у вас в одному ряду було більше 12-ти колонок, інакше ваш сайт може розвалитися.

Далі – цікавіше! Вкладені сітки

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

1
2
3

Отже, у нас є загальний контейнер, а в ньому один ряд. В ряд вкладений блок, який займає половину ширини контейнера на середніх і великих екранах, дві третини на маленьких і 100% на самих маленьких.

Але ж ми можемо спокійно уявити собі, що цей блок є теж контейнером, чому ні? По суті, так і є при розробці сайту. Є загальний контейнер для всього сайту, контейнер для контенту, сайдбара, шапки і т. д.

Можна уявити, що цей блок – контейнер для основного блоку з текстом на сайті, в нього ми поміщаємо, у свою чергу, ряд (обов’язково дотримуйтесь в коді структури – контейнер – ряд — комірки).

У цьому ряді, як бачите, 3 блока і для кожного задано поведінка на різних пристроях. По суті, ми отримали сітку всередині основної сітки! І ця вкладена сітка теж буде мати 12 колонок.

Я вам скажу навіть більше. Вкладених сіток може бути необмежена кількість. Наприклад, ці три блоки – це три картки товару в інтернет-магазині. Структура самої картки може бути теж досить складною. Хто знає, може, й там ви використовуєте вкладену сітку.

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

Адаптивні утиліти

Ще одна приголомшлива можливість фреймворку – адаптивні утиліти. Зараз поясню. Напевно ви не плануєте на мобільних пристроях відображати 100% елементів сайту, які видно на великих десктопах – вам просто нікуди будеть все це впихнути. Дуже часто на мобільних пристроях повністю прибирають бічну колонку, згортають меню, видаляють якісь великі декоративні елементи і т. д.

У Bootstrap все це дуже легко зробити за допомогою класів, які називають адаптивними утилітами. В документації ознайомитися з ними можна тут: http://www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities

Ось список цих класів. Щоб приховати елемент на потрібному пристрої, достатньо всього лише використовувати один з чотирьох класів: hidden-xs|sm|md|lg. Хочу зазначити, що елемент буде приховано лише на зазначеній ширині екрана, на всіх інших він залишиться видимим.

Якщо вам потрібно зробити елемент видимим тільки на одному з чотирьох типів пристроїв, зручніше використовувати класи visible-xs|sm|md|lg — block|inline|inline-block.

Крім самого ключового слова і типу пристроїв тут ще треба вказати, як саме відображати елемент: як блочний, рядковий або блочно-рядковий. Приклади:

visible-xs-inline – елемент буде видно тільки на самих маленьких екранах і буде відображатися як рядок;

visible-lg-block – буде видно тільки на найбільших екранах і буде блоковим;

Адаптивні утиліти дозволяють як завгодно трансформувати сайт на всіх типах пристроїв. Використовуйте їх по мірі необхідності у своїй верстці.

Інші можливості сітки і підсумок

Друзі, дуже багато ще можна написати про сітці бутстрапа, тому що ми розглянули приблизно половину теорії. З іншими класами і прикладами ви можете ознайомитися в документації.

Чому я настійно вам рекомендую? Тому що теорія, це теорія. Ви можете прочитати цю статтю разом з документацією хоч по 10 разів, але якщо не закріпіть всі приклади на практиці, це буде практично марно. Ми обожнюємо практику і вважаємо, що саме вона – запорука успіху. Навіть якщо з теорії щось ви не зрозумієте, то потім, під час верстки реального макета ви побачите своїми очима, як працює сітка, і вже ніхто з вас це розуміння не виб’є.

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

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