Bootstrap - Impaginazione

Questo capitolo tratta della funzione di impaginazione supportata da Bootstrap. Impaginazione, una lista non ordinata è gestita da Bootstrap come molti altri elementi dell'interfaccia.

Impaginazione

La tabella seguente elenca le classi fornite da Bootstrap per gestire l'impaginazione.

Classe Descrizione Codice d'esempio
.pagination Aggiungi questa classe per ottenere l'impaginazione sulla tua pagina. 
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active È possibile personalizzare i collegamenti utilizzando .disabled per collegamenti non cliccabili e .active per indicare la pagina corrente. 
<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>
.pagination-lg, .pagination-sm Usa queste classi per ottenere articoli di dimensioni diverse. 
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Impaginazione predefinita

Il seguente esempio dimostra l'uso di class .pagination discusso nella tabella sopra -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

stati

Il seguente esempio dimostra l'uso di class .disabled, .active discusso nella tabella sopra -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Dimensionamento

L'esempio seguente mostra l'uso delle classi per il dimensionamento, .pagination-* discusso nella tabella sopra -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Pager

Se è necessario creare semplici collegamenti di impaginazione che vadano oltre il testo, il cercapersone può funzionare abbastanza bene. Come i collegamenti di paginazione, il cercapersone è un elenco non ordinato. Per impostazione predefinita, i collegamenti sono centrati. La tabella seguente elenca le classi che Bootstrap fornisce per il cercapersone.

Classe Descrizione Codice d'esempio
.pager Aggiungi questa classe per ottenere i link del pager. 
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Precedente Successivo Usa classe .previous per allineare a sinistra e .next per allineare a destra i collegamenti. 
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.Disabilitato Aggiungi questa classe per ottenere un aspetto smorzato. 
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Pager predefinito

Il seguente esempio dimostra l'uso di class .pager discusso nella tabella sopra -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Collegamenti allineati

L'esempio seguente mostra l'uso delle classi per l'allineamento, .previous, .next discusso nella tabella sopra -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

stati

Il seguente esempio dimostra l'uso di class .disabled discusso nella tabella sopra -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>