Поддержка модульной сетки Bootstrap в шаблонах PrestaShop

preview (1)
В преддверии нового года предлагаю познакомиться с еще одной важной темой для верстки шаблона PrestaShop с поддержкой Bootstrap, а новогодние праздники потратить на закрепление материала )
Итак перейдем к теории — Bootstrap использует 12 колоночную сетку, которая позволяет построить гибкий макет. Вы можете использовать медиа запросы для указания контрольных точек для сетки. Дефолтное значение оптимизировано для самых низких разрешений экрана (480px – экраны самых маленьких телефонов), поэтому для этого случая использовать медиа конструкцию не нужно.

Стили для больших размеров определяются следующими запросами:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
 
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
 
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Бутстрап использует систему классовых префиксов для определения устройств по их разрешению:

  • .col-xs-…: extra small, для телефонов (< 768px)
  • .col-sm-…: small, для планшетов (≥768 px)
  • .col-md-…: medium, для мониторов десктопов (≥992 px)
  • .col-lg-…: large, для больших мониторов и TV (≥1200 px)

Например:

  • col-xs-3: 3 колонки на телефоне.
  • col-md-4: 4 колонки на десктопе.

Пример верстки страницы категорий базового шаблона PrestaShop c поддержкой модульной сетки Bootstrap

<div class="row">
	<div id="left_column" class="column col-xs-12 col-sm-3">
	</div>
	<div id="center_column" class="center_column col-xs-12 col-sm-9">
	</div>
</div>

При отображении на мобильных (< 768px) левая колонка будет растянута на всю ширину сетки (на все 12 колонок, 100% ширины родительского div.container), под ней будет идти центральный блок, так же растянутый на 12 колонок. Для устройств с большим разрешением (≥768 px) левая колонка #left_column будет иметь ширину 3 колонок, а центральный блок 9 колонок (3+9 = 12). Для корректного отображения на всех разрешениях ширина колонок будет преобразована в проценты. Если ширина экрана больше 768 px — блок будет просто масштабироваться. В зависимости от размера экрана можно изменять количество колонок. Изменяя классы у блоков мы можем изменять их отображение на различных устройствах, т.о поддержка модульной сетки Bootstrap в шаблонах PrestaShop делает верстку более легкой и быстрой.