Gestire la paginazione con Bootstrap

Bootstrap permette di creare facilmente elementi utili per la paginazione dei contenuti. Tutto questo grazie all’uso della classe pagination applicata ad un elemento lista.

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
  <li><a href="#">D</a></li>
  ...
  ...
  <li><a href="#">V</a></li>
  <li><a href="#">Z</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Come avviene anche per altri elementi di cui abbiamo discusso in lezioni precedenti, anche per gli oggetti di paginazione è possibile una modifica delle dimensioni, grazie a specifiche classi:

• .pagination-lg: ingrandisce l’elemento di paginazione
• .pagination-sm: rimpicciolisce l’elemento di paginazione

Bootstrap permette di disabilitare uno o più degli elementi che costituiscono la paginazione, semplicemente assegnandogli la classe disabled. Se invece si vuole evidenziare uno degli elementi (solitamente quello corrispondente alla pagina attiva) basterà assegnargli la classe active.

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li class="active"><a href="#" >C</a></li>
  <li><a href="#">D</a></li>
  ...
  ...
  <li class="disabled"><a href="#" >V</a></li>
  <li><a href="#">Z</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Pager

Gli elementi con questa classe, creano i pulsanti per spostarsi a pagine diverse, tipicamente la pagina precedente e la successiva. Anche la classe pager si applica alle liste.

<ul class="pager">
  <li class="previous"><a href="#">Prec.</a></li>
  <li class="next"><a href="#">Succ.</a></li>
</ul>

Le classi previous e next assegnate agli elementi della lista fanno si che questi si dispongano ai lati destro e sinistro della pagina. Senza queste classi i pulsanti hanno lo stesso identico aspetto, ma sono centrati.

Anche per gli elementi pager è possibile usare la classe disabled per disabilitare un pulsante.