Общее представление о Bootstrap и его классах мы получили из предыдущих постов, в сегодняшней статье рассмотрим более подробно работу с bootstrap и html компонентами в шаблонах PrestaShop.
Навигация – работа с компонентом navbar
Отображение navbar на PC
Отображение navbar на мобильных устройствах (все элементы прячутся и появляются по нажатию на кнопку)
Элемент может быть зафиксирован при прокрутке сверху или снизу.
Список некоторых классов для работы с компонентом navbar
- navbar и navbar-inner: класс для создания элемента navbar.
- navbar-fixed-top: при прокрутке navbar всегда будет сверху.
- navbar-fixed-bottom: при прокрутке navbar всегда будет снизу.
- brand – для задания названия сайта.
- nav, nav-tabs и nav-pills – классы для блоков навигации.
- btn и btn-navba – классы для кнопки.
- nav-collapse, collapse, data-toggle, data-target – для автоматически скрываемого контента.
- icon-th-list – класс для задания иконки
Пример использования navbar классов с кнопкой меню с права в шаблоне PrestaShop
Таблицы Tables
Bootstrap позволяет легко сделать таблицы более привлекательными, добавлением классов к ее элементам.
Для того, чтобы созданная вами таблица была оформлена в стиле Bootstrap, ей нужно назначить класс table
По умолчанию Bootstrap добавляет таблицам следующий стиль:
- небольшие внутренние отступы внутри ячеек
- горизонтальные серые разделительные границы между строками
Основные классы для работы с таблицами:
- table-responsive: активирует прокрутку на маленьких разрешениях.
- table-striped: добавит серый фон её нечётным строкам.
- table-bordered: добавляет горизонтальные и вертикальные границы ко всем ячейкам.
- table-hover: добавляет серый фон строкам таблицы при наведении курсора мыши.
- table-condensed: уменьшает внутренние отступы в ячейках.
Классы для оформления фонов ячеек
- success — background-color: #dff0d8;
- warning — background-color: #fcf8e3;
- danger — background-color: #f2dede;
- Info — background-color: #d9edf7;
Пример таблицы
| First Name | Last Name | |
|---|---|---|
| John | Carter | johncarter@mail.com |
| Peter | Parker | peterparker@mail.com |
| John | Rambo | johnrambo@mail.com |
Panels
Иногда нужно поместить информацию в выделенный блок. Для этого случая в Bootstrap есть специальный компонент panel.
По умолчанию Bootstrap добавляет рамку и отступы вокруг панели.
Основные классы для работы с панелью:
- panel, panel-body: определяет блок как панель.
- panel-default, panel-primary, panel-success, panel-info, panel-warning and panel-danger: добавляют визуальные стили.
- panel-heading and panel-title: добавляют заголовок к панели.
- panel-footer: добавляет подвал к панели.
Пример использования:
Panel Title
This is the content of the panel.