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.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. Kitchen Sink Pagination es el tipo de navegación para dividir el contenido en una serie de páginas similares.
Clases de paginación de fregadero de cocina utilizadas:
- paginación : Se utiliza para crear una lista de páginas.
Sintaxis:
<ul class="pagination" role="navigation" > ........ </ul>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Kitchen Sink usando una clase de paginación simple .
HTML
<!DOCTYPE html> <html lang="en"> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <script crossorigin="anonymous" src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Foundation CSS Kitchen Sink Pagination </h3> <ul class="pagination"> <li class="current">1</li> <li><a href="#0">2</a></li> <li><a href="#0">3</a></li> <li><a href="#0">4</a></li> <li><a href="#0">5</a></li> <li><a href="#0">6</a></li> </ul> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de Kitchen Sink utilizando la clase de paginación y elipses .
HTML
<!DOCTYPE html> <html lang="en"> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <script crossorigin="anonymous" src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Foundation CSS Kitchen Sink Pagination </h3> <ul class="pagination"> <li><a href="#0">Previous</a></li> <li class="current">1</li> <li><a href="#0">2</a></li> <li><a href="#0">3</a></li> <li><a href="#0">4</a></li> <li><a href="#0">5</a></li> <li class="ellipsis"></li> <li><a href="#0">6</a></li> <li><a href="#0">7</a></li> <li><a href="#">Next</a></li> </ul> </body> </html>
Producción:
Enlace de referencia : https://get.foundation/sites/docs/kitchen-sink.html#pagination
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA