Bootstrap 4 Pagination
Базовая разбивка на страницы
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то разбивку на страницы на каждой странице.
Чтобы создать основную разбивку на страницы, добавьте .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
класс используется для "hightlight" текущей страницы:
Пример
<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>
Сухарях
Другая форма для разбиения на страницы, является панировочные сухари:
.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>