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