Bootstrap - Pagination (навигационный блок для пагинации)

В этой статье рассмотрим процесс создания такого элемента веб-интерфейса как навигационный блок для пагинации. В Bootstrap 3 и 4 этот элемент интерфейса реализуется с помощью компонента Pagination.

Что такое пагинация

Пагинация – это постраничный вывод данных. Т.е. это такой вывод, когда данные выводятся не все сразу, а небольшими частями (страницами).

Для перемещения по этим частям (страницам) используется навигационный блок.

Компонент Pagination фреймворка Bootstrap как раз и предназначен для создания этого элемента интерфейса, т.е. навигационного блока.

Создание навигационного блока для пагинации

В Bootstrap 3 навигационный блок имеет следующую структуру:

<nav aria-label="Последние новости">
    <ul class="pagination">
        <li><a href="#"> Предыдущая </a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#"> Следующая </a></li>
    </ul>
</nav>

Элемент nav в этом фрагменте играет роль обёрточного контейнера. Необходим он в этой структуре только для того, чтобы вспомогательные технологии воспринимали данный фрагмент HTML кода как навигацию.

Кроме этого, вспомогательным технологиям желательно ещё пояснить, что это за блок навигации. Осуществляется это действие посредством атрибута aria-label.

Разметка навигационного блока для пагинации в Bootstrap выполняется с помощью маркированного списка. Каждая навигационная ссылка в этом блоке – это элемент a, обёрнутый в li и помещённый в ul.

Визуальное оформление навигационного блока в Bootstrap осуществляется с помощью класса pagination, который необходимо добавить к ul.

Структура навигационного блока в Bootstrap 4:

<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
    </ul>
</nav>

Обратите внимание, что в Bootstrap 4 к элементам li и a необходимо добавить классы. К li - класс page-item, а к a - page-link. Эти классы задают CSS стили элементам и необходимы для корректного отображения навигационного блока.

Использования вместо текстовых надписей значков или иконок

Пример навигационной панели для пагинации, в которой в качестве контента некоторых ссылок используются значки:

<!-- Bootstrap 4 -->
<nav aria-label="Статьи по Bootstrap 4">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        Первая
      </a>
    </li>
    <li class="page-item disabled">
      <a class="page-link" href="#" aria-label="Предыдущая">
        <span aria-hidden="true">«</span>
        <span class="sr-only">Предыдущая</span>
      </a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Следующая">
        <span aria-hidden="true">»</span>
        <span class="sr-only">Следующая</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        Последняя
      </a>
    </li>
  </ul>
</nav>

Изменение состояния навигационной ссылки

Изменения состояния ссылок в навигационной панели выполняется с помощью классов disabled и active. Первый класс (disabled) используется для создания не активной (не кликабельной) ссылки. Второй класс (active) необходим для выделения (указания) текущей страницы. Добавлять классы active и disabled нужно не к самой ссылке, а к элементу li.

<!-- Bootstrap 3 -->
<nav aria-label="Последние новости">
    <ul class="pagination">
        <li class="disabled"><a href="#"> Предыдущая </a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#"> Следующая </a></li>
    </ul>
</nav>

<!-- Bootstrap 4 -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#">Предыдущая</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
    </ul>
</nav>

Класс disabled устанавливает ссылки CSS объявление pointer-events: none. Данное объявление предназначено для отключения функциональности ссылки. Но оно не отключает переход на неё с помощью клавиатуры. Поэтому, если вы хотите в своём проекте полностью отключить функциональность таких ссылок, то их с помощью JavaScript необходимо дополнительно отслеживать и добавлять к ним атрибут tabindex="-1".

Ещё один способ отключить функциональности ссылок - это не использовать элемент а.

<!-- Bootstrap 4 -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <span class="page-link">Предыдущая</span>
        </li>
        <li class="page-item active">
            <span class="page-link">1</span>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Следующая</a>
        </li>
    </ul>
</nav>

Изменение размеров навигационного блока

В Bootstrap 3 и 4 изменить размеры навигационного блока можно с помощью классов pagination-lg и pagination-sm. Выполняется это посредством добавления одного из этих классов к классу pagination.

Первый класс (pagination-lg) используется тогда, когда необходимо увеличить размеры навигации, а второй (pagination-sm) - когда уменьшить.

<!-- Bootstrap 4 -->

<!-- Увеличенные размеры навигационного блока -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination pagination-lg justify-content-center">
        <li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
    </ul>
</nav>

<!-- Уменьшенные размеры навигационного блока -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination pagination-sm justify-content-center">
        <li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
    </ul>
</nav>

Выравнивание навигационного блока

В Bootstrap 3 выравнивание навигационной панели для пагинации осуществляется с помощью классов для выравнивания текста.

<!-- Bootstrap 3 -->

<!-- По центру -->
<nav class="text-center" aria-label="Последние новости">
    <ul class="pagination">
        ...
    </ul>
</nav>

<!-- По правому краю -->
<nav class="text-right" aria-label="Последние новости">
    <ul class="pagination">
        ...
    </ul>
</nav>

В Bootstrap 4 выравнивание навигационной панели для пагинации осуществляется с помощью flex-классов.

<!-- Bootstrap 4 -->

<!-- По центру -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination justify-content-center">
        ...
    </ul>
</nav>

<!-- По правому краю -->
<nav aria-label="Статьи по Bootstrap 4">
    <ul class="pagination justify-content-end">
        ...
    </ul>
</nav>

Компонент Pager (Bootstrap 3)

Pager – это компонент Bootstrap 3, который предназначен для создания простой навигации по страницам или другим материалам сайта. Состоит этот компонент из 2 кнопок (ссылок).

Один из самых распространенных вариантов применения этой навигации - это сделать так, чтобы первая кнопка осуществляла переход к более новой записи на сайте, а вторая - к более старой.

Синтаксис компонента Pager:

<!-- Bootstrap 3 -->

<nav aria-label="Навигация по страницам сайта">
  <ul class="pager">
    <li><a href="#">Предыдущая</a></li>
    <li><a href="#">Следующая</a></li>
  </ul>
</nav>

Изменение расположения кнопок

По умолчанию, кнопки компонента Pager выравниваются по центру. Но кроме этого варианта, Bootstrap 3 позволяет их ещё выровнять по разным краям. Осуществляется это посредством добавления к первой кнопке класса previous, а ко второй - next. Класс previous выравнивает ссылку по левому краю, а next – по правому.

<!-- Bootstrap 3 -->
<nav aria-label="Навигация по страницам сайта">
  <ul class="pager">
    <li class="previous"><a href="#">Предыдущая</a></li>
    <li class="next"><a href="#">Следующая</a></li>
  </ul>
</nav>

Отключение функциональности кнопки

Перевод кнопки в отключенное состояние осуществляется посредством добавления к ней класса disabled.

<!-- Bootstrap 3 -->
<nav aria-label="Навигация по страницам сайта">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Предыдущая</a></li>
    <li class="next"><a href="#">Следующая <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>