Рубрики
PrestaShop

Bootstrap компоненты в шаблонах PrestaShop: Navbar, Panels и Tables

preview (1)
Общее представление о Bootstrap и его классах мы получили из предыдущих постов, в сегодняшней статье рассмотрим более подробно работу с bootstrap и html компонентами в шаблонах PrestaShop.

Навигация – работа с компонентом navbar

Отображение navbar на PC

Отображение navbar на PC

Отображение navbar на мобильных устройствах (все элементы прячутся и появляются по нажатию на кнопку)

navbar2

Элемент может быть зафиксирован при прокрутке сверху или снизу.

Список некоторых классов для работы с компонентом 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 Email
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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *