Bootstrap 5 Paginering

Basis paginering

Als uw website veel pagina's heeft, wilt u mogelijk een soort paginering toevoegen aan elke pagina.

Voor het maken van een basis paginering, voeg toe .pagination Voeg een klasse toe aan <ul> element. Voeg vervolgens toe .page-item toe aan elke <li> element, en voeg .page-link Voeg een klasse toe aan <li> Elke link in

Voorbeeld

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Vorige pagina</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="#">Volgende pagina</a></li>
</ul>

Probeer het zelf

Actief

.active Klasse voor "geaccentueerd" huidige pagina:

Voorbeeld

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Vorige pagina</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="#">Volgende pagina</a></li>
</ul>

Probeer het zelf

Uitgeschakeld

.disabled Klasse voor onbruikbare links:

Voorbeeld

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Vorige pagina</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="#">Volgende pagina</a></li>
</ul>

Probeer het zelf

Pagineringsgrootte

De afmetingen van de paginering kunnen ook worden aangepast tot groter of kleiner:

Voeg een klasse toe voor grotere blokken .pagination-lg Of voeg toe voor kleinere blokken .pagination-sm Soort:

Voorbeeld

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Vorige pagina</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="#">Volgende pagina</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Vorige pagina</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="#">Volgende pagina</a></li>
</ul>

Probeer het zelf

Paginering uitlijning

Gebruik de utility-klasse om de uitlijning van de paginering te wijzigen:

Voorbeeld

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

Probeer het zelf

Kruimelpad (Breadcrumbs)

Een andere vorm van paginering is kruimelpad:

.breadcrumb en .breadcrumb-item De klasse bepaalt de huidige positie van de pagina in de navigatiestructuur:

Voorbeeld

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotografie</a></li>
  <li class="breadcrumb-item"><a href="#">Herfst 2019</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Peking</li>
</ul>

Probeer het zelf