Нумерация страниц

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

Нумерация по умолчанию

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 требует только класс .pagination. Bootstrap 4, в дополнение к классу .pagination, также требует, чтобы класс .page-item был добавлен к каждому элементу <li>, а класс .page-link к каждому элементу <a>.

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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 active"><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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

Отключение пункта

Добавьте класс .disabled к элементу <li>, чтобы отключить данный пункт.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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 disabled"><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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

Размер нумерации

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav> <ul class="pagination pagination-lg"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <nav> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> <li class="page-item"> <a href="#" class="page-link" aria-label="Предыдущая"> <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="Следующая"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 поддерживает пейджеры (для обеспечения работы перехода к предыдущей или следующей странице). Пейджеры были удалены из Bootstrap 4.

Автор: Йен Диксон
Последнее изменение: 21.02.2024