COMO USAR PAGINAÇÃO BOOTSTRAP

Conteúdo

paginação bootstrap

Como fazer paginação com Bootstrap?

Para fazer isso é usado a classe pagination do bootstrap.

Neste artigo será mostrado como fazer a parte do front end da paginação com Bootstrap. No final terá link para outras maneiras de fazer o front e o beck end do sistema de páginas.

A lista de páginas usadas será:

   primeira
    <
    3
    4
    5
    >
    última

Sendo página atual a 4, o sinal de maior usado para a página seguinte, o sinal de menor usado para a página anterior, "última" como a página final que será a 8 e "primeira" para a inícial.

No exemplo abaixo é mostrada a paginação simples, com a página atual em destaque e sem possibilidade de ser clicada.

<nav aria-label="bloco de páginas">
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#1">primeira</a></li>
    <li class="page-item"><a class="page-link" href="#3"><</a></li>
    <li class="page-item"><a class="page-link" href="#3">3</a></li>
    <li class="page-item active disabled"><a class="page-link" href="#4">4</a></li>
    <li class="page-item"><a class="page-link" href="#5">5</a></li>
    <li class="page-item"><a class="page-link" href="#6">></a></li>
    <li class="page-item"><a class="page-link" href="#8">última</a></li>
</ul>
</nav>

O aria-label é necessário para usar mais um bloco de paginação na página.

O active é usado para mudar o estilo da página atual.

Se a página atual fosse a 8 poderia ser usado a classe disabled para inativar o clique no link última e próximo. O mesmo poderia ser feito quanto estivesse na primeira. Ficando assim:

<li class="page-item disabled"><a class="page-link" href="#8">></a></li>
<li class="page-item disabled"><a class="page-link" href="#8">última</a></li>

Para definir o tamanho dos botões pode se usar a classe de pagination seguida do tamanho que pode ser lg para grande e sm para pequeno. Ficando assim: