Не секрет, что мобильная версия сайта себя изжила. Имеется в виду мобильная версия, которая, по-сути, отдельный сайт заточенный под малюсенькие экраны. В моде прогрессивное решение, называемое адаптивной версткой.
Смотрите сами. Как работала мобильная версия? Сайт определял, что его открывают в мобильном браузере, и вместо обычной, выводил мобильную версию.
Какие минусы у такого подхода? Например, новый браузер или операционная система, отсутствуют в списке тех, на которые надо реагировать мобильной версией. И что тогда? Вылезет обычная. Впрочем, главный недостаток — сама разработка отдельной версии. Потом, любые изменения приходится проводить уже в двух шаблонах, да и стоимость работ увеличивается. На эту тему можно долго рассуждать, но здесь и остановимся.
Адаптивная верстка
Адаптивной верстке глубоко плевать на чем запускается сайт. Он просто приспособится под ширину экрана от, допустим, 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 удобен. Всего-то и делов, что присвоить блокам нужные классы.
На этом пока всё. Не забывайте подписываться на обновления блога и делиться ссылкой на этот пост с друзьями в соцсетях. Спасибо, что читаете.
Напишите комментарий