Paginazione in bootstrap 5
Come creare una impaginazione usando bootstrap 5
Per fare una impaginazione, assegnare il .impaginazione classe per un elenco non ordinato, .Page-Item Classe per gli elementi dell'elenco e .Page-link Classe al collegamento presente all'interno di ogni elemento dell'elenco.
Html
Il codice di cui sopra genera una paginazione che mostra la numerazione da 1 a 4 mentre & Laquo e & Raquo sono nomi di entità per le virgole a doppio angolo di punta e punta a destra rispettivamente. Queste entità aiutano l'utente a spostare la valutazione della paginazione all'indietro e in avanti.
Produzione
L'output visualizza una impaginazione di base.
Come assegnare gli stati attivi e disabili a una paginazione
Lo stato attivo di una paginazione mostra la pagina che l'utente è attualmente su, mentre lo stato disabilitato rende un link insignificante e rende l'utente consapevole che non ci sono ulteriori pagine da navigare.
Html
Lo snippet del codice creerà una paginazione con l'elemento dell'elenco etichettato "Back" assegnato allo stato disabilitato, nel frattempo, lo stato attivo è stato assegnato all'elemento dell'elenco etichettato "4" che indica che l'utente è attualmente nella quarta pagina.
Produzione
Gli stati attivi e disabili sono stati assegnati con successo alla paginazione.
Come ridimensionare una impaginazione
Se desideri ridimensionare la tua impaginazione, usa .Paginazione-Sm classe per creare paginazioni di piccole dimensioni, mentre usa il .Paginazione-LG per generare paginazioni di grandi dimensioni.
Html
Il codice sopra genererà paginazioni sia piccole che di grandi dimensioni per dimostrare il confronto tra le dimensioni di entrambe le paginazioni.
Produzione
Ecco come puoi ridimensionare la tua impaginazione.
Come impostare l'allineamento di una paginazione
Una paginazione per impostazione predefinita è posizionata nell'angolo sinistro di una pagina, tuttavia, se si desidera posizionarla al centro, quindi utilizzare il .Justify-Content-Center classe, mentre usa il .giustificare il contenuto-end per posizionarlo nell'angolo destro della pagina.
Html
Il codice sopra utilizza il file .Classe di Center giustificata, pertanto, la paginazione creata di conseguenza verrà posizionata al centro della pagina.
Produzione
Questo è una impaginazione posizionata al centro.
Ora posizioniamo la paginazione nell'angolo destro della pagina.
Html
Il codice sopra utilizza il file .Classe di end-end di giustificare, quindi la paginazione verrà posizionata alla fine della pagina.
Produzione
Questa è una impaginazione posizionata a destra.
Conclusione
Una paginazione può essere creata assegnando il .impaginazione classe per un elenco non ordinato, .Page-Item Classe per gli elementi dell'elenco e .Page-link Classe al collegamento presente all'interno di ogni elemento dell'elenco. Se desideri ridimensionare una impaginazione, fai uso del .Paginazione-Sm, E .Paginazione-LG classi. Inoltre, per allineare una impaginazione al centro o alla fine di una pagina usa il .Justify-Content-Center, E .giustificare il contenuto-end lezioni rispettivamente. Infine, è anche possibile assegnare stati attivi e disbarmati agli elementi di impaginazione.