Здрастуйте, шановні читачі блогу . У першій частині статті по Bootstrap 3 ми познайомилися з можливостями цього фреймворку, дізналися про те, що таке чуйний дизайн і чому він так важливо в нашу епоху повального зростання популярності різноманітних мобільних гаджетів. Там ми також в усіх подробицях розглянули питання підключення Бутстрапа до Html сторінки (підключення файлів стилів, скриптів і бібліотеки jQuery).
Сьогоднішня стаття присвячена сітковою системою, використовуваної в Bootstrap 3. Ви дізнаєтеся, які розміри сіток можна застосовувати, як вони себе будуть вести на пристроях з різним розміром екрану і як самим створювати ряди і комірки на основі однієї або кількох сіток. Все це буде розказано на прикладах, що, сподіваюся, покращить сприйняття.
Як працює сіткова система в Bootstrap 3
Bootstrap 3 йде в комплекті з двенадцатиколоночной сітковою системою, яка розрахована в основному на мобільні пристрої. Тобто вона розроблена з прицілом в першу чергу саме на маленькі дисплеї, в вже в другу — на широкі екрани. У новій версії цього фреймворку є чотири розміру сітки. Всю цю інформацію можна докладно вивчити на офіційному сайті GetBootstrap.comперейшовши на вкладку «CSS» з верхнього меню і вибравши пункт «Grid system» у правому.
Там ви отримаєте повне пояснення принципів роботи системи, що належать до неї медіа запитів і т. п. Той ряд Html елементів (наприклад, анонси статей на головній сторінці), який ви захочете позиціонувати в сітці, потрібно буде оточити контейнером (наприклад, укласти тег Div) і прописати для нього клас .row (виглядати відкриваючий тег в цьому випадку буде як
).
Ну, а самі елементи всередині ряду ви зможете розподілити по одній або відразу за кількома типами сіток з допомогою прописування атрибут class зі значенням, наприклад, .col-xs-цифра (у цьому випадку використовується тільки надмалих сітка).
Для прикладу, якщо вам потрібно отримати в результаті три рівні за розміром колонки, то потрібно розділити 12 (розмірність сітки в Bootstrap 3) на 3 (потрібне число колонок). Значить для кожного елемента Html всередині ряду (це знову ж таки можуть бути контейнери Div) потрібно буде прописати однакові класи —
. Якщо потрібні колонки не рівної ширини, то потрібно буде просто дотримати умова, при якому цифри після col-xs — у всіх трьох класах в сумі повинні складати 12 (наприклад, 2-4-6). Але перш давайте розглянемо, що таке «xs» у цій записи і що це значить?
Трохи нижче в області «Grid options» ви знайде пояснення згаданих вище чотирьох розмірів сітки сучасного Бутстрапа.
Останні три сітки будуть горизонтальними лише при розмірах екрану по ширині більше точки, при якій настає «колапс» (злам). Наприклад, для великої сітки на екранах розміром менше 1200 пікселів вона перестане бути горизонтальною і перетвориться у вертикальну. На сторінці офіційного сайту GetBootstrap.com, яку ми зараз розглядаємо, наведені приклади і пояснення з цього приводу. Однак, на мій погляд, там все трохи плутано і складно.
Приклад роботи grid system Bootstrap 3 при різній ширині екрану
Спробую пояснити все це на готовому прикладі. Вам потрібно лише скопіювати файлик setka.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Сохранить по ссылке как…»). Якщо цей файлик ви безпосередньо відкриєте в браузері (клікнувши по наведеній посиланню лівою кнопкою миші), то нічого не вийде, бо не підключиться фреймворк Бутстрап.
Скачаний файлик setka.html помістіть в папку Bootstrap, про яку ми говорили у першій статті цього циклу за Бутстрапу. Він повинен знаходитися на тому ж рівні, що і створений нами раніше файл index.html.
Тепер відкрийте цей файлик setka.html в будь-якому зручному для вас браузері і зробіть ряд експериментів з розміром вікна вашого браузера, щоб побачити роботу Bootstrap 3 в дії і зрозуміти роботу сіткової системи. Яких саме? Зараз поясню.
У мене дозвіл екрану монітора по ширині становить 1280 пікселів, що більше точки зламу в 1200 пікселів, заданої для великої сітки. Що ми бачимо в результаті? Приблизно таку картину:
Тут наведено п’ять прикладів макету сайту, побудованих на різних типах сіток:
Таким чином ми зможете побачити і порівняти, як ці сітки з арсеналу Bootstrap 3 працюють разом і працюють окремо (при використанні тільки одного типу). Т. к. мій браузер при знятті попереднього скріншота було розгорнуто на весь екран (по ширині більший, ніж 1200 пікселів), то всі ці п’ять прикладів макету сайту розгорнуті по горизонталі (колонки розташовані поруч один з одним по ширині екрану).
Тепер давайте трохи звузити розмір вікна браузера, щоб по ширині воно стало менше 1200, але більше 992 пікселів, і пронаблюдаем стався злам (колапс).
Текст над верхнім рядом і префікси класу в його осередках змінилися (для цього використовувалися класи видно, про яких ще будемо говорити). Тепер вже використовується середня сітка, яка як і раніше відображається по горизонталі. В цей же час самий нижній ряд (який ілюструє застосування тільки великої сітки) склався вертикально, тобто сусідні блоки відображаються тепер не поруч один з одним по ширині, а один під одним (по висоті).
Виходить, що велика сітка у відсутності якого-небудь зовнішнього впливу веде себе саме таким чином — складається по вертикалі на всіх пристроях, розмір екрану яких по ширині менше 1200 пікселів. При цьому всі інші, що використовуються у прикладі сітки, відображаються горизонтально. У першому ряду використовується комбінація сіток, тому зараз він контролюється середньої сітковою системою (велика система вже ефекту не має).
Давайте ще раз зменшимо розмір вікна браузера по ширині так, щоб воно стало більше 768, але менше 992 пікселів. Відбудеться черговий злам:
Тепер (виходячи з розміру екрану) ми працюємо з маленькою сіткою. Відповідно, вже не тільки велика, але і середня сітка теж склалася вертикально. Ну, а в першому ряду, де використовується комбінація сіток, зараз все контролюється малої сітковою системою Бутстрапа. При цьому у файлі setka.html змінюється ще й розподіл колонок в цьому першому ряду, що зовсім не обов’язково, але так цілком можна робити для задоволення якихось своїх потреб у плані верстки (причому на «раз-два», взагалі без проблем).
Продовжуємо зменшувати ширину вікна браузера до значень менших 768 пікселів. Відбувається черговий злам:
В результаті, вже не тільки велика і середні сітки йдуть по сторінці вертикально, але до них приєдналася ще й мала. Єдиною горизонтальній залишилася дуже маленька сітка, яка залишається (як ми змогли тільки що переконатися) при будь-яких обставин. Навіть якщо звузити сторінку до надмалої ширини, надмалих сітка не перетвориться у вертикальну (навіть коли контент не буде міститися в комірках).
Цей приклад (файлик setka.html) зроблено саме для наочного відображення поведінки сіткової структури Bootstrap 3. Про те, як там все влаштовано, ми ще будемо докладно говорити. Але поки що я хочу звернути вашу увагу лише на деякі нюанси, які ви зможете помітити в вихідному коді файлу setka.html.
Пояснення до вихідного коду нашого прикладу
Вгорі з допомогою тегів Style додані стилі візуального оформлення макетів (відступи, кольору сіток тощо), які особливого смислового навантаження не несуть. Якщо прокрутіть вихідний код вниз, то помітите ось такий блок:
lg Використовується велика сітка для екранів по ширині більше 1200 px.
md Використовується середня сітка для екранів менше 1200, але більше 992px.
sm Використовується мала сітка для екранів менше 992, але більше 768px.
xs Використовується надмалих сітка для розмірів екрану менше 768px, яка завжди залишається горизонтальною.
Тут чотири контейнери, для яких призначені різні класи (читайте про атрибути class і id). Вони дозволяють відображати конкретний контент в залежності від медиазапросов, що відповідають різним розмірам сітки. Як це працює? Всі чотири заголовка завантажуються в браузер (якщо подивитися вихідний код), але тільки один заголовок відображається в залежності від дозволу екрану або розміру вікна браузера.
Далі у вихідному коді йде формування першого ряду :
.col-lg-4
.col-md-1
.col-sm-5
.col-xs-5
.col-lg-4
.col-md-5
.col-sm-1
.col-xs-6
.col-lg-4
.col-md-6
.col-sm-6
.col-xs-1
Це майстер-сітка, де містяться всі чотири сіткові системи (ви це можете бачити за атрибутами осередків подібним class=»col-lg-4 col-md-1 col-sm-5 col-xs-5″, в яких перераховані префікси класів усіх чотирьох сіток). Сам ряд, як вже згадувалося вище, задається приміщення всіх складових його елементів контейнер з класом class=»row» (у нашому прикладі це контейнер на основі div).
Зверніть увагу, що майстер-сітка у нас складається з трьох клітинок (колонок) і якщо ви складіть всі цифри, які приписані для кожної з колонок, наприклад, для префіксів надмалої сітки Бутстрапа (col-xs), то отримаєте у сумі 12. Те ж саме буде справедливо і для цифр, що стоять після префіксів всіх інших систем. Воно й зрозуміло, бо цей фреймворк, як вже говорилося вище, має 12 колонкову структуру, тобто по горизонталі все доступне для макета простір поділений на дванадцять рівних за шириною колонок (невидимих на сайті — вони подібні клітинках у шкільних зошитах).
Ну і з допомогою цифр після префіксів класів ви просто задаєте пропорції для кожної з клітинок реальних колонок) свого макету. Тобто пропорції можуть бути, наприклад, такими:
Взагалі, можна використовувати як одну, так і дві, три або чотири сіткові системи в одному макеті (рядку). Все це залежить від ваших уподобань в дизайні і того, що ви намагаєтеся домогтися від свого веб-сторінки (як це все має виглядати при різних розширення екрану). На офіційному сайті приведений приклад:
Наприклад, далі у вихідному коді файлу setka.html ви знайдете ряд, де використовується тільки одна сіткова система (надмалих з префіксом класу col-xs).
.col-xs-5
.col-xs-6
.col-xs-1
Створення рядів (рядків) і клітинок за допомогою класів Бутстрапа
Давайте тепер для найкращого розуміння створимо Html сторінку, чимось нагадує реальну вебсторінку (з хедером, текстовим і графічним вмістом, а також футером) і розмітив її з допомогою grid system Bootstrap 3.
Точніше, створю заготівлю я сам, а вам лише запропоную за аналогією з попереднім прикладом скачати файлик sait.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…»), щоб потім разом дописувати до цієї «рибі» потрібні класи бутстрапа. Його також потрібно буде помістити в папку Bootstrap на той же рівень, що і створений нами в першій статті файлик index.html (і setka.html, з яким ми працювали трохи вище).
Якщо ви подивіться вихідний код файлу sait.html, то побачите, що в ньому вже підключений Бутстрап і jquery, а також доданий контент для імітації зовнішнього вигляду середньостатистичної вебсторінки. Так, ще татко з використовуваними на цій сторінці зображеннями вам знадобиться. Завантажити її можна звідси — img.zip. Просто розпакуйте архів і помістіть папку img (перевірте, щоб усередині неї лежали файли зображень, а не ще одна папка img) в папку Bootstrap на один рівень з файлом sait.html. Структура вийде така:
Тепер, відкривши файл sait.html (з папки Bootstrap) в браузері, ви побачите ту вебсторінку, яку я використовував в якості прикладу. Впадає в око те, що всі блоки на сторінці розташовані один під одним, а це сильно заважає правильному візуальному сприйняттю інформації. Було б логічно розмістити їх в колонки і щоб в разі зменшення розміру екрана «дизайн відгукувався на це, змінюючи число колонок для створення зручності перегляду на пристроях з різною шириною видимої області.
В початковому Html коді файлу sait.html я використовував директиви коментарів, щоб показати межі передбачуваних мною рядів (рядків), для яких ми будемо налаштовувати відображення колонок з використання якихось мережевих систем Бутстрапа. Рядів всього чотири (вони пронумеровані на цьому скріншоті) — хедер (шапка з назвою сайту і логотипом), заголовок і опис сторінки, змістовна частина (основний контент, що складається з анонсів чотирьох статей) і футер.
Тепер нам потрібно буде додати в файл sait.html розмітку Бутстрапа, яка позначить розташування цих рядів. Для створення рядів, як ви пам’ятаєте, достатньо буде укласти весь його вміст у контейнер (найчастіше це теги Div, хоча можуть бути і інші) і прописати в ньому клас class=»row». Для першого ряду це буде виглядати так:
Все про створення сайтів, блогів, форумів, інтернет-магазинів, їх просування в пошукових системах і заробіток на сайті
Те ж саме потрібно зробити і для всіх інших рядів (рядків) — поставити відкриваючий тег
на початку наступного ряду і тег
— у його кінці. Показувати весь код файлу sait.html із внесеними зміни не буду, бо він дуже об’ємний.
Використання різних сіток для створення колонок з контентом при різній ширині екрану
Тепер давайте займемося формуванням осередків у тих рядках (рядах), де це має сенс робити. Цілком логічним буде розмістити анонси статей (з третього ряду) в чотири колонки, а при зменшенні ширини екрана нехай ці чотири колонки перетворюються на дві. Як це зробити? Давайте подивимося.
Отже, в Bootstrap 3 має місце бути 12-ти колоночная сітка, про яку ми говорили вище. Раз ми задумали зробити чотири колонки з анонсами, то було б логічним зробити їх рівними по ширині, а значить кожна з колонок буде шириною в три клітинки (комірки) нашої невидимою сіткової системи (незалежно від того, яку за розміром сітку ми виберемо — сверхмалую, малу, середню або велику).
Для реалізації задуманого нам знову ж таки доведеться «обернути» майбутні осередку (в нашому випадку вони будуть включати Html код картинки, заголовка, тексту анонсу і посилання «Читати далі») в контейнер, яким ми пропишемо класи з арсеналу Bootstrap з потрібними префіксами. Найчастіше в цих цілях використовують багатостраждальний Div і ми не робитиме виключення.
Яку сітку вибрати для роботи? Давайте візьмемо для початку середню, як компромісний варіант. У цьому випадку у контейнери всіх чотирьох клітинок потрібно буде додати клас «col-md-3» —
. Покажу на прикладі коду однієї клітинки, щоб не захаращувати статтю:
Яндекс Директ — основи створення кампанії
Текст анонсу.
Після збереження зроблених змін ви побачите, що наша веб-сторінка набула вже набагато більш юзабельний вигляд:
Правда, при зменшенні вікна браузера до ширини меншою точки зламу (у разі використовуваної нами середньої сітки це буде 992 пікселя), всі анонси знову вишикуються в стовпчик, що не є добре, бо юзабіліті в цьому випадку знижується (дозвіл в майже 1000 пікселів дозволяє більш щільно розташовувати інформацію). Для виправлення цієї ситуації можна додати ще одну сітку з арсеналу Бутстрапа для тих же самих клітинок за анонсами. Як це зробити? Давайте подивимося.
Давайте додамо сверхмалую сіткову систему за допомогою префіксів «col-xs-6» до назви класу в кожну клітинку з анонсом (в результаті вийде складовою клас class=»col-md-3 col-sm-6″). Виглядати це буде так (на прикладі однієї комірки):
Google AdWords — створення груп
Текст анонсу.
Як бачите, ми тут порушили нещодавно озвучена правило, що числа після префіксів однієї сітки у всіх комірках в сумі повинні давати 12. У нас же вийшло 24 (чотири рази за шість). Але ми це зробили спеціально, щоб домогтися бажаного результату — отримати замість чотирьох дві колонки при проході точки зриву для середньої grid system Bootstrap (це 992 пікселів). Тобто осередку розташуються в двох рядках по дві штуки в кожній:
Т. до. ми вибрали сверхмалую сіткову систему, то при подальшому зменшенні ширини вікна браузера вертикального розташування блоків з анонсами один під одним (розміщення в одну колонку) не відбудеться, бо ця система завжди залишається горизонтальною.
Якщо ж ви хочете, щоб чотири колонки при зменшенні ширини екрана перетворювалися на дві, а потім вже в одну колонку, то слід використовувати замість «col-xs-6» малу сіткову систему з допомогою «col-sm-6»:
Яндекс Директ — основи створення кампанії
Текст анонсу.
Тоді, при зменшенні ширини вікна браузера нижче 768 пікселів, ви побачите злам, при якому дві колонки з анонсами перетворюються в одну. Просто спробуйте та відчуйте різницю.
Налаштовуємо шапку вебсторінки з допомогою Bootstrap 3
Давайте ще поекспериментуємо і спробуємо налаштувати сіткову систему для першого ряду, у якому є по суті дві потенційні осередки — назва сайту з описом, а також логотип. Власне, їх і будемо позиціонувати. Давайте використаємо на цей раз велику сітку з допомогою «col-lg-6», щоб вийшли дві рівні колонки.
Все про створення сайтів, блогів, форумів, інтернет-магазинів, їх просування в пошукових системах і заробіток на сайті
Правда при використанні великої сітки злам відбувається на досить-таки великих дозволах екрану (вікна браузера, в нашому випадку, бо ми там імітуємо пристрої з різною шириною екрана). Після чого клітинки складають по вертикалі. Щоб цього уникнути, ми додамо ще одну сітку Bootstrap 3 для першого ряду. Думаю, що підійде мала сіткова система (префікс класу col-sm). Тоді код буде виглядати приблизно так:
Все про створення сайтів, блогів, форумів, інтернет-магазинів, їх просування в пошукових системах і заробіток на сайті
Однак, я не став робити для малої сітки комірки з назвою сайту і логотипом однаковими, бо логотип істотно (в сенсі, вузький) назви з описом. При меншій ширині екрану виділяти їм рівні осередку було б не логічно. Тому я і зробив першу колонку з назвою і описом сайту при активації малої сіткової системи Бутстрапа в два рази більше колонки з логотипом.
У результаті при зменшенні вікна браузера, ці осередки будуть зближуватися аж до моменту руйнування для малої сіткової системи Бутстрапа, який настане при ширині менш 768 пікселів, і тоді обидві комірки розташуються один під одним.
Напевно, ви помітили, що текст сторінки врізається в лівий край екрану, що викликає відчуття дисонансу. Можна додати для виправлення даної ситуації padding в тег body, що дозволить відсунути вміст сторінки від країв області перегляду. А можна все вирішити стандартними засобами Bootstrap 3.
Для цього потрібно буде весь вміст веб-сторінки (все, що укладено в тегах Body) обернути в контейнер Div з однойменною класом —
. Тобто ставите цей тег відразу після відкриваючого тега Body, а закриваєте його перед викликом скриптів, які розташовані безпосередньо перед закриваючим тегом Body. Після цього текст вже не буде впиратися у вікно браузера.
Також ви можете бачити, що картинки анонсів наїжджають один на одного при зменшенні ширини екрана. Справа в тому, що вони поки ще «неотзывчивые», але ми їх зробимо такими в наступних статтях цієї рубрики. А також ми продовжимо розбирати роботу з сітковою системою Bootstrap 3, навчимося оформляти кнопки, таблиці, Html форми, створювати випадають меню, навігацію і багато іншого. Тож не перемикайтеся і слідкуйте за новими публікаціями.
Продовження >>> (Ви можете підписатися на розсилку, щоб не пропустити)
А ось і продовження вийшло: Як задати зсув між колонками в Bootstrap 3, поміняти їх місцями, вкласти один в одного і створити великий центральний блок (але ви все одно підписуйтесь — буде ще багато цікавого і корисного).
Удачі вам! До зустрічей на сторінках блогу
