Paginação Básico
Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação para cada página.
A paginação básica em Bootstrap parece com isso:
Para criar uma paginação básica, adicione o .pagination classe para um <ul> elemento:
Exemplo
<ul class="pagination">
<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> Tente você mesmo " Estado ativo
O estado ativo mostra o que é a página atual:
Adicionar classe .active para que o usuário saiba qual página ele / ela está em:
Exemplo
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Tente você mesmo " Disabled State
Um link com deficiência não pode ser clicado:
Adicionar classe .disabled se um link por algum motivo está desativado:
Exemplo
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Tente você mesmo " Pagination Sizing
blocos de paginação também pode ser dimensionado para um tamanho maior ou menor tamanho:
Adicionar classe .pagination-lg para blocos maiores ou .pagination-sm para blocos menores:
Exemplo
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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> Tente você mesmo " Migalhas de pão
Outra forma de paginação, é farinha de rosca:
O .breadcrumb classe indica a localização da página atual dentro de uma hierarquia de navegação:
Exemplo
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Conclua Bootstrap Navigation Referência
Para uma referência completa de todas as classes de navegação, vá ao nosso completa Bootstrap Navigation Referência .