Пагинация в Bootstrap 4 (pagination)

Пагинация в Bootstrap 4 (pagination)

Класс .pagination в Bootstrap позволяет вывести нумерацию страниц (пагинацию) для постраничного вывода контента.

Разбиение на страницы нужно когда вы хотите показать пользователю большое количество контента. Например, результаты поиска, которые возвращают много страниц, будут иметь нумерацию страниц, что позволяет пользователю переходить на следующую страницу или даже переходить на несколько страниц вперед.

Пагинация по умолчанию

Чтобы создать нумерацию страниц по умолчанию, добавьте class="pagination" к элементу <ul>, который представляет список страниц.

Также добавьте .page-item к каждому элементу <li> и .page-link к каждому элементу <a>.

Пример простой пагинации (постраничной навигации) в Bootstrap 4:

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Активное состояние для текущей страницы

Для удобства пользователя, добавьте класс .active к элементу <li>, представляющему текущую страницу (страницу, на которой сейчас находится пользователь). Это позволит лучше ориентироваться в страницах и всегда понимать на какой странице пользователь находится в данный момент.

Неактивный (отключенный) элемент пагинации

Иногда есть необходимость отображать некоторые номера страницы как неактивные. Причины могут быть разными, но если вам понадобилась эта возможность - используйте класс .disabled для элемента <li>.

Размер пагинатора (списка страниц)

Для того, чтобы сделать список страниц больше или меньше, добавьте класс .pagination-lg или .pagination-sm для элемента <ul> с классом .pagination. Это позволит вписать пагинатор в любой набор элементов, будь то постраничная навигация, или переход между списками данных в таблицах.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*