En muchos sitios web, notamos que cuando buscamos algo, se muestra todo el contenido relacionado, pero si la cantidad de contenido es grande, el sitio web será más largo.
Para solucionar esto, hay paginación en la página web, es decir, los contenidos se dividen en muchas páginas y al hacer clic, el usuario puede navegar a través de los contenidos relacionados.
Nota: La paginación se usa para administrar una serie de contenido relacionado que existe en varias páginas.
Enfoque: la clase de paginación se utiliza para mostrar la paginación en el sitio web. Utilice un elemento envolvente <nav> para identificarlo como una sección de navegación para los lectores de pantalla. Utilice la lista desordenada para crear la lista de páginas con enlaces.
A continuación se muestra el procedimiento para implementar la paginación simple con personalización en Bootstrap.
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Paso 2:
- Agregue la clase de paginación con la etiqueta <ul> para la lista desordenada. Agregue los elementos de la lista con elementos de página de nombre de clase.
- Además, como es probable que las páginas tengan más de una sección de navegación de este tipo, proporcione una etiqueta aria descriptiva para que <nav> refleje su propósito.
- Para personalizar los enlaces para cada página, simplemente elimine «#» y agregue el enlace deseado.
- Para alinearlo al centro, use la clase justify-content-center en <ul> .
HTML
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>
- Agregue paginación a cada una de las páginas para asegurarse de que el enlace a la página anterior sea uno menos que la página actual y que el usuario pueda moverse fácilmente por las páginas.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align: center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 3</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page2.html">Previous</a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> </ul> </nav> </body> </html>
Página1.html: si el usuario está en la página 1, la «página siguiente» contiene un enlace a la página 2. Los siguientes son los códigos para los contenidos «Página1.html», «Página2.html» y «Página3.html».
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align: center;"> <h2>GeeksForGeeks</h2><br><br> <h3>Contents of Page 1</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">Next</a> </li> </ul> </nav> </body> </html>
Page2.html: si el usuario está en la página 2, la página «Anterior» contiene un enlace a la página 1 y la «página siguiente» contiene un enlace a la página 3.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 2</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page1.html"> Previous </a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html"> Next </a> </li> </ul> </nav> </body> </html>
Page3.html: si el usuario está en la página 3, la página «Anterior» contiene un enlace a la página 2.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 3</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page2.html"> Previous </a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> </ul> </nav> </body> </html>
Producción:
