февраля 8, 2016

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

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-th-list"></span></a>
      <a href="#" class="brand">SiteTitle</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Таблицы Tables

Bootstrap позволяет легко сделать таблицы более привлекательными, добавлением классов к ее элементам.
Для того, чтобы созданная вами таблица была оформлена в стиле Bootstrap, ей нужно назначить класс table

<table class="table">
</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;

Пример таблицы

<table class="table table-condensed table-hover">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr class="warning">
    <td>John</td>
    <td>Carter</td>
    <td>johncarter@mail.com</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Parker</td>
    <td>peterparker@mail.com</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Rambo</td>
    <td>johnrambo@mail.com</td>
    </tr>
  </tbody>
</table>

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: добавляет подвал к панели.

Пример использования:

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">Panel Title</h1>
  </div>
  <div class="panel-body">
      This is the content of the panel.
  </div>
  <div class="panel-footer clearfix">
    <div class="pull-right">
      <a href="#" class="btn btn-default">Go Back</a>
    </div>
  </div>
</div>

Комментарии