Адаптивность на все 100 и отзывчивость на все 200
26 ноября 2015
Автор: Кузьмина Диана
Практически все элементы и компоненты в решении BXReady Интернет-магазин продуманы еще и с точки зрения адаптивности. Теперь вы можете настраивать не только внешний вид элементов, но и как они будут выстраиваться в списках. Это очень удобно для работы с сайтом и является особенной фишкой нашего решения.
Кому-то это может показаться мелочью, но точно не контент-менеджеру (или веб-мастеру), который теперь сможет:
Несколько наглядных примеров.
Вот так сейчас выглядит концентратор на демо-сайте:
![Фото 1: «5_elements.png»](https://site-cloud-files.bitrix.info/resize_cache/1319983/04dbd6b4c314fe48f655aad84339ad15/main/f35/f350a23e9b815ffbf16037d6c9191e4d/5_elements.png)
В настройках компонента установлена 10-колоночная сетка и вывод 5 элементов при данном разрешении.
![Фото 2: «elements_quantity.png»](https://site-cloud-files.bitrix.info/main/e61/e614b6b6b80cb9d9521f88115f90bf78/elements_quantity.png)
Ну, а если вы захотите вывести всего 3 товара при разрешении LG, MD и SM, а при XS - 1 товар (например, создали новую широкую карточку для элементов, либо в разделе всего 3 товара), вы можете поменять эти настройки и сразу же увидите изменения на сайте.
LG, MD, SM
![Фото 3: «3_elements.png»](https://site-cloud-files.bitrix.info/resize_cache/1319985/04dbd6b4c314fe48f655aad84339ad15/main/9b5/9b5a3502e2908764985293f11d9eeca7/3_elements.png)
XS
![Фото 4: «XS.png»](https://site-cloud-files.bitrix.info/main/27f/27f109650c48b94f480701a7e256580e/XS.png)
Кстати! с редакции 15.5 практически все компоненты Битрикс работают на базе Bootstrap. Причем сетка используется в 12 колонок.
Это не всегда удобно. К примеру - в одноколоночном дизайне очень классно смотрятся именно пять товаров в ряд, чего в принципе невозможно сделать, используя 12 колоночную сетку. Тем не менее... Мы эту задачку решили.И не просто решили, теперь у каждого из вас есть возможность использовать адаптивность компонент как в 12, так и в 10 колоночном варианте
Возможность применять 12 и 10 колоночные сетки в процессе настройки - это с виду незаметная, но очень мощная фишка, которая может развязать руки веб-мастерам.
Но списки элементов - это еще не все.
Помимо основных компонентов списков, настроить адаптивность можно и у всплывающего меню (при установленном в нем многоколоночном выводе).
![Фото 5: «responsive.png»](https://site-cloud-files.bitrix.info/main/5ca/5ca0912d464311fa33c58335b8e60f7b/responsive.png)
LG
![Фото 6: «LG.png»](https://site-cloud-files.bitrix.info/resize_cache/1319991/04dbd6b4c314fe48f655aad84339ad15/main/b12/b1254df78fde95cd7e3146e3fdd0b3f2/LG.png)
MD
![Фото 7: «MD.png»](https://site-cloud-files.bitrix.info/resize_cache/1319989/04dbd6b4c314fe48f655aad84339ad15/main/da9/da950f37672eb87fd4cc9867aefebd15/MD.png)
Это также особенная фишка нашего проекта. Про меню мы напишем еще специальные статьи, но с точки адаптивности - оно тоже продумано.
Решение BXReady Интернет-магазин не только изначально адаптивно, но и сделано так, чтобы вы еще могли настраивать эту адаптивность под свои потребности.
А теперь важное резюме:
Мы так привыкли к термину адаптивность, что уже забываем про дословный перевод Responsive Design.
Так адаптивность или отзывчивость?
Не будем ломать голову.
С нашим решением вы можете адаптировать свой контент под различные устройства,
а отзывчивость со стороны настроек компонентов мы вам уже обеспечили.
Кому-то это может показаться мелочью, но точно не контент-менеджеру (или веб-мастеру), который теперь сможет:
- спокойно выводить абсолютно разные списки (блоки, плитки, слайдеры) независимо от формата отображения элементов в них,
- легко устанавливать: количество колонок, количество элементов в списках, количество элементов при разных разрешениях.
Несколько наглядных примеров.
Вот так сейчас выглядит концентратор на демо-сайте:
![Фото 1: «5_elements.png»](https://site-cloud-files.bitrix.info/resize_cache/1319983/04dbd6b4c314fe48f655aad84339ad15/main/f35/f350a23e9b815ffbf16037d6c9191e4d/5_elements.png)
В настройках компонента установлена 10-колоночная сетка и вывод 5 элементов при данном разрешении.
![Фото 2: «elements_quantity.png»](https://site-cloud-files.bitrix.info/main/e61/e614b6b6b80cb9d9521f88115f90bf78/elements_quantity.png)
Ну, а если вы захотите вывести всего 3 товара при разрешении LG, MD и SM, а при XS - 1 товар (например, создали новую широкую карточку для элементов, либо в разделе всего 3 товара), вы можете поменять эти настройки и сразу же увидите изменения на сайте.
LG, MD, SM
![Фото 3: «3_elements.png»](https://site-cloud-files.bitrix.info/resize_cache/1319985/04dbd6b4c314fe48f655aad84339ad15/main/9b5/9b5a3502e2908764985293f11d9eeca7/3_elements.png)
XS
![Фото 4: «XS.png»](https://site-cloud-files.bitrix.info/main/27f/27f109650c48b94f480701a7e256580e/XS.png)
Кстати! с редакции 15.5 практически все компоненты Битрикс работают на базе Bootstrap. Причем сетка используется в 12 колонок.
Это не всегда удобно. К примеру - в одноколоночном дизайне очень классно смотрятся именно пять товаров в ряд, чего в принципе невозможно сделать, используя 12 колоночную сетку. Тем не менее... Мы эту задачку решили.И не просто решили, теперь у каждого из вас есть возможность использовать адаптивность компонент как в 12, так и в 10 колоночном варианте
Возможность применять 12 и 10 колоночные сетки в процессе настройки - это с виду незаметная, но очень мощная фишка, которая может развязать руки веб-мастерам.
Но списки элементов - это еще не все.
Помимо основных компонентов списков, настроить адаптивность можно и у всплывающего меню (при установленном в нем многоколоночном выводе).
![Фото 5: «responsive.png»](https://site-cloud-files.bitrix.info/main/5ca/5ca0912d464311fa33c58335b8e60f7b/responsive.png)
LG
![Фото 6: «LG.png»](https://site-cloud-files.bitrix.info/resize_cache/1319991/04dbd6b4c314fe48f655aad84339ad15/main/b12/b1254df78fde95cd7e3146e3fdd0b3f2/LG.png)
MD
![Фото 7: «MD.png»](https://site-cloud-files.bitrix.info/resize_cache/1319989/04dbd6b4c314fe48f655aad84339ad15/main/da9/da950f37672eb87fd4cc9867aefebd15/MD.png)
Это также особенная фишка нашего проекта. Про меню мы напишем еще специальные статьи, но с точки адаптивности - оно тоже продумано.
Решение BXReady Интернет-магазин не только изначально адаптивно, но и сделано так, чтобы вы еще могли настраивать эту адаптивность под свои потребности.
А теперь важное резюме:
Мы так привыкли к термину адаптивность, что уже забываем про дословный перевод Responsive Design.
Так адаптивность или отзывчивость?
Не будем ломать голову.
С нашим решением вы можете адаптировать свой контент под различные устройства,
а отзывчивость со стороны настроек компонентов мы вам уже обеспечили.
Предлагаем еще прочесть