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

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

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

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

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

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

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

В 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

Обратите внимание, что в 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>
Bootstrap 4 - Навигационный блок для пагинации, у которого вместо текстовых надписей используются значки

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

Изменения состояния ссылок в навигационной панели выполняется с помощью классов 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>
Bootstrap 4 - Навигационный блок для пагинации, у которого к ссылкам применены классы active и disabled

Класс 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 - Размеры навигационных блоков для пагинации
<!-- 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 - Выравнивание навигационного блока для пагинации

В 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 кнопок (ссылок).

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

Bootstrap 3 - Компонент Pager

Синтаксис компонента 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 Pager - Изменение расположения кнопок
<!-- 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 Pager - Отключение функциональности кнопки
<!-- 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>