Paginación W3.CSS
Paginación básica
Si tiene un sitio web con muchas páginas, es posible que desee utilizar algún tipo de paginación.
Para crear una paginación básica, use botones ( w3-button ) en una barra ( w3-bar ).
Ejemplo
<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 eliminar el espacio entre los botones, agregue una clase w3-bar-item :
Ejemplo
<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>
Flechas de paginación
Use entidades HTML o íconos de una biblioteca de íconos para agregar flechas de paginación:
Ejemplo
<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>
Enlace activo/actual
Utilice una de las clases de color w3 para indicar en qué página se encuentra el usuario:
Ejemplo
<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>
Color de libración
De forma predeterminada, cuando mueve el mouse sobre los enlaces de paginación, obtienen un color de fondo gris. Use cualquiera de las clases w3-hover- color para cambiar el color de desplazamiento:
Ejemplo
<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>
Tamaño de paginación
Use w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge o w3-xxxlarge para dimensionar la paginación:
Ejemplo
<div class="w3-bar
w3-xlarge">
Paginación centrada
Para centrar la paginación, coloque el elemento "w3-bar" dentro de un elemento "w3-center":
Ejemplo
<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>
Paginación bordeada
Agrega la clase w3-border para crear una paginación con bordes:
Ejemplo
<div class="w3-bar
w3-border">
Bordes redondeados
Agregue la clase w3-round junto a w3-border para bordes redondeados:
Ejemplo
<div class="w3-bar
w3-border w3-round">
Otros ejemplos de paginación
La clase w3-bar también se puede usar para crear botones siguiente/anterior:
Ejemplo siguiente/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>
Ejemplo de menú en línea
<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>