W3.CSS paginações
Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação para cada página:
Paginação Básico
Para criar uma paginação básico, adicionar a classe w3-pagination a um elemento <ul>:
Exemplo
<ul class="w3-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 " setas de paginação
Use entidades HTML ou ícones de uma biblioteca de ícone para adicionar setas de paginação:
Exemplo
<ul class="w3-pagination">
<li><a href="#">«</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="#">»</a></li>
</ul> Tente você mesmo " Ativo / Fazer a ligação atual
Use uma das classes de cor w3- para indicar qual a página que o usuário está em:
Exemplo
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" 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="#">»</a></li>
</ul> Tente você mesmo " Hover Cor
Por padrão, quando você mover o mouse sobre os links de paginação, que recebem uma cor de fundo cinza. Use qualquer uma das classes de cor w3-hover- para mudar a cor de foco:
Exemplo
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> Tente você mesmo " paginação Dimensionamento
Use w3-tiny, w3-xlarge w3-pequeno, w3-grande, w3-XXLarge ou w3-XXXLarge ao tamanho da paginação:
Bordered Paginação
Adicione a classe w3-border para criar uma paginação com bordas:
arredondada Fronteiras
Adicione a classe w3-redonda ao lado de w3-fronteira para as fronteiras arredondados:
Paginação centrado
Para centralizar a paginação, enrole um elemento <div> com class = "w3-center" em torno <ul>:
Exemplo
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Tente você mesmo " Outros exemplos de paginação
Exemplo seguinte / anterior
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Tente você mesmo " Exemplo de menu
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> Tente você mesmo "