декабря 2, 2015

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

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

<!DOCTYPE html>
<html lang="fr">
...
</html>

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

<div id="columns" class="container">
	<div class="row">
		<div id="center_column" class="center_column col-xs-12 col-sm-12">
		</div>
	</div>
</div>

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

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

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

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


Комментарии

  • Сергей

    а толку? в инетрнете нет нигде как устроен престашоп!

    • На моем сайте есть несколько статей на эту тему)