COMO CRIAR LEIAUTE DE PAGINAÇÃO

Conteúdo

paginação bootstrap
css para paginação

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:

Para alinhar o bloco de botões pode ser usado a classe de alinhamento junto a classe pagination.
Algo como:

Veja mais em:
Como fazer paginação com php e mysql?
Como fazer leiaute de paginação com CSS?
O que é paginação de um site?
O que é Bootstrap?

Como aplicar estilo css nos botões de paginação?

Leia mais sobre: CSS para paginação

Basta usar um css simples como esse aqui:

<ul class="pagination">

                    <li>

                        <a href="https://diretoaoponto-tech.com.br/?p=1" target="_self">«</a>

                    </li>

                    <li>

                        <a class="active">1</a>

                    </li>

                    <li>

                        <a href="https://diretoaoponto-tech.com.br/?p=2">2</a>

                    </li>

                    <li>

                        <a href="https://diretoaoponto-tech.com.br/?p=2" target="_self">»</a>

                   </li>

            </ul>

Ficando assim:

Agora é feito o CSS para colocar o estilo.

/** Abre a configuração de estilo CSS **/
<style rel="stylesheet" scoped="scoped" type="text/css">

ul.pagination { /** Inicia a configiração da lista pagination**/
       display: inline-block; /** Inicia uma nova linha e espande para esquerda **/
       padding: 0; /** Retira o espaço interno da lista **/
}

ul.pagination li { /** Inicia a configuração da linha da lista **/
     display: inline; /** Deixa uma linha do lado da outra **/
}

ul.pagination li a{ /** Coloca o estilo no botão que tem link a **/
       color: black; /** Fonte preta **/
       float: left; /** Alinha a esquerda **/
   padding: 8px 16px; /** Adiciona espaço na linha **/
       text-decoration: none; /** Tira decoração do texto **/
   }

ul.pagination li a.active { /** Coloca o estilo no link com a classe active **/
       background-color: blue; /** Define uma cor de fundo para o botão da página atual **/
       color: white; /** A cor da fonte também **/
   }

ul.pagination li a:hover:not(.active) {/** Insere o estilo para quando o mouse passar por cima do link exeto no botão da página atual **/
       background-color: #ddd; /** Insere um tom de cinza **/
}

</style>
/** Fecha a configuração de estilo **/

Ficando assim:

Nesse código tem um pequeno exemplo de todos os efeitos comuns em botões de página.