Не секрет, що мобільна версія сайту себе зжила. Мається на увазі мобільна версія, яка, по-суті, окремий сайт заточений під малюсінькі екрани. У моді прогресивне рішення, зване адаптивної версткою.
Дивіться самі. Як працювала мобільна версія? Сайт визначав, що його відкривають в мобільному браузері, і замість звичайної, виводив мобільну версію.
Які мінуси у такого підходу? Наприклад, новий браузер або операційна система, відсутні в списку тих, на які треба реагувати мобільною версією. І що тоді? Вилізе звичайна. Втім, головний недолік - сама розробка окремої версії. Потім, будь-які зміни доводиться проводити вже в двох шаблонах, та й вартість робіт збільшується. На цю тему можна довго міркувати, але тут і зупинимося.
Скажу тільки, що якщо питання розробки web-ресурсів викликають у вас складнощі, а сайт потрібен вже найближчим часом, то вигідніше звернутися до фахівців і замовити. Де завгодно. Наприклад, тут. Тому, що кожен повинен займатися своєю справою. Веб-майстер - робити сайти. Підприємець - гроші.
адаптивна верстка
Адаптивної верстці глибоко плювати на чому запускається сайт. Він просто пристосується під ширину екрану від, припустимо, 480px в ширину до 2400px і вище. Тобто що мобіла, що широченний телевізор, сайту все-одно. Принадність, правда?)
Щоб не мучитися і не винаходити свій велосипед, дехто придумав Bootstrap. Це готовий набір js і css файлів. При тому, Bootstrap дозволяє робити з сайтом багато чого цікавого, і сам по собі заслуговує не просто окремого поста, а цілої серії. Я сам знаю про нього все-нічого, але навіть цього вистачило, щоб оцінити можливості і зручність.
переміщення блоків
А тепер про головне. Зараз як раз верстаю черговий сайт. У його шапці чотири блоки йдуть один за одним. Ну ось так, як на малюнку.
Проблема в тому, що на вузьких екранах вони шикуються ось так.
Мені ж потрібно, щоб ось так.
Звичайно це можна зробити декількома способами без всякого Bootstrap'а. Але по-перше, в даному проекті я його ВЖЕ використовую. Точніше, тільки сітку від нього, але і цього буде достатньо. По-друге, давайте коротенько ці способи перерахую.
Спосіб 1: float (css)
Спосіб цілком придатний, коли треба пересунути поміняти місцями пару колонок. У моєму випадку рухаються відразу три колонки, в т.ч. по вертикалі. Незручно!
Спосіб 2: flex (css)
Занадто багато метушні. Та й деформує блоки так, як мені не потрібно.
Спосіб 3: jQuery (Java Script)
Насправді це відразу кілька способів. Відловлюємо дозвіл екрана і залежно від неї скрипт буде переміщати блоки. Але це довго і це милиці. Що якщо таких пересуваються блоків виявиться штук 50 по всій сторінці? Під кожен писати окремий код? Я вже мовчу як це позначиться на швидкодії сайту.
Спосіб 4: Bootstrap
А тепер Bootstrap. Все гранично просто. Маємо html-код.
Якщо розділити шапку на 12 частин, то на екрані over 1200px, в моєму проекті, перший div займає 2/12, другий 5/12, третій 3/12, четвертий 2/12. На екранах менше 700 + px кожен блок займає цілу рядок (12/12).
Для прикладу візьму всього два розмірні класу сітки Bootstrap. col-lg- * (широкий екран від 1170px) і col-sm- * (вузький екран 750px і менше).
Ось так виглядає код після присвоєння зазначених класів.
Бачите? Розмір блоків для різних екранів, згідно сітці (з 12 осередків), виражений цифрою в класі.
Оптимізуємо html-код під вузький екран. Тобто просто змінимо порядок блоків під мобільний екран, а рухати будемо на вже великому. Так легше.
На мобіле все вишикувалося як було потрібно. Зате на звичайному моніторі порядок змінився, чого нам з самого початку не потрібно.
Додамо класи, які поміняють місцями блоки для широкоекранної версії сайту так, щоб вони йшли в первісному порядку (1, 2, 3, 4), а в мобільній залишилися відповідно розмітці (2, 3, 1, 4).
col-lg-pull- * переміщує блок вліво.
col-lg-push- * переміщує блок вправо.
Усе. Тепер на моніторі колонки будуються так, як і було потрібно спочатку.
кумедний факт
Тут є одна дивина, яку не зовсім зрозумів. Цифра в класі col-lg-push- * вказує на скільки клітинок потрібно зрушити правий край блоку вправо. Так блок з цифрою 2 зрушили з місця на 2 осередки. Те ж саме відбулося з блоком з цифрою 3.
У підсумку, на початку сітки звільнилося 2 осередки під блок з цифрою 1. АЛЕ, щоб туди дістатися потрібно подолати вліво 8 осередків, а блоку вистачило 7.
З цього (провівши кілька експериментів) роблю висновок, що цифра в класі col - * - pull- * вказує зсув блоку вліво на вказане число осередків мінус 1. У моєму випадку 7 (8-1).
Про те, як підключити сітку Bootstrap до сайту, в рамках цього поста, висвітлювати не стану. Інформації на цю тему в інтернеті і так повно. І все ж, можливо, в майбутньому зроблю під цю справу окремий пост.
Однак, ви вже бачите, наскільки Bootstrap зручний. Всього-то й діла, що привласнити блокам потрібні класи.
На цьому поки все. Не забувайте підписуватися на оновлення блогу і ділитися посиланням на цей пост з друзями в соціальних мережах. Спасибі, що читаєте.
YALEHA: Бортовий журнал
Величезне спасибі передплатникам за чай з печивом. Обожнюю чай, печиво і вас, дорогі. Саме ви (і ще вдячні клієнти) - спонсори фотографій чайних чашок в моєму інстаграме. Чай (хороший чай!), Час від часу, викликає у мене напади натхнення. Так з'являються нові пости або веб-додатки, що спрощують життя блогерів і сайтовладельцев. Так що, ще раз дякую всім.
О так, коли така п'ятницю збігається з місяцем, в якому народи Європ і Америк готуються до Хеловін, деякі чекають трохи великих невдач ніж зазвичай. Я з цього приводу не суеверствую. Навіть навпаки. Так що ранок та день п'ятниці пройшли на ура, не дивлячись на легку втому характерну для кінця тижня. Вечір порадував тим, що бос відпустив [...]
Схоже, з учорашнього дня електрички перейшли на зимовий розклад. Ви це напевно помітили, якщо користуєтеся. Сьогодні зустрівся з людиною з попередньої роботи. Ви зрозуміли чому «з» якщо бували там, тим більше якщо працювали. День пройшов з долонею на обличчі. Ви знаєте через що, якщо доводилося тестувати результати зусиль команди програмістів. Завтрашнє нараду скасувалося навіть [...]