Bootstrap5 Пагинация

В процессе веб-разработки, если контента слишком много, обычно используется пагинация.

Bootstrap 5 позволяет легко реализовать эффекты пагинации.

Чтобы создать базовую пагинацию, вы можете<ul>добавить к элементу.paginationкласс. Затем<li>добавьте к элементу.page-itemкласс,<li>добавьте к тегу <a> элемента.page-linkкласс:

Пример

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Предыдущая</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="#">Далее</a></li> </ul>

Попробуйте »

Состояние текущей страницы

Текущая страница может использовать.activeкласс для выделения:

Пример

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Предыдущая</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="#">Далее</a></li> </ul>

Попробуйте »

Отключенные ссылки пагинации

.disabledКласс может сделать ссылки пагинации некликабельными:

Пример

<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Предыдущая</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="#">Далее</a></li> </ul>

Попробуйте »

Размеры пагинации

Вы можете задать для элементов пагинации разные размеры.

.pagination-lgкласс задаёт элементы пагинации с крупным шрифтом,.pagination-smкласс задаёт элементы пагинации с мелким шрифтом:

Пример

<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Предыдущая</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="#">Далее</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Предыдущая</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="#">Далее</a></li> </ul>

Попробуйте »

Выравнивание пагинации

Вы можете использовать служебные классы для настройки выравнивания пагинации:

Пример

<!--По умолчанию (выравнивание по левому краю)--> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--По центру--> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--По правому краю--> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>

Попробуйте »

Навигация «хлебные крошки»

.breadcrumbи.breadcrumb-itemКласс используется для создания навигации с помощью хлебных крошек:

Пример

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Фотографии</a></li> <li class="breadcrumb-item"><a href="#">Лето 2017</a></li> <li class="breadcrumb-item"><a href="#">Италия</a></li> <li class="breadcrumb-item active">Рим</li> </ul>

Попробуйте »
Другие расширения