Bootstrap 4 Impaginazione
Impaginazione di base
Se hai un sito web con molte pagine, potresti voler aggiungere una sorta di impaginazione a ciascuna pagina.
Per creare un'impaginazione di base, aggiungi la .paginationclasse a un <ul>elemento. Quindi aggiungi .page-itema ciascun <li>elemento e una .page-linkclasse a ciascun collegamento all'interno <li>:
Esempio
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Stato attivo
La .activeclasse viene utilizzata per "evidenziare" la pagina corrente:
Esempio
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Stato disabile
La .disabledclasse viene utilizzata per i collegamenti non cliccabili:
Esempio
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
Dimensionamento della paginazione
I blocchi di impaginazione possono anche essere dimensionati su una dimensione maggiore o minore:
Aggiungi classe .pagination-lgper blocchi più grandi o .pagination-smper blocchi più piccoli:
Esempio
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Allineamento dell'impaginazione
Utilizzare le classi di utilità per modificare l'allineamento dell'impaginazione:
Esempio
<!-- 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>
Suggerimento: leggi di più sulle classi Bootstrap 4 Utility/Helper nel nostro capitolo BS4 Utilities .
Briciole di pane
Un altro modulo per l'impaginazione è il breadcrumb:
Le classi .breadcrumbe .breadcrumb-item
indicano la posizione della pagina corrente all'interno di una gerarchia di navigazione:
Esempio
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>