Как создать разбиение на страницы в Bootstrap 5?

Возможно, вы видели компонент нумерации страниц на большинстве страниц индекса и архива блога. Обычно страницы индекса показывают последние десять статей, а затем используют загрузку большего количества или пронумерованную нумерацию страниц для перехода к другим страницам. В Bootstrap 5 вам просто нужно включить фрагмент кода для отображения разбивки на страницы в разных стилях. Обратите внимание, что Bootstrap — это интерфейсный фреймворк, он предлагает только встроенный компонент нумерации страниц для простого отображения. Вы должны сами написать код для добавления автоматических ссылок на страницы индекса и архива.

Если на вашем сайте меньше страниц, легко вручную добавить каждую ссылку на пагинацию. Но для более крупного сайта, допустим, у вас есть 500 сообщений в блоге, вам следует использовать соответствующий сценарий и настройку темы, чтобы добавить автоматические ссылки в пагинацию.

В этом руководстве рассматриваются следующие способы создания разбивки на страницы в Bootstrap:

Создание пагинации Bootstrap по умолчанию
Добавление значков для предыдущей и следующей навигации
Отображение активных и отключенных ссылок
Создание пагинации разных размеров
Использование разных выравниваний

Компонент нумерации страниц в Bootstrap — это не что иное, как неупорядоченный список элементов, как показано ниже:

<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Previous</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a></li>
</ul>
</nav>

В основном вы должны использовать компонент
для включения разбивки на страницы.
Включите неупорядоченный список с классом «.pagination».
Каждый освещенный элемент должен иметь класс «.page-item».
Каждая ссылка должна использовать класс «.page-link».

Пагинация по умолчанию будет выглядеть, как показано ниже:

2. Добавление значков для предыдущего и следующего

По умолчанию при разбивке на страницы используется текст для предыдущей и следующей навигации. Вместо этого вы можете использовать значки, используя приведенный ниже код.

<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>

Поскольку значки не могут быть прочитаны пользователями с ослабленным зрением, вы должны использовать предыдущий / следующий текст для программ чтения с экрана с использованием класса «.sr-only». Это не будет отображаться в браузере. Компонент будет выглядеть в браузере, как показано ниже:

3. Отображение активной ссылки и отключение ссылки

Вы можете отобразить активную ссылку на странице, добавив класс «.active» к необходимому элементу списка. Аналогичным образом добавьте класс «.disabled», чтобы запретить переход по конкретной ссылке. В приведенном ниже примере предыдущий текст навигации отключен, а ссылка 2 отображается как активная.

<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item active">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2 <span class="sr-only">Active Page</span></a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a>
</li>
</ul>
</nav>

Класс .disabled использует свойство CSS по умолчанию «pointer-events: none». Это отключит щелчок мышью, но пользователи по-прежнему могут использовать клавишу табуляции на клавиатуре, чтобы выделить ссылку, и нажать клавишу пробела, чтобы открыть связанную страницу. Атрибут tabindex = ”- 1 ″ используется для отключения ссылки для доступа с клавиатуры.

Ниже показано, как активная ссылка будет отображаться на странице. При наведении указателя мыши на отключенные ссылки будет отображаться символ стоп-курсора.

Пагинация с отключенным и активным статусом

4. Страницы большого и малого размера

Подобно большинству других компонентов Bootstrap 4, разбиение на страницы также может быть увеличено или уменьшено. Более крупный должен содержать класс «.pagination-lg» с неупорядоченным списком, как показано ниже:

<nav aria-label="Pagination">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a>
</li>
</ul>
</nav>

И правильно !!! Меньшее по размеру должно содержать класс «.pagination-sm»:

<nav aria-label="Pagination">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a>
</li>
</ul>
</nav>

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

5. По центру и по правому краю

Последний вариант — это расклад. По умолчанию компонент разбивки на страницы будет выровнен по левой стороне. Вы можете сделать его по центру или вправо, используя дополнительные классы. Для выравнивания по центру добавьте «.justify-content-center» в неупорядоченный список.

<nav aria-label="Pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a>
</li>
</ul>
</nav>

А для правильного выравнивания добавьте в неупорядоченный список класс «.justify-content-end».

<nav aria-label="Pagination">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">1</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">2</a></li>
<li class="page-item"><a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">3</a></li>
<li class="page-item">
<a class="page-link" href="https://www.webnots.com/bootstrap-pagination-tutorial/#">Next</a>
</li>
</ul>
</nav>

Изучите Bootstrap 5 (Индекс)