Paginação Bootstrap

Paginação Básica

Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação a cada página.

Uma paginação básica no Bootstrap se parece com isso:

• 1
• 2
• 3
• 4
• 5

Para criar uma paginação básica, adicione a .paginationclasse a um <ul>elemento:

Estado ativo

O estado ativo mostra qual é a página atual:

• 1
• 2
• 3
• 4
• 5

Adicione uma classe .activepara que o usuário saiba em qual página ele está:

Estado Desativado

Um link desativado não pode ser clicado:

• 1
• 2
• 3
• 4
• 5

Adicionar turma .disabledse um link por algum motivo estiver desabilitado:

Dimensionamento de paginação

Os blocos de paginação também podem ser dimensionados para um tamanho maior ou menor:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Adicione classe .pagination-lgpara blocos maiores ou .pagination-smpara blocos menores:

Migalhas de pão

Outra forma de paginação é breadcrumbs:

1. Casa
2. Privado
3. Fotos
4. Férias

A .breadcrumbclasse indica a localização da página atual em uma hierarquia de navegação:

<ul class="">
  <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>
</ul>

Referência Completa de Navegação Bootstrap

Para uma referência completa de todas as classes de navegação, acesse nossa Referência de Navegação Bootstrap completa .