Bootstrap 5 Paginazione

Paginazione di base

Se il tuo sito ha molte pagine, potresti voler aggiungere una sorta di paginazione per ogni pagina.

Per creare una paginazione di base, aggiungi .pagination Aggiungi la classe a <ul> elemento. Poi aggiungi .page-item a ogni <li> elemento, e aggiungi .page-link Aggiungi la classe a <li> Per ogni link:

Esempio

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Pagina precedente</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="#">Pagina successiva</a></li>
</ul>

Prova personalmente

Stato attivo

.active Classe per "evidenziare" la pagina corrente:

Esempio

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Pagina precedente</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="#">Pagina successiva</a></li>
</ul>

Prova personalmente

Stato disabilitato

.disabled Classe per link non cliccabili:

Esempio

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Pagina precedente</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="#">Pagina successiva</a></li>
</ul>

Prova personalmente

Dimensione della paginazione

I blocchi di paginazione possono anche essere adattati a dimensioni più grandi o più piccole:

Aggiungi la classe per bloccetti più grandi .pagination-lg O aggiungi per bloccetti più piccoli .pagination-sm Classe:

Esempio

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Pagina precedente</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="#">Pagina successiva</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Pagina precedente</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="#">Pagina successiva</a></li>
</ul>

Prova personalmente

Allineamento della paginazione

Utilizza le classi utility per modificare l'allineamento della paginazione:

Esempio

<!-- Predefinito (allineamento a sinistra) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Allineamento al centro -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Allineamento a destra -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Prova personalmente

Cruscotto (Breadcrumbs)

Un'altra forma di paginazione è il cruscotto:

.breadcrumb e .breadcrumb-item La classe definisce la posizione attuale della pagina nella gerarchia di navigazione:

Esempio

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotografie</a></li>
  <li class="breadcrumb-item"><a href="#">Autunno 2019</a></li>
  <li class="breadcrumb-item"><a href="#">Cina</a></li>
  <li class="breadcrumb-item active">Pechino</li>
</ul>

Prova personalmente