Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Як поміняти місцями блоки div в мобільній версії сайту

  1. адаптивна верстка
  2. переміщення блоків
  3. Спосіб 1: float (css)
  4. Спосіб 2: flex (css)
  5. Спосіб 3: jQuery (Java Script)
  6. Спосіб 4: Bootstrap
  7. кумедний факт

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

Дивіться самі. Як працювала мобільна версія? Сайт визначав, що його відкривають в мобільному браузері, і замість звичайної, виводив мобільну версію.

Які мінуси у такого підходу? Наприклад, новий браузер або операційна система, відсутні в списку тих, на які треба реагувати мобільною версією. І що тоді? Вилізе звичайна. Втім, головний недолік - сама розробка окремої версії. Потім, будь-які зміни доводиться проводити вже в двох шаблонах, та й вартість робіт збільшується. На цю тему можна довго міркувати, але тут і зупинимося.

Скажу тільки, що якщо питання розробки web-ресурсів викликають у вас складнощі, а сайт потрібен не «коли-небудь», а в прийнятні терміни, то вигідніше звернутися до фахівців і замовити. Де завгодно. Тому, що кожен повинен займатися своєю справою. Веб-майстер - робити сайти. Підприємець - гроші.

адаптивна верстка

Адаптивної верстці глибоко плювати на чому запускається сайт. Він просто пристосується під ширину екрану від, припустимо, 480px в ширину до 2400px і вище. Тобто, що мобіла, що широченний телевізор, сайту все-одно. Принадність, правда?)

Щоб не мучитися і не винаходити свій велосипед, дехто придумав Bootstrap. Це готовий набір js і css файлів. При тому, Bootstrap дозволяє робити з сайтом багато чого цікавого, і сам по собі заслуговує не просто окремого поста, а цілої серії. Я сам знаю про нього все-нічого, але навіть цього вистачило, щоб оцінити можливості і зручність.

переміщення блоків

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

Проблема в тому, що на вузьких екранах вони шикуються ось так.

Мені ж потрібно, щоб ось так.

Звичайно це можна зробити декількома способами без всякого Bootstrap'а. Але по-перше, в даному проекті я його ВЖЕ використовую. Точніше, тільки сітку від нього, але і цього буде достатньо. По-друге, давайте коротенько ці способи перерахую.

Спосіб 1: float (css)

Спосіб цілком придатний, коли треба пересунути поміняти місцями пару колонок. У моєму випадку рухаються відразу три колонки, в т.ч. по вертикалі. Незручно!

Спосіб 2: flex (css)

Занадто багато метушні. Та й деформує блоки так, як мені не потрібно.

Спосіб 3: jQuery (Java Script)

Насправді це відразу кілька способів. Відловлюємо дозвіл екрана і залежно від неї скрипт буде переміщати блоки. Але це довго і це милиці. Що якщо таких пересуваються блоків виявиться штук 50 по всій сторінці? Під кожен писати окремий код? Я вже мовчу як це позначиться на швидкодії сайту.

Спосіб 4: Bootstrap

А тепер Bootstrap. Все гранично просто. Маємо html-код.

<Div> <div> 1 </ div> <div> 2 </ div> <div> 3 </ div> <div> 4 </ div> </ div>

Якщо розділити шапку на 12 частин, то на екрані over 1200px, в моєму проекті, перший div займає 2/12, другий 5/12, третій 3/12, четвертий 2/12. На екранах менше 700 + px кожен блок займає цілу рядок (12/12).

Для прикладу візьму всього два розмірні класу сітки Bootstrap: .col-lg- * (широкий екран від 1170px) і col-sm- * (вузький екран 750px і менше).

Ось так виглядає код після присвоєння зазначених класів.

<Div class = "row"> <div class = "col-lg-2 col-sm-12"> 1 </ div> <div class = "col-lg-5 col-sm-12"> 2 </ div> <div class = "col-lg-3 col-sm-12"> 3 </ div> <div class = "col-lg-2 col-sm-12"> 4 </ div> </ div>

Бачите? Розмір блоків для різних екранів, згідно сітці (з 12 осередків), виражений цифрою в класі.

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

<Div class = "row"> <div class = "col-lg-5 col-sm-12"> 2 </ div> <div class = "col-lg-3 col-sm-12"> 3 </ div> <div class = "col-lg-2 col-sm-12"> 1 </ div> <div class = "col-lg-2 col-sm-12"> 4 </ div> </ div>

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

Зате на звичайному моніторі порядок змінився, чого нам з самого початку не потрібно

Додамо класи, які поміняють місцями блоки для широкоекранної версії сайту так, щоб вони йшли в первісному порядку (1, 2, 3, 4), а в мобільній залишилися відповідно розмітці (2, 3, 1, 4).

col-lg-pull- * переміщує блок вліво.
col-lg-push- * переміщує блок вправо.

<Div class = "row"> <div class = "col-lg-5 col-sm-12 col-lg-push-2"> 2 </ div> <div class = "col-lg-3 col-sm -12 col-lg-push-2 "> 3 </ div> <div class =" col-lg-2 col-sm-12 col-lg-pull-7 "> 1 </ div> <div class =" col-lg-2 col-sm-12 "> 4 </ div> </ div>

Усе. Тепер на моніторі колонки будуються так, як і було потрібно спочатку.

кумедний факт

Тут є одна дивина, яку не зовсім зрозумів. Цифра в класі col-lg-push- * вказує на скільки клітинок потрібно зрушити правий край блоку вправо. Так блок з цифрою 2 зрушили з місця на 2 осередки. Те ж саме відбулося з блоком з цифрою 3.

У підсумку, на початку сітки звільнилося 2 осередки під блок з цифрою 1. АЛЕ, щоб туди дістатися потрібно подолати вліво 8 осередків, а блоку вистачило 7.
З цього (провівши кілька експериментів) роблю висновок, що цифра в класі col - * - pull- * вказує зсув блоку вліво на вказане число осередків мінус 1. У моєму випадку 7 (8-1).

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

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

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

Як працювала мобільна версія?
Які мінуси у такого підходу?
І що тоді?
Принадність, правда?
Що якщо таких пересуваються блоків виявиться штук 50 по всій сторінці?
Під кожен писати окремий код?

Новости

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Все товары для праздника оптом купить
Как сделать правильный выбор в работе, бизнесе и жизни, о котором никогда не придется жалеть. Мы хотим рассказать вам об удивительной и очень простой технике 7 вопросов, которые позволят оценить ситуацию

Как сделать из бумаги самолет
 1. Самолеты сделанный по первой и второй схеме являются самыми распространенными. Собирается такое оригами своими руками достаточно быстро, несмотря на это самолет летит достаточно далеко за счет свое

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

2400 наименований пиротехники
В последние десятилетия наша страна может похвастаться появлением нескольких десятков отечественных производителей, специализирующихся на выпуске пиротехники. Если вы сомневаетесь, какой фейерверк заказать,

Суши доставка меню
В последние годы японская кухня стала очень популярной в нашей стране. И найти современного человека, который бы никогда не пробовал суши и роллы очень сложно. Но как правильно кушать суши палочками

Обеденные группы для маленькой кухни
Любой дом начинается с кухонной комнаты, а хороший дом - с уютной кухни. Уютной назвать кухню можно, если все в ней гармонично подобрано в соответствии с вашими вкусами и в едином стиле. Многие люди