TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare l’impaginazione Bootstrap 5?

3

Potresti aver visto il componente di impaginazione sulla maggior parte dell’indice del blog e delle pagine di archivio. Generalmente le pagine indice mostrano gli ultimi dieci articoli e poi usano load more o impaginazioni numerate per passare ad altre pagine. In Bootstrap 5, devi solo includere un pezzo di codice per visualizzare l’impaginazione in stili diversi. Nota che Bootstrap è un framework frontend, offre solo un componente di impaginazione integrato solo per scopi di visualizzazione. Dovresti codificarti per aggiungere link impaginati automatici nelle pagine di indice e archivio.

Se il tuo sito ha meno pagine, è facile aggiungere manualmente ogni collegamento nell’impaginazione. Ma per un sito più grande, supponiamo che tu abbia 500 post sul blog, dovresti utilizzare l’impostazione di script e temi appropriati per aggiungere collegamenti automatici nell’impaginazione.

Questo tutorial copre i seguenti modi per creare l’impaginazione Bootstrap:

  1. Creazione dell’impaginazione Bootstrap predefinita
  2. Aggiunta di icone per la navigazione precedente e successiva
  3. Visualizzazione dei link attivi e disabilitati
  4. Creazione di diverse dimensioni di impaginazione
  5. Utilizzo di allineamenti diversi

Il componente di impaginazione in Bootstrap non è altro che un elenco non ordinato di elementi come di seguito:

<nav aria-label="Pagination"> <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> </nav>
  • Fondamentalmente dovresti usare

    componente per includere l’impaginazione.

  • Includere l’elenco non ordinato con la classe ".pagination".

  • Ogni oggetto illuminato dovrebbe avere la classe ".page-item".

  • Ogni collegamento dovrebbe utilizzare la classe ".page-link".

L’impaginazione predefinita apparirà come mostrato di seguito:

Come creare l'impaginazione Bootstrap 5?

2 Aggiunta di icone per precedente e successivo

Per impostazione predefinita, l’impaginazione utilizza il testo per la navigazione precedente e successiva. Puoi invece utilizzare le icone utilizzando il codice seguente.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</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="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

Poiché le icone non possono essere lette dagli utenti ipovedenti, dovresti utilizzare il testo precedente/successivo per gli screen reader utilizzando la classe ".sr-only". Questo non verrà visualizzato sul browser. Il componente apparirà come di seguito sul browser:

Come creare l'impaginazione Bootstrap 5?

3 Visualizzazione del collegamento attivo e disattivazione del collegamento

È possibile mostrare il collegamento attivo sull’impaginazione aggiungendo la classe ".active" all’elemento dell’elenco richiesto. Allo stesso modo, aggiungi la classe ".disabled" per disabilitare il clic sul collegamento specifico. Nell’esempio seguente, il testo di navigazione precedente è disabilitato e il collegamento 2 è mostrato come attivo.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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 <span class="sr-only">Active Page</span></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> </nav>

La classe ".disabled" utilizza la proprietà CSS predefinita "pointer-events:none". Ciò disabiliterà il clic con il mouse, ma gli utenti possono comunque utilizzare il tasto tab della tastiera per evidenziare il collegamento e premere la barra spaziatrice per aprire la pagina collegata. L’attributo tabindex ="-1″ viene utilizzato per disabilitare il collegamento per l’accesso alla tastiera.

Di seguito è riportato come verrà mostrato il collegamento attivo nell’impaginazione. I collegamenti disabilitati mostreranno il simbolo del cursore di arresto quando si sposta il mouse sopra.

Come creare l'impaginazione Bootstrap 5?

4 impaginazioni di grandi e piccole dimensioni

Simile alla maggior parte degli altri componenti di Bootstrap 4, anche l’impaginazione può essere ridimensionata in dimensioni maggiori o minori. Quello più grande dovrebbe contenere la classe ".pagination-lg" con un elenco non ordinato come di seguito:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>

E giusto!!! Il più piccolo su dovrebbe contenere la classe ".pagination-sm":

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>

Il componente di impaginazione più grande e più piccolo apparirà come di seguito:

Come creare l'impaginazione Bootstrap 5?

5 Allineato al centro ea destra

La variazione finale è l’allineamento. Per impostazione predefinita, il componente di impaginazione sarà allineato sul lato sinistro. Puoi renderlo centrale o corretto usando classi aggiuntive. Per l’allineamento al centro, aggiungi ".justify-content-center" all’elenco non ordinato.

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>

E per il giusto allineamento, aggiungi la classe ".justify-content-end" all’elenco non ordinato.

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>

Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More