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

  • (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 зручний. Всього-то й діла, що привласнити блокам потрібні класи.

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

Новости

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

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

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

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

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

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

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

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

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

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