Paginação W3.CSS
Paginação Básica
Se você tem um site com muitas páginas, você pode querer usar algum tipo de paginação.
Para criar uma paginação básica, use botões ( w3-button ) em uma barra ( w3-bar ).
Exemplo
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Para remover o espaço entre os botões, adicione uma classe w3-bar-item :
Exemplo
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Setas de paginação
Use entidades ou ícones HTML de uma biblioteca de ícones para adicionar setas de paginação:
Exemplo
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Link Ativo/Atual
Use uma das classes w3 - color para indicar em qual página o usuário está:
Exemplo
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Cor do cursor
Por padrão, quando você move o mouse sobre os links de paginação, eles ficam com uma cor de fundo cinza. Use qualquer uma das classes w3-hover- color para alterar a cor de foco:
Exemplo
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Dimensionamento de paginação
Use w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge ou w3-xxxlarge para dimensionar a paginação:
Exemplo
<div class="w3-bar
w3-xlarge">
Paginação Centrada
Para centralizar a paginação, coloque o elemento "w3-bar" dentro de um elemento "w3-center":
Exemplo
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Paginação com Borda
Adicione a classe w3-border para criar uma paginação com bordas:
Exemplo
<div class="w3-bar
w3-border">
Bordas arredondadas
Adicione a classe w3-round ao lado de w3-border para bordas arredondadas:
Exemplo
<div class="w3-bar
w3-border w3-round">
Outros exemplos de paginação
A classe w3-bar também pode ser usada para criar botões próximo/anterior:
Exemplo seguinte/anterior
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Exemplo de menu embutido
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>