En este artículo, aprenderemos cómo alinear la paginación en el sitio web utilizando las clases de Bootstrap. La Paginación es un componente muy útil presente en Bootstrap. La paginación se utiliza para permitir la navegación entre las páginas de un sitio web, ya que divide el documento en diferentes páginas y les proporciona números. Esto creará un gran bloque de enlaces conectados que ayudarán a navegar fácilmente a diferentes páginas. Por lo tanto, ayuda a mejorar la experiencia del usuario.
Pasos para crear paginación Bootstrap:
Paso 1: Importe los enlaces de arranque de CDN para CSS y JavaScript desde el sitio web oficial de Bootstrap.
<!– Bootstrap CSS –>
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css” integridad=”sha384- zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn” crossorigin=”anónimo”/><!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js” integridad=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE +IbbVYUew+OrCXaRkfj” crossorigin=”anónimo”></script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js” integridad=”sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF” crossorigin=”anónimo ”></guion>
Paso 2: Ahora cree una etiqueta <ul> con el nombre de clase «paginación» dentro de la etiqueta <body>.
<ul class="pagination"> </ul>
Paso 3: agregue todos los números de página dentro de la etiqueta <ul> usando las etiquetas <li> con el nombre de clase «elemento de página».
<ul> <li class="page-item"></li> <li class="page-item"></li> <li class="page-item"></li> </ul>
Paso 4: dentro de cada etiqueta <li> , agregue el número de página. usando la etiqueta <a> y dando el atributo “href” a cada página.
<ul class="pagination">
<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>
</ul>
En esta etapa, hemos creado una estructura de paginación básica usando Bootstrap.
Comprenderemos el concepto de paginación y las diversas clases de Bootstrap disponibles a través del ejemplo.
Ejemplo: Este ejemplo ilustra la Paginación Bootstrap utilizando las clases de justificar contenido uniformemente y elemento de página.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination justify-content-evenly"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Salida: Desde la salida, podemos ver que la paginación que hemos creado está en el extremo izquierdo de la página.
Paginación usando Bootstrap
Alineación de paginación usando Bootstrap Classes:
La paginación se puede alinear en la página web utilizando las clases de utilidades de flexbox en Bootstrap.
fila flexible: esta clase se agrega dentro del componente que ayuda a alinear la paginación en filas. Este es el valor predeterminado.
Sintaxis:
<ul class="pagination flex-row">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase de fila flexible.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-row"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
flex-row-reverse: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación en formato de fila, pero en la dirección inversa y en el extremo derecho de la página.
Sintaxis:
<ul class="pagination flex-row-reverse">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase flex-row-reverse.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-row-reverse"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
columna flexible: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación en la columna.
Sintaxis:
<ul class="pagination flex-column">
<li class="page-item"></li>
</ul>
Ejemplo: Este ejemplo ilustra la Paginación Bootstrap usando la clase de columna flexible.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-column"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
flex-column-reverse: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación en la columna pero en la dirección inversa.
Sintaxis:
<ul class="pagination flex-column-reverse">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase flex-column-reverse.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-column-reverse"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
justificar-contenido-centro: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación en el centro en formato de fila.
Sintaxis:
<ul class="pagination justify-content-center">
<li class="page-item"></li>
</ul>
Ejemplo: Este ejemplo ilustra la Paginación Bootstrap utilizando la clase justificar-contenido-centro.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Salida :
justify-content-start: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación en el inicio en formato de fila.
Sintaxis:
<ul class="pagination Justify-content-start ">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase de inicio de contenido de justificación.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination justify-content-start"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
«justify-content-end»: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación al final de la página en formato de fila.
Sintaxis:
<ul class="pagination justify-content-end">
<li class="page-item"></li>
</ul>
Ejemplo: Este ejemplo ilustra la Paginación Bootstrap utilizando la clase allow-content-end.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination justify-content-end"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
align-items-start: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación al comienzo de la página en formato de columna.
Sintaxis:
<ul class="pagination align-items-start">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase align-items-start.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination align-items-start"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
align-items-end: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación al final de la página en formato de columna.
Sintaxis:
<ul class="pagination align-items-end">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase align-items-end.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-column align-items-end"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Salida :
align-items-center: esta clase, cuando se agrega dentro del componente, ayuda a alinear la paginación con el centro de la página en formato de columna.
Sintaxis:
<ul class="pagination align-items-center">
<li class="page-item"></li>
</ul>
Ejemplo: este ejemplo ilustra la paginación Bootstrap utilizando la clase align-items-center.
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity= "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Pagination</title> </head> <body> <h1>Home Page</h1> <ul class="pagination flex-column align-items-center"> <li class="page-item"> <a class="page-link" href="#">Home</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> </ul> </body> </html>
Producción:
Nota:
- La mayor parte de la paginación se realiza en formato de filas. En casos muy raros, la paginación se da en formato de columna.
- Las clases de justificación solo funcionarán cuando la paginación se realice en formato de fila.
- Los elementos de alineación solo funcionarán cuando la paginación se realice en formato de columna. Entonces, tenemos que agregar la clase flex-column/flex-column-reverse con él.
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA