Bootstrap 4 Пагинация
Базовая нумерация страниц
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить разбиение на страницы для каждой страницы.
Чтобы создать базовую разбивку на страницы, добавьте .paginationкласс к <ul>элементу. Затем добавьте .page-itemк каждому <li>элементу и .page-linkкласс к каждой ссылке внутри <li>:
Пример
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Активное состояние
Класс .activeиспользуется для «выделения» текущей страницы:
Пример
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item
active"><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="#">Next</a></li>
</ul>
Отключенное состояние
Класс .disabledиспользуется для некликабельных ссылок:
Пример
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
Размер страницы
Блоки пагинации также можно увеличить или уменьшить:
Добавьте класс .pagination-lgдля больших блоков или .pagination-smдля меньших блоков:
Пример
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Выравнивание страницы
Используйте служебные классы, чтобы изменить выравнивание разбиения на страницы:
Пример
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
Совет. Узнайте больше о классах Bootstrap 4 Utility/Helper в нашей главе «Утилиты BS4» .
Панировочные сухари
Еще одна форма нумерации страниц — хлебные крошки:
Классы .breadcrumbи .breadcrumb-item
указывают местоположение текущей страницы в навигационной иерархии:
Пример
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>