Как и обещала от теории переходим к практике, в сегодняшнем посте опишу подробнее применение 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”
а толку? в инетрнете нет нигде как устроен престашоп!
На моем сайте есть несколько статей на эту тему)