En este artículo, conoceremos las diversas clases utilizadas para la Paginación en Bootstrap 4, además de comprender sus implementaciones a través de los ejemplos.
La paginación nos permite navegar por diferentes páginas de un sitio web. Bootstrap nos proporciona diferentes clases para habilitar la paginación en una página web. Podemos usar la clase .pagination dentro de una etiqueta de lista para agregar paginación a nuestra página web.
Sintaxis:
<ul class="pagination">
<li class="page-item"> Content </li>
</ul>
La paginación se puede realizar de las siguientes formas:
- Paginación básica
- Paginación de tamaño
- Paginación deshabilitada
- Paginación activa
- Alineación en paginación
Exploraremos todas las formas de crear la paginación en Bootstrap 4 y las entenderemos en una secuencia.
Paginación básica: Es la forma básica de usar la paginación, la sintaxis es la siguiente:
Sintaxis:
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Clases básicas de paginación:
- .pagination: esta clase se puede usar dentro de la etiqueta <ul> para especificar la paginación en una página web.
- .page-item: esta clase se puede usar dentro de la etiqueta <li> para especificar el elemento de página en una página web.
- .page-link: esta clase se puede usar dentro de la etiqueta <a> para especificar el enlace de la página en una página web.
Ejemplo: este ejemplo describe el uso de la paginación básica en Bootstrap 4.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title> Pagination classes in Bootstrap 4 </title> </head> <body> <h2>GeeksforGeeks</h2> <h3>Example of Basic pagination</h3> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">4</a> </li> <li class="page-item"> <a href="#" class="page-link">5</a> </li> <li class="page-item"> <a href="#" class="page-link">6</a> </li> <li class="page-item"> <a href="#" class="page-link">7</a> </li> <li class="page-item"> <a href="#" class="page-link">8</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> </body> </html>
Producción:
Paginación básica
Paginación de tamaño: la paginación de tamaño se utiliza para proporcionar paginación de diferentes tamaños a la página web. Hay principalmente tres tipos de tamaños que podemos proporcionar a la paginación que se detallan a continuación:
Sintaxis:
<ul class="pagination-sm">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Clases de tamaño de paginación:
- .pagination: proporciona la paginación de tamaño predeterminado a la página web.
- .pagination-sm: Proporciona la paginación de tamaño pequeño a la página web.
- .pagination-lg: proporciona la paginación de gran tamaño a la página web.
Ejemplo: este ejemplo describe el uso de Pagination con diferentes tamaños en Bootstrap 4.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title> Pagination classes in Bootstrap 4 </title> </head> <body> <h2>GeeksforGeeks</h2> <h3>Example of Sized pagination</h3> <h4>Normal sized pagination</h4> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> <h4>Small sized pagination</h4> <ul class="pagination pagination-sm"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> <h4>Large sized pagination</h4> <ul class="pagination pagination-lg"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> </body> </html>
Producción:
Paginación de tamaño
Paginación deshabilitada: la clase .disabled se usa para deshabilitar la funcionalidad que debe realizar cualquier elemento al hacer clic en él. Se utiliza principalmente para deshabilitar la funcionalidad de los botones «Anterior» y «Siguiente» en la página. La clase deshabilitada usa la propiedad CSS «pointer-events: none» para deshabilitar la funcionalidad en la que se puede hacer clic.
Sintaxis:
<ul class="pagination disabled">
<li class="page-item active">
<a href="#" class="page-link"></a>
</li>
</ul>
Ejemplo: Este ejemplo describe el uso del estado Paginación deshabilitada en Bootstrap 4.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title> Pagination classes in Bootstrap 4 </title> </head> <body> <h2>Welcome to GFG!</h2> <h3>Example of Disable pagination</h3> <ul class="pagination"> <li class="page-item disabled"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item active"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> </body> </html>
Producción:
Paginación deshabilitada
Paginación activa: la clase .active se puede agregar a la etiqueta <li> para resaltar o especificar la página actual que está visible en la página web.
Sintaxis:
<ul class="pagination">
<li class="page-item active">
<a href="#" class="page-link"></a>
</li>
</ul>
Ejemplo: este ejemplo describe el uso del estado Pagination Active en Bootstrap 4.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title> Pagination classes in Bootstrap 4 </title> </head> <body> <h2>GeeksforGeeks</h2> <h3>Example of Active pagination</h3> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item active"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> </body> </html>
Producción:
Paginación activa
Alineación en la paginación: Esta clase se utiliza para especificar y justificar el contenido al centro ya la derecha de la página. Utiliza la siguiente sintaxis y clases para este propósito:
Sintaxis:
<ul class="pagination justify-content-center">
<li class="page-item">
<a href="#" class="page-link"></a>
</li>
</ul>
Clases de alineación de paginación:
- .justify-content-center: Se utiliza para alinear el contenido al centro del ancho de la pantalla.
- .justify-content-end: se utiliza para alinear el contenido a la derecha del ancho de visualización.
Ejemplo: este ejemplo describe el uso de las clases de alineación de paginación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title> Pagination classes in Bootstrap 4 </title> </head> <body> <h2>GeeksforGeeks</h2> <h3>Example of Pagination Alignment</h3> <br> <ul class="pagination"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item active"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> <ul class="pagination justify-content-center"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item active"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> <ul class="pagination justify-content-end"> <li class="page-item"> <a href="#" class="page-link">Previous</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item active"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">Next</a> </li> </ul> </body> </html>
Producción:
página alineada
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA