W3.CSS paginaciones
Si usted tiene un sitio web con un montón de páginas, es posible que desee agregar algún tipo de paginación para cada página:
básica paginación
Para crear una paginación básica, agregue la clase W3-paginación para un elemento <ul>:
Ejemplo
<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> Inténtalo tú mismo " Las flechas de paginación
Use las entidades HTML o iconos de una biblioteca de iconos para añadir flechas de paginación:
Ejemplo
<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> Inténtalo tú mismo " Activo / Enlace actual
Utilice una de las clases de color w3- para indicar qué página el usuario se encuentra en:
Ejemplo
<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> Inténtalo tú mismo " Color de libración
De forma predeterminada, cuando se mueve el ratón sobre los enlaces de paginación, consiguen un color de fondo gris. Utilice cualquiera de las clases de color W3-hover- para cambiar el color de la libración:
Ejemplo
<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> Inténtalo tú mismo " Dimensionamiento de paginación
Utilice w3-minúscula,, w3-XLarge-W3 pequeña, w3-grande, w3-Xxlarge o W3-XXXLarge al tamaño de la paginación:
Limita con la paginación
Agregue la clase W3-frontera para crear una paginación con las fronteras:
Bordes redondeados
Agregue la clase W3 ronda junto a W3-frontera para los bordes redondeados:
La paginación centrada
Para centrar la paginación, envolver un elemento <div> con class = "w3-centro" en torno a <ul>:
Ejemplo
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Inténtalo tú mismo " Otros ejemplos de paginación
Ejemplo anterior / siguiente
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Inténtalo tú mismo " Ejemplo de menú
<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> Inténtalo tú mismo "