Strony paginacyjne Bootstrap 5

Podstawowa paginacja

Jeśli Twoja strona internetowa ma wiele stron, może chcesz dodać pewien rodzaj paginacji do każdej strony.

Aby utworzyć podstawową paginację, dodaj .pagination dodaj klasę do <ul> elementu. Następnie dodaj .page-item do każdego <li> elementu, a następnie dodaj .page-link dodaj klasę do <li> każdy link w

Przykład

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Poprzednia strona</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="#">Następna strona</a></li>
</ul>

Spróbuj sam

Stan aktywny

.active Klasa używana do "podkreślenia" bieżącej strony:

Przykład

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Poprzednia strona</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="#">Następna strona</a></li>
</ul>

Spróbuj sam

Stan wyłączony

.disabled Klasa używana dla nieaktywnych linków:

Przykład

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Poprzednia strona</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="#">Następna strona</a></li>
</ul>

Spróbuj sam

Rozmiar paginacji

Rozmiar bloków paginacji można również dostosować do większego lub mniejszego:

Dodaj klasę dla większych bloków .pagination-lg lub dodaj klasę dla mniejszych bloków .pagination-sm Klasa:

Przykład

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Poprzednia strona</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="#">Następna strona</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Poprzednia strona</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="#">Następna strona</a></li>
</ul>

Spróbuj sam

Wyważenie paginacji

Użyj klas utility do zmiany wyważenia paginacji:

Przykład

<!-- 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>

Spróbuj sam

Bułeczki nawigacyjne (Breadcrumbs)

Jedną z form paginacji jest bułeczki nawigacyjne:

.breadcrumb i .breadcrumb-item Klasa określa pozycję strony w hierarchii nawigacji:

Przykład

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Zdjęcia</a></li>
  <li class="breadcrumb-item"><a href="#">Jesień 2019 roku</a></li>
  <li class="breadcrumb-item"><a href="#">Chiny</a></li>
  <li class="breadcrumb-item active">Pekin</li>
</ul>

Spróbuj sam