Bootstrap 5sidor

Grundläggande sidbrytning

Om din webbplats har många sidor, kanske du vill lägga till något sorts sidbrytning för varje sida.

För att skapa grundläggande sidbrytning, lägg till .pagination Lägg till klass till <ul> elementet. Lägg sedan till .page-item tillexempel <li> elementet och lägg till .page-link Lägg till klass till <li> För varje länk i

Exempel

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Föregående sida</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="#">Nästa sida</a></li>
</ul>

Prova själv

Aktiv status

.active Klass används för att "markera" den aktuella sidan:

Exempel

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Föregående sida</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="#">Nästa sida</a></li>
</ul>

Prova själv

Inaktiverad status

.disabled Klass används för icke-klickbara länkar:

Exempel

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Föregående sida</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="#">Nästa sida</a></li>
</ul>

Prova själv

Sidstorlek

Storleken på sidbrytarna kan också justeras till större eller mindre:

Lägg till klass för större block .pagination-lg eller lägg till för mindre block .pagination-sm Typ:

Exempel

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Föregående sida</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="#">Nästa sida</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Föregående sida</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="#">Nästa sida</a></li>
</ul>

Prova själv

Pagineringjustering

Använd utility-klasser för att ändra pagineringens justering:

Exempel

<!-- Standard (vänsterjusterad) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Centrerad -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Högerjusterad -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Prova själv

Klibbbröd (Breadcrumbs)

En annan form av paginering är klibbbröd:

.breadcrumb och .breadcrumb-item Klassar definierar den aktuella sidans plats i navigationsstrukturen:

Exempel

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotografier</a></li>
  <li class="breadcrumb-item"><a href="#">2019 års höst</a></li>
  <li class="breadcrumb-item"><a href="#">Kina</a></li>
  <li class="breadcrumb-item active">Peking</li>
</ul>

Prova själv