Fundación - Paginación

Descripción

La paginación es un tipo de navegación que divide el contenido en una serie de páginas relacionadas.

Ejemplo

El siguiente ejemplo demuestra el uso de la paginación en Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Pagination</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Pagination Example</h2>

      <ul class = "pagination">
         <li class = "disabled">Previous</li>
         <li class = "current">1</li>
         <li><a href = "#">2</a></li>
         <li><a href = "#">3</a></li>
         <li><a href = "#">4</a></li>
         <li class = "ellipsis"></li>
         <li><a href = "#">12</a></li>
         <li><a href = "#">13</a></li>
         <li><a href = "#">Next</a></li>
      </ul>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente pagination.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page