Bootstrap - Paginación

Este capítulo trata sobre la función de paginación que admite Bootstrap. Bootstrap maneja la paginación, una lista desordenada como muchos otros elementos de la interfaz.

Paginación

La siguiente tabla enumera las clases que Bootstrap proporciona para manejar la paginación.

Clase Descripción Código de muestra
.paginación Agregue esta clase para obtener la paginación en su página. 
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active Puede personalizar los enlaces utilizando .disabled para enlaces en los que no se puede hacer clic y .active para indicar la página actual. 
<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>
.paginación-lg, .paginación-sm Utilice estas clases para obtener artículos de diferentes tamaños. 
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Paginación predeterminada

El siguiente ejemplo demuestra el uso de class .pagination discutido en la tabla anterior -

<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>

Estados

El siguiente ejemplo demuestra el uso de class .disabled, .active discutido en la tabla anterior -

<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>

Dimensionamiento

El siguiente ejemplo demuestra el uso de clases para dimensionar, .pagination-* discutido en la tabla anterior -

<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>

Buscapersonas

Si necesita crear enlaces de paginación simples que vayan más allá del texto, el localizador puede funcionar bastante bien. Al igual que los enlaces de paginación, el buscapersonas es una lista desordenada. Por defecto, los enlaces están centrados. La siguiente tabla enumera las clases que Bootstrap proporciona para pager.

Clase Descripción Código de muestra
.buscapersonas Agregue esta clase para obtener los enlaces del buscapersonas. 
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Anterior Siguiente Clase de uso .previous para alinear a la izquierda y .next para alinear los enlaces a la derecha. 
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.discapacitado Agregue esta clase para obtener un aspecto silenciado. 
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Buscapersonas predeterminado

El siguiente ejemplo demuestra el uso de class .pager discutido en la tabla anterior -

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

Enlaces alineados

El siguiente ejemplo demuestra el uso de clases para alineación, .previous, .next discutido en la tabla anterior -

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

Estados

El siguiente ejemplo demuestra el uso de class .disabled discutido en la tabla anterior -

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