Нумерация страниц
Класс .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">«</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">»</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">«</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">»</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">«</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">»</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">«</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">»</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</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">»</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">«</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">»</span>
</a>
</li>
</ul>
</nav>
Bootstrap 4 против Bootstrap 3
Bootstrap 3 поддерживает пейджеры (для обеспечения работы перехода к предыдущей или следующей странице). Пейджеры были удалены из Bootstrap 4.
