Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Una paginación es un tipo de navegación que se utiliza para recorrer el contenido que se divide en una serie de páginas similares. Permite a los usuarios hacer clic en las páginas de resultados de búsqueda y saltar directamente a una página en particular haciendo clic en el número de página. En este artículo, discutiremos la paginación en Foundation CSS.
Tipos de paginación de Foundation CSS:
- Básicos: Este es el tipo básico de paginación.
- Centrada: Este es el tipo de paginación que está centrada.
Clases básicas de paginación CSS:
- paginación: se utiliza para crear el panel de paginación con elementos de lista.
- pagination-previous: Se utiliza para crear el enlace de la página anterior para ir a la página anterior.
- pagination-next: se utiliza para crear el enlace de la página siguiente para ir a la página siguiente.
Sintaxis:
<ul class="pagination">
<li>
<a href="#" aria-label="page1">
1
</a>
</li>
...
</ul>
Ejemplo 1: El siguiente código demuestra el componente Paginación.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Pagination</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Foundation CSS Pagination </h3> <ul class="pagination"> <li class="pagination-previous disabled"> Previous </li> <li class="current"> <span class="show-for-sr"> Current Page is: </span> 1 </li> <li> <a href="#" aria-label="Page-2"> 2 </a> </li> <li> <a href="#" aria-label="Page-3"> 3 </a> </li> <li class="ellipsis" aria-hidden="true"></li> <li> <a href="#" aria-label="Page-7"> 7 </a> </li> <li> <a href="#" aria-label="Page-8"> 8 </a> </li> <li class="pagination-next"> <a href="#" aria-label="Next"> Next </a> </li> </ul> </center> </body> </html>
Producción:
Paginación CSS básica
Ejemplo 2: El siguiente código muestra la Paginación que está alineada a la izquierda, al centro y a la derecha . Esto se puede hacer usando las clases opcionales text-left, text-center y text-right que se usan principalmente para alinear texto.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Pagination</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Foundation CSS Pagination </h3> <strong> Left aligned: </strong> <ul class="pagination text-left"> <li class="pagination-previous disabled"> Previous </li> <li class="current"> <span class="show-for-sr"> Current Page is: </span> 1 </li> <li> <a href="#" aria-label="Page-2"> 2 </a> </li> <li class="ellipsis" aria-hidden="true"> </li> <li> <a href="#" aria-label="Page-7"> 7 </a> </li> <li> <a href="#" aria-label="Page-8"> 8 </a> </li> <li class="pagination-next"> <a href="#" aria-label="Next"> Next </a> </li> </ul><br> <strong> Center aligned: </strong> <ul class="pagination text-center"> <li class="pagination-previous disabled"> Previous </li> <li class="current"> <span class="show-for-sr"> Current Page is: </span> 1 </li> <li> <a href="#" aria-label="Page-2"> 2 </a> </li> <li class="ellipsis" aria-hidden="true"></li> <li> <a href="#" aria-label="Page-7"> 7 </a> </li> <li> <a href="#" aria-label="Page-8"> 8 </a> </li> <li class="pagination-next"> <a href="#" aria-label="Next"> Next </a> </li> </ul><br> <strong> Right aligned: </strong> <ul class="pagination text-right"> <li class="pagination-previous disabled"> Previous </li> <li class="current"> <span class="show-for-sr"> Current Page is: </span> 1 </li> <li> <a href="#" aria-label="Page-2"> 2 </a> </li> <li class="ellipsis" aria-hidden="true"></li> <li> <a href="#" aria-label="Page-7"> 7 </a> </li> <li> <a href="#" aria-label="Page-8"> 8 </a> </li> <li class="pagination-next"> <a href="#" aria-label="Next"> Next </a> </li> </ul> </center> </body> </html>
Producción:
Paginación CSS básica
Referencia: https://get.foundation/sites/docs/pagination.html
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA