Как создать разбиение на страницы в 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">«</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">»</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 (Индекс)
