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.

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 = "#">«</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 = "#">«</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>`

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

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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`
.Desativado	Adicione esta classe para obter uma aparência silenciosa.	`<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`

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