Новогодние праздники позади и мы продолжаем знакомство с реализацией 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;» картинка начинает изменять свой размер вместе с изменением размера роительского элемента.
Работа с текстом
Выравнивание текста
- 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 удобно использовать вводный пост.