Bootstrap 5 Paginering
- Vorige pagina BS5 Lader
- Volgende pagina BS5 Lijstgroep
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>
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>
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>
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>
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>
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>
- Vorige pagina BS5 Lader
- Volgende pagina BS5 Lijstgroep