Рубрики
PrestaShop

Bootstrap в структуре шаблона PrestaShop

preview (1)
Как и обещала от теории переходим к практике, в сегодняшнем посте опишу подробнее применение Bootstrap в структуре шаблона PrestaShop.
Для полноценной работы Bootstrap необходимо использование HTML5. Будьте внимательны используя свойство doctype в своих шаблонах.



...

Для корректной работы зума на мобильных устройствах необходимо разместить тег viewport в шапке шаблона.

В верстке используется три уровня вложенности блоков:

  • container — класс для основного контента страницы (т.е все блоки сайта размещаются в нем). Все стили для ширины блоков задаются именно для него.
  • row — область в которую помещаются блоки для материала
  • блок с контентом (из модуля или контроллера)

Пример Bootstrap структуры шаблона PrestaShop

В CSS для основного блока container задана ширина

@media (min-width: 1200px) {
  .container {
    max-width: 1170px; } 

Основная разбивка макета по колонкам идет во внутреннем блоке center_column, как и большинство фишек Bootstrap реализована через классы.
О классах модульной сетки — в следующем посте.

Для навигации по циклу статей о поддержке Bootstrap в PrestaShop удобно использовать вводный пост.

2 ответа к “Bootstrap в структуре шаблона PrestaShop”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *