Bootstrap - Paginazione: Una Guida Completa per i Principianti

Ciao a tutti, aspiranti sviluppatori web! Oggi ci immergeremo nel mondo della paginazione di Bootstrap. Come il tuo amico insegnante di informatica del vicinato, sono entusiasta di guidarti in questo viaggio. Non preoccuparti se sei nuovo alla programmazione - inizieremo dalle basi e poi ci arrupperemo. Alla fine di questo tutorial, sarai un professionista della paginazione!

Cos'è la Paginazione?

Prima di tuffarci in Bootstrap, capiremo cos'è la paginazione. Immagina di leggere un libro lungo. Invece di stipare tutto il contenuto su una pagina, viene suddiviso in porzioni gestibili - questa è la paginazione nel mondo digitale. Aiuta a organizzare grandi quantità di contenuti su più pagine, rendendo più facile per gli utenti la navigazione.

Paginazione Bootstrap: Le Basi

Bootstrap, il nostro fidato toolkit di front-end, offre un modo semplice ed elegante per creare paginazione. Iniziamo con i fondamentali.

Paginazione Semplice

Per creare una paginazione di base in Bootstrap, utilizziamo gli elementi <nav> e <ul> con classi specifiche. Ecco un esempio semplice:

<nav aria-label="Navigazione della pagina">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">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="#">Successivo</a></li>
</ul>
</nav>

Ecco una spiegazione dettagliata:

• L'elemento <nav> avvolge la nostra paginazione per motivi semantiche.
• L'<ul> ha la classe pagination, che applica gli stili di paginazione di Bootstrap.
• Ogni <li> rappresenta una pagina e ha la classe page-item.
• Le <a> tag all'interno di ogni <li> hanno la classe page-link, che stila la parte cliccabile.

Lavorare con le Icone

Vuoi rendere la tua paginazione ancora più cool? Aggiungiamo alcune icone! Bootstrap funziona alla perfezione con librerie di icone come Font Awesome. Ecco come puoi utilizzare le icone nella tua paginazione:

<nav aria-label="Navigazione della pagina">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Precedente">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Successivo">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

In questo esempio, abbiamo utilizzato « e » per creare le icone delle frecce sinistra e destra. Questi sono enti HTML che si rendono come « e » rispettivamente.

Stati della Paginazione: Disabilitato e Attivo

A volte, vuoi evidenziare la pagina corrente o disabilitare alcune opzioni di navigazione. Bootstrap rende tutto semplice con le classi active e disabled.

<nav aria-label="Navigazione della pagina">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Precedente</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">Successivo</a>
</li>
</ul>
</nav>

Qui, il link "Precedente" è disabilitato (non puoi cliccarci sopra), e la pagina 2 è contrassegnata come attiva (attualmente selezionata).

Dimensioni

Come Goldilocks, a volte hai bisogno della paginazione della giusta dimensione. Bootstrap offre diverse opzioni di dimensionamento:

<!-- Paginazione grande -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

<!-- Paginazione piccola -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

Aggiungi pagination-lg per una paginazione più grande o pagination-sm per una paginazione più piccola. È come scegliere tra un grande o un tondo al tuo caffè preferito!

Allineamento

Per impostazione predefinita, la paginazione si allinea a sinistra. Ma cosa succede se vuoi centrarla o spostarla a destra? Bootstrap ha tutto sotto controllo:

<!-- Allineamento centrale -->
<nav aria-label="Navigazione della pagina">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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="#">Successivo</a>
</li>
</ul>
</nav>

<!-- Allineamento a destra -->
<nav aria-label="Navigazione della pagina">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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="#">Successivo</a>
</li>
</ul>
</nav>

Utilizza justify-content-center per centrare la tua paginazione, o justify-content-end per allinearla a destra.

Allineamento Utilizzando una Utilità Flex

Per un controllo ancora maggiore sull'allineamento della tua paginazione, puoi utilizzare le utilità flex di Bootstrap:

<nav aria-label="Navigazione della pagina">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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="#">Successivo</a>
</li>
</ul>
</div>
</nav>

Qui, abbiamo avvolto la nostra paginazione in un <div> con le classi d-flex e justify-content-center. Questo ti dà maggiore flessibilità nella posizionamento della tua paginazione.

Conclusione

Eccoci arrivati, ragazzi! Hai appena fatto un grand tour della paginazione di Bootstrap. Dalle strutture di base alle allineamenti eleganti, ora hai gli strumenti per creare una bellissima e funzionale paginazione per i tuoi progetti web. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi esempi.

Ecco una tabella di riepilogo delle classi che abbiamo coperto:

Classe	Scopo
pagination	Crea la struttura di base della paginazione
page-item	Stile ogni voce nella paginazione
page-link	Stile la parte cliccabile di ogni voce
active	Evidenzia la pagina corrente
disabled	Disabilita una voce di paginazione
pagination-lg	Crea una paginazione più grande
pagination-sm	Crea una paginazione più piccola
justify-content-center	Centra la paginazione
justify-content-end	Allinea la paginazione a destra
d-flex	Crea un contenitore flex

Buon codice, e possa le tue pagine essere sempre perfettamente paginate!

Credits: Image by storyset