Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
La paginación se utiliza para separar el contenido en páginas discretas o simplemente es el proceso de dividir el documento en páginas y proporcionarles números.
Clase básica de paginación CSS de Foundation:
- paginación: esta clase se utiliza para crear un estilo de tipo paginación.
- actual: Esto se usa en un <li> para marcar la página actual.
- puntos suspensivos: esta clase crea un «…» por el cual el usuario siente que hay muchas páginas en medio.
Sintaxis:
<nav aria-label="Pagination">
<ul class="pagination">
<li><a href="#" aria-label="Page 1">1</a></li>
<li><a href="#" aria-label="Page 2">2</a></li>
...
</ul>
</nav>
Ejemplo 1: Este es un ejemplo básico que ilustra los conceptos básicos de paginación en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Pagination Basics </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Pagination Basics </strong> </center> <nav aria-label="Pagination"> <ul class="pagination"> <li class="pagination-previous disabled">Previous</li> <li class="current"> <span class="show-for-sr">You're on page</span> 1 </li> <li> <a href="#" aria-label="Page 2">2</a> </li> <li> <a href="#" aria-label="Page 3">3</a> </li> <li> <a href="#" aria-label="Page 4">4</a> </li> <li class="ellipsis"></li> <li> <a href="#" aria-label="Page 12">12</a> </li> <li> <a href="#" aria-label="Page 13">13</a> </li> <li class="pagination-next"> <a href="#" aria-label="Next page">Next</a> </li> </ul> </nav> </body> </html>
Producción:
Ejemplo 2 : este ejemplo describe los conceptos básicos de paginación con números romanos en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Pagination Basics </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Pagination Basics </strong> </center> <nav aria-label="Pagination"> <ul class="pagination s"> <li class="pagination-previous disabled">Previous</li> <li class="current"> <span class="show-for-sr">You're on page</span> I </li> <li><a href="#" aria-label="Page 2">II</a></li> <li><a href="#" aria-label="Page 3">III</a></li> <li><a href="#" aria-label="Page 4">IV</a></li> <li class="ellipsis"></li> <li><a href="#" aria-label="Page 12">XII</a></li> <li><a href="#" aria-label="Page 13">XIII</a></li> <li class="pagination-next"> <a href="#" aria-label="Next page">Next</a> </li> </ul> </nav> </body> </html>
Salida :
Referencia: https://get.foundation/sites/docs/pagination.html#basics
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA