Здрастуйте, шановні читачі блогу . Продовжуємо обговорювати можливості чудового фреймворку Bootstrap. У вступній статті ми поговорили за чуйний дизайн і відмінності Бутстрапа 3 від версії 2. У другій статті ми вже впритул приступили до освоєння цього інструменту, почавши з вивчення grid system Bootstrap, і розглянули кілька практичних прикладів її використання.
Сьогодні ми продовжимо знайомство з сітковою системою цього фреймворку і розглянемо деякі нюанси, які можуть стати в нагоді в реальній роботі над макетом сайту на основі Bootstrap. Зокрема, ми подивимося, як задати відступ між колонками з допомогою зсуву (клас Offset), як поміняти місцями колонки (класи Push і Pull), а також як вкласти рядок з колонками на територію іншої колонки. Ну і про великий центральний блок (Jumbotron) теж постараємося не забути поговорити.
Нюанси верстки макету веб-сторінки в Bootstrap 3
Отже, останній приклад ілюстрував реальну роботу з типовою веб-сторінкою і зупинилися ми на тому, що створили відступи по краях видимій області з допомогою класу class=»container» і пообіцяли зробити картинки використовувані в анонсах чуйними.
Якщо попередню статтю не читали, то раджу це зробити, бо далі вам може бути не зрозуміло, про що йде мова. Там же ви зможете скачати заготівлю вебсторінки (файл sait.html і архів з графікою img.zip), яку ми зараз і картаємо з допомогою класів з арсеналу Бутстрапа. На даний момент макет нашій тестовій веб-сторінки виглядає приблизно так:
Як задати зсув між колонками в Бутстрап через Offset
Створивши необхідне для комфортного сприйняття інформації відступи по краях області перегляду, за допомогою ув’язнення всього вміст веб-сторінки (між відкриттям і закриваючих тегами Body) в контейнер Div з класом class=»container», тепер має сенс потурбуватися створенням цього самого комфортного порожнього простору і між колонками.
Правда, в нашому поточному прикладі цього не потрібно, бо все і так сприймається досить-таки добре. Але от якщо б у нас була б тільки пара колонок на всю ширину сторінки, то для кращого сприйняття їх було б здорово злегка відсунути один від одного.
Симулируем дану ситуацію, просто прибравши кілька колонок в нашому середньому ряду макета (третій рядок), і використовуємо для решти дві сіткових системи (велику і малу), щоб при зменшенні розміру екрана все гарно складалося аж до вертикального додавання при ширині екрану менше 768 пікселів.
Яндекс Директ — основи створення кампанії
Текст
Установка VirtueMart 2
Текст
Текст/p>
Текст
Вихідний файл можна взяти звідси: Sait-2.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…»). Його потрібно буде помістити в папку Bootstrap на той же рівень, що і створений нами в першій статті файлик index.html (і site.html, з яким ми працювали трохи вище). У вихідному варіанті цей макет буде виглядати так.
Очевидно, що було б непогано трохи розсунути ці дві колонки. Дану проблему можна вирішити внесенням змін в саму сіткову систему, але в цьому випадку ці зміни позначаться й на інших веб-сторінках, що може бути не бажано.
Тому набагато кращим варіантом буде створити між колонками додаткову колонку, не має змісту з допомогою класу Offset, що задає зсув ліворуч. Власне, порожню колонку як таку створювати не потрібно — потрібно лише додати цей клас в контейнер тієї колонки, що буде стояти праворуч від порожньої колонки задає зміщення. Виглядати це буде як col-lg-offset-1 для великої сітки або col-sm-offset-1 для дрібної (якщо зміщення потрібно зробити на дві або три клітинки, то треба так і писати — col-sm-offset-2).
Ну і цифри потрібно буде зменшити в col-lg — на число, що дорівнює загальному числу порожніх (додаткових) колонок, щоб в сумі з ними вийшло 12 (саме стільки клітинок по ширині поміщається в системі сіткового Bootstrap 3). У нашому прикладі ми по суті зменшуємо ширину другої колонки на одну комірку сітки, жертвуючи її для відступу від першої колонки, тому замість col-lg-9 потрібно буде написати col-lg-8. В результаті отримаємо 8 клітинок другої колонки плюс 3 клітинки з першої, і 1 клітинка віддана під зсув (col-lg-offset-1), що в сумі якраз і дадуть 12.
Якщо ви використовуєте кілька сіток одночасно (у нашому прикладі їх дві), то потрібно додавати зміщення до кожної з них, чи можна буде використовувати його тільки з окремими розмірами сіток — все залежить від того, що ви хочете отримати в результаті. Ми додамо для обох типів сітки Offset-1, що дозволить створити лівіше тієї колонки, де цей Offset приписаний, ще одну порожню колонку, яка створить необхідний відступ. В результаті наведений трохи вище код буде виглядати так:
Яндекс Директ — основи створення кампанії
Текст
Установка VirtueMart 2
Текст
Текст/p>
Текст
А загальний вигляд макета зі зміщенням стане трохи більш юзабилен (при зменшенні розміру екрану або вікна браузера, що одне і теж, також буде спостерігатися зміщення і для малої сітки):
В принципі, для великої сітки можна було б задати зсув дорівнює двом клітинок, а для малої залишити рівне однієї клітинки (з допомогою ось такого класу class=»col-lg-7 col-lg-offset-2 col-sm-7 col-sm-offset-1″), щоб більш плавно відбувалося складання при зменшенні розміру екрана. Але це вже нюанси і все залежить від ваших уподобань. Однак, ще раз нагадаю, що зміщення через Offset з’явиться зліва від тієї колонки, де ви його задали.
Як змінювати порядок розташування колонок за допомогою Push і Pull
Давайте ще придумаємо собі проблеми на рівному місці, щоб потім її з успіхом вирішити засобами Bootstrap. Припустимо, що в нашому попередньому прикладі перша колонка (про Яндекс Директ) не несла б у собі особливого смислового навантаження, а була б лише побічним додаток до другій колонці (про Виртуемарт). Така ситуація може зустрічатися на окремих сторінках, і на перший погляд у цьому немає нічого поганого.
Але є два нюанси, які можуть вас спонукати до використання класів push і pull, дозволяють нам поміняти місцями колонки , щоб змінити порядок їх слідування).
Логічно було б спочатку пропонувати читачеві основний текст, а вже потім другорядне.
Ось саме для вирішення цих та багатьох інших (які і в голову не приходять) проблем можна використовувати нову можливість Бутсрап 3. Робиться це з допомогою згаданих класів push і pull. Як це працює? Ну, спочатку ми у вихідному коді поміняємо місцями контейнери з вмістом колонок (у нашому випадку використовуються Div) місцями. Вийде приблизно так.
Установка VirtueMart 2
Текст
Текст/p>
Текст
Яндекс Директ — основи створення кампанії
Текст
Цим ми вирішимо зазначені вище проблеми — оптимізуємо сторінку з точки зору SEO, і при зменшенні ширини екрану, аж до вертикального побудови колонок, вгорі виявиться найбільш значимий контент. Однак, на веб-сторінці тепер ліворуч буде відображатися основна інформація, а праворуч — другорядна. Іноді з міркувань юзабіліті (або ще якимось) це може бути неприйнятним.
За допомогою push і pull можна буде зробити так, щоб в браузері користувача, як і раніше зліва відображалася перша колонка (з другорядною інформацією, яка у вихідному коді буде вже знаходитися нижче другої). Тобто створити своєрідний оптичний обман. Як це зробити?
Отже, основний блок (про Виртуемарт з класом class=»col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1″), нам потрібно буде зрушити вправо на стільки клітинок (клітинки), щоб на його місці помістився б блок другорядний (про Директ з класом class=»col-lg-3 col-sm-4″). Для цього ми використовуємо клас Push (штовхати вправо) з арсеналу Бутсрапа, а саме для великої сітки — col-lg-push-3, а для малої — col-sm-push-4. Цифри я взяв з класу другорядного блоку, бо саме його потрібно буде помістити на те місце, звідки ми зрушимо вправо основний блок.
Установка VirtueMart 2
Текст
Текст/p>
Текст
В результаті отримали ось такий проміжний результат:
Очевидно, що тепер другорядне блок (про Директ) потрібно буде зрушити вліво на таку кількість клітинок (клітинки), скільки займає по ширині основний блок, щоб вони один на одного не накладалися. Шляхом нескладних підрахунків отримуємо, що потрібно використовувати клас Тягти (тягнути вліво) з арсеналу Bootstrap зі значеннями:
Установка VirtueMart 2
Текст
Текст/p>
Текст
Яндекс Директ — основи створення кампанії
Текст
Ось, тепер все встало на свої місця, хоча у вихідному коді ліва колонка (з другорядним вмістом) коштує нижче, ніж права. Що і потрібно було довести (реалізувати).
Як в Bootstrap вкласти рядок з колонками в колонку з іншого рядка
Хитромудрий заголовок, чи не правда? Інших не тримаємо. Справа в тому, що при верстці макета вам може знадобитися прийом, що дозволяє вкладати клітинки колонки) один в одного. Точніше кажучи, ми можемо запросто вкласти ряд (рядок, що містить кілька колонок) всередину який-небудь колонки з іншого ряду. Зрозуміло? Ні? Ну, тоді на прикладі.
Давайте в наш останній приклад додамо ще один рядок (з допомогою контейнера з класом row, якщо ви ще не забули). Нехай вона складається з чотирьох стовпців, які ми створили в останньому прикладі попередньої статті (картинки я видалив, щоб не захаращувати). Макет веб-сторінки в цьому випадку буде виглядати приблизно так (вже готовий файл ви можете взяти звідси — sait-3.html):
При зміні ширини екрана вся ця конструкція буде витончено ламатися, але цілком можна припустити ситуацію, коли вам знадобиться дещо змінити макет і зробити так, щоб чотири розташованих нижче колонки розташовувалися б строго тільки під другою колонкою верхнього ряду. Зробити це, насправді, набагато простіше, ніж здається, і навіть ніяких спеціальних класів прописувати не доведеться.
Для цього достатньо вирізати код всій рядки з чотирма колонками (починаючи з тега DIV з класом Row і закінчуючи закриває його тег DIV) і вставити в самий кінець другої колонки з попереднього рядка. Вона, якщо ви пам’ятаєте, в коді відповідає контейнера DIV з класом class=»col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4″.
Власне, після такої нехитрої рокіровки ми досягнемо бажаного результату (код не наводжу, бо занадто громіздкий — якщо не зрозуміли, то просто подивіться уважно на кінцевий варіант sait-4.html).
Як в Бутстрапе створити великий центральний блок
На буржуйських сайтах зараз дуже популярно використовувати великий центральний блок, який іноді називають jumbotron. Зазвичай це великий заголовок, трохи тексту, картинка і, можливо, кнопка. Все це справа займає пристойну частину «першого екрану». У Бутстрапе є спеціальні класи, що дозволяють швидко створити подібний блок буквально в два кліка.
Для цього просто додаємо потрібно контейнер з вмістом майбутнього центрального блоку і прописуємо для нього замість класу ROW інший клас — jumbotron. Код такого блоку може виглядати так:
— швидко, просто і зрозуміло
Все про створення сайтів, блогів, форумів, інтернет-магазинів, їх просування в пошукових системах і заробіток на сайті
Додавши цей код у розглянутий трохи вище приклад (у верхню його частину), ми отримаємо ось такий результат:
Тут ще було б логічним поставити обтікання зображення текстом. Для цього в Bootstrap теж припасені інструменти. Наприклад, для обтікання зображення текстом зліва в тег Img досить додати class=»pull-right», ну, а якщо картинку потрібно притиснути до лівого краю області Джамбатрона (цього самого великого центрального блоку), то використовувати вже потрібно клас class=»pull-left».
— швидко, просто і зрозуміло
Все про створення сайтів, блогів, форумів, інтернет-магазинів, їх просування в пошукових системах і заробіток на сайті
В результаті отримаємо таку ось вже більше приглядную картину:
При зменшенні розміру екрана цей блок буде успішно адаптуватися. По суті, це строку, що складається з однієї колонки шириною у всі 12 клітинок.
Думаю, що на цьому зі знайомством з сітковою системою Bootstrap 3 можна закінчувати. У наступних статтях ми будемо говорити про типографіці, кнопках, галереях, таблицях, випадаючих меню та інші речі, які можна досить просто реалізовувати з допомогою цього чудового фреймворка. Дякуємо за увагу та не перемикайтеся.
Продовження >>> (Тут можна підписатися на поштову розсилку з анонсами нових статей)
Удачі вам! До зустрічей на сторінках блогу
