La paginación se utiliza para permitir la navegación entre las páginas de un sitio web. La paginación utilizada en Bootstrap tiene un gran bloque de enlaces conectados que son difíciles de perder y son fácilmente escalables.
Paginación básica: la paginación básica se puede especificar utilizando las siguientes clases.
- La clase .pagination se usa para especificar la paginación en un grupo de listas.
- La clase .page-item se usa para especificar cada elemento de paginación en el grupo.
- La clase .page-link se usa para especificar el enlace en el elemento de paginación.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 | Pagination</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap 4 | Basic Pagination</h1> <!-- Declare the pagination class --> <ul class="pagination"> <!-- Declare the item in the group --> <li class="page-item"> <!-- Declare the link of the item --> <a class="page-link" href="#">Previous</a> </li> <!-- Rest of the pagination items --> <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> </div> </body> </html>
Producción:
Estado deshabilitado: los enlaces de paginación se pueden diseñar para que parezcan imposibles de hacer clic mediante el uso de la clase .disabled . Esto puede usarse para deshabilitar el botón ‘Anterior’ o ‘Siguiente’. La clase .disabled utiliza internamente ‘eventos de puntero: ninguno’ para hacer que no se pueda hacer clic en el enlace, sin embargo, como esta especificación no siempre se implementa, se prefiere hacer que no sea posible navegar configurando la propiedad ‘tabindex’ a 1. Esta propiedad controla si se puede navegar por un elemento usando la tecla de tabulación.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 | Pagination</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap 4 | Pagination Disabled State</h1> <!-- Declare the pagination class --> <ul class="pagination"> <!-- Specify the disabled class to style this item disabled --> <li class="page-item disabled"> <!-- Specify tabindex to make the link non navigatable --> <a class="page-link" href="#" tabindex="-1"> 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> </div> </body> </html>
Producción:
Estado activo: los enlaces de paginación se pueden diseñar para resaltarlos como la página activa actual mediante el uso de la clase .active en el elemento de paginación.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 | Pagination</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap 4 | Pagination Active State</h1> <!-- Declare the pagination class --> <ul class="pagination"> <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> <!-- Specify the active class to style this item active --> <li class="page-item active"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </div> </body> </html>
Producción:
Dimensionamiento del grupo de paginación: el grupo de paginación se puede hacer más grande o más pequeño mediante el uso de clases adicionales. Hay 3 tamaños posibles de grupos de entrada.
- La clase .pagination-sm se usa para un tamaño más pequeño.
- La clase .pagination-lg se usa para un tamaño más grande.
- La clase .pagination tiene el tamaño predeterminado.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 | Pagination</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap 4 | Pagination Sizing</h1> <b>Large Pagination</b> <!-- Specify pagination-lg for large pagination group --> <ul class="pagination pagination-lg"> <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> <b>Small Pagination</b> <!-- Specify pagination-sm for small pagination group --> <ul class="pagination pagination-sm"> <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> <b>Normal Pagination</b> <!-- Normal size pagination --> <ul class="pagination"> <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> </div> </body> </html>
Producción:
Alineación del grupo de paginación: el grupo de paginación podría alinearse a la derecha o al centro usando las clases de utilidad de flexbox.
- La clase .justify-content-center se usa para alinear el grupo al centro.
- La clase .justify-content-end se usa para alinear el grupo a la derecha.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 | Pagination</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap 4 | Pagination Alignment</h1> <b>Align to the center</b> <!-- Specify justify-content-center to align to the center --> <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> <b>Align to the right</b> <!-- Specify justify-content-end to align to the right --> <ul class="pagination justify-content-end"> <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> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA