Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Resuelve muchos problemas que tuvimos una vez, uno de los cuales es el problema de compatibilidad entre navegadores.
La paginación es un elemento que se utiliza para indicar la actualidad de una serie de contenido afiliado a través de múltiples corredores y permite la navegación a través de ellos.
Introducción a la paginación: utilizamos una gran cantidad de uniones asociadas para nuestra paginación, lo que hace que las uniones sean difíciles de perder y adaptables de manera efectiva, todo mientras brindamos grandes áreas de éxito. La paginación se trabaja con una lista de componentes HTML para que la pantalla por usuario pueda informar el número de conexiones accesibles. Utilice un componente envolvente <nav> para distinguirlo como un área de enrutamiento para filtrar por usuario y otros avances de asistencia.
Además, dado que las páginas probablemente tengan más de una de esas áreas de ruta, es prudente dar un nombre de aria claro a <nav>. Por ejemplo, si la parte de paginación se utiliza para explorar entre un montón de elementos de la lista, un nombre propio podría ser aria-label=”Páginas de resultados de búsqueda”.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="navigation example">
<ul class="pagination border-success">
<li><a class="page-link" href="#">Previous</a></li>
<li><a class="page-link" href="#">11</a></li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
<li><a class="page-link" href="#">14</a></li>
<li><a class="page-link" href="#">15</a></li>
<li><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</body>
</html>
Producción:
Trabajar con íconos: con la esperanza de utilizar un símbolo o imagen en lugar de texto para algunas uniones de paginación. Asegúrese de proporcionar una pantalla legítima por soporte de usuario con atribuciones de aria y solo .sr
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#"
aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a class="page-link" href="#">11</a></li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
<li><a class="page-link" href="#">14</a></li>
<li><a class="page-link" href="#">15</a></li>
<li>
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Producción:
Estados inhabilitados y activos:
- Activo: las uniones de paginación son ajustables para varias condiciones. uso _ activo para mostrar la página actual.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="...">
<ul class="pagination">
<li>
<a class="page-link" href="#"
tabindex="-1">Previous</a>
</li>
<li><a class="page-link" href="#">11</a></li>
<li class="active">
<a class="page-link" href="#">12</a>
</li>
<li><a class="page-link" href="#">13</a></li>
<li class="active">
<li><a class="page-link" href="#">14</a></li>
<li class="active">
<li><a class="page-link" href="#">15</a></li>
<li class="active">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
Producción:
- Deshabilitado: si bien la clase .disabled utiliza ocasiones de puntero: ninguno para intentar paralizar la utilidad de la conexión de <a>, esa propiedad CSS aún no está normalizada y no representa la ruta de la consola. En consecuencia, debe agregar constantemente tab index = «- 1» en conexiones inhabilitadas y utilizar JavaScript personalizado para incapacitar por completo su utilidad.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 12rem 0 0 22rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item active">
<span class="page-link">
12
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
Producción:
Tamaño: más grande y más pequeño: en este caso, estableceremos el tamaño de la lista de paginación.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 2rem 0 0 2rem;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<nav aria-label="larger">
<ul class="pagination pagination-lg">
<li class=" disabled">
<a class="page-link"
href="#" tabindex="-1">11</a>
</li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
</ul>
</nav>
<nav aria-label="small">
<ul class="pagination pagination-sm">
<li class="disabled">
<a class="page-link"
href="#" tabindex="-1">11</a>
</li>
<li><a class="page-link" href="#">12</a></li>
<li><a class="page-link" href="#">13</a></li>
</ul>
</nav>
</body>
</html>
Producción:
Alineación: en este caso, cambiaremos la alineación de los componentes de paginación con flexbox.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.pagination {
padding: 2rem 0 0 0;
}
.page-link {
background-color: green;
color: white;
}
</style>
</head>
<body>
<!-- Pagination in Center -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#"
tabindex="-1">Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- Pagination in End -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#"
tabindex="-1">Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item">
<a class="page-link" href="#">13</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA