Bootstrap - Paginação

Este capítulo discute sobre o recurso de paginação que o Bootstrap suporta. A paginação, uma lista não ordenada, é tratada pelo Bootstrap como muitos outros elementos da interface.

Paginação

A tabela a seguir lista as classes que o Bootstrap fornece para lidar com a paginação.

Classe Descrição Código de amostra
.paginação Adicione esta classe para obter a paginação em sua página. 
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.desabilitado, .ativo Você pode personalizar links usando .disabled para links não clicáveis ​​e .active para indicar a página atual. 
<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 Use essas classes para obter itens de tamanhos diferentes. 
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Paginação Padrão

O exemplo a seguir demonstra o uso de classe .pagination discutido na tabela acima -

<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

O exemplo a seguir demonstra o uso de classe .disabled, .active discutido na tabela acima -

<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

O exemplo a seguir demonstra o uso de classes para dimensionamento, .pagination-* discutido na tabela acima -

<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 você precisar criar links de paginação simples que vão além do texto, o pager pode funcionar muito bem. Como os links de paginação, o pager é uma lista não ordenada. Por padrão, os links são centralizados. A tabela a seguir lista as classes que o Bootstrap fornece para pager.

Classe Descrição Código de amostra
.pager Adicione esta classe para obter os links do pager. 
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Anterior Próximo Usar aula .previous para alinhar à esquerda e .next para alinhar os links à direita. 
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.Desativado Adicione esta classe para obter uma aparência silenciosa. 
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Pager padrão

O exemplo a seguir demonstra o uso de classe .pager discutido na tabela acima -

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

Links Alinhados

O exemplo a seguir demonstra o uso de classes para alinhamento, .previous, .next discutido na tabela acima -

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

Estados

O exemplo a seguir demonstra o uso de classe .disabled discutido na tabela acima -

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