Bootstrap классы в шаблонах PrestaShop

Bootstrap классы в шаблонах PrestaShop
Новогодние праздники позади и мы продолжаем знакомство с реализацией Bootstrap в шаблонах PrestaShop. Для навигации рекомендую использовать первый пост в цикле статей. В Bootstrap есть множество дефолтных классов с заранее заданными стилями поведения – PrestaShop поддерживает большинство из них.

Вспомогательные классы

  • pull-left — float: left.
  • pull-right — float :right
  • clearfix – для согласования высоты дочерних плавающих блоков и родительского.
  • close – создает кнопку для закрытия (x).
  • caret – создает значек выпадающего меню (dropdown).
  • center-block – центрирует элемент.
  • show и hidden – отображают и скрывают элемент.

Это наиболее часто используемые классы для быстрой верстки, например, всем плавающим элементам можно теперь задавать класс pull-left, а родительскому clearfix для корректного выравнивания по содержимому.

Классы для респонсивной верстки

Эти классы позволяют скрыть\отобразить элемент в зависимости от устройства, на котором просматривается страница

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

Бутстрап значительно упрощает поддержку респонсивной верстки, например, для корректного ресайзинга картинок достаточно назначить им класс «img-responsive». Благодаря назначенным стилям «max-width: 100%; height: auto;» картинка начинает изменять свой размер вместе с изменением размера роительского элемента.
Description

Работа с текстом
Выравнивание текста

  • text-left — Выравнивание по левому краю
  • text-center -Выравнивание по центру
  • text-right — Выравнивание по правому краю
  • text-justify — Выравнивание текста по ширине

Цвет текста:

  • text-muted — color: #999999;
  • text-primary – color: #428bca
  • text-success – color: #3c763d
  • text-info – color: #31708f
  • text-warning – color: #8a6d3b
  • text-danger – color: #a94442

Как видно из приведенных примеров в Bootstrap имеется множество классов для задания визуальных эффектов, а так же ускорения верстки — поэтому рекомендую ознакомиться с ними и начать пользоваться. Но перед этим ознакомитесь с Bootstrap в структуре шаблона PrestaShop — если новогодние праздники вы начали отмечать рано и пропустили этот пост.
Для навигации по циклу статей о поддержке Bootstrap в PrestaShop удобно использовать вводный пост.