Bootstrap 5 sideopdeler

Grundlæggende paginering

Hvis din webside har mange sider, kan du ønske at tilføje nogen form for paginering til hver side.

For at oprette grundlæggende paginering, tilføj .pagination Tilføj klasse til <ul> element. Derefter tilføj .page-item til hver <li> element, og tilføj .page-link Tilføj klasse til <li> på hver link:

Eksempel

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">foregående side</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æste side</a></li>
</ul>

Prøv det selv

Aktiv tilstand

.active Klasse bruges til "fremhævet" nuværende side:

Eksempel

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">foregående side</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æste side</a></li>
</ul>

Prøv det selv

Deaktiveret tilstand

.disabled Klasse bruges til uaktive links:

Eksempel

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">foregående side</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æste side</a></li>
</ul>

Prøv det selv

Side størrelse

Sideblokke kan også justeres til større eller mindre størrelse:

Tilføj klasse til større blokke .pagination-lg eller tilføj til mindre blokke .pagination-sm Klasse:

Eksempel

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">foregående side</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æste side</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">foregående side</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æste side</a></li>
</ul>

Prøv det selv

Pagination justering

Brug utility-klasser til at ændre paginationens justering:

Eksempel

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

Prøv det selv

Brødrister (Breadcrumbs)

En anden form for pagination er brødrister:

.breadcrumb og .breadcrumb-item Klasse bestemmer current sides placering i navigationshierarkiet:

Eksempel

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Billeder</a></li>
  <li class="breadcrumb-item"><a href="#">2019 efterår</a></li>
  <li class="breadcrumb-item"><a href="#">Kina</a></li>
  <li class="breadcrumb-item active">Beijing</li>
</ul>

Prøv det selv