BOOTSTRAP COMPONENTES - PAGINACION

En esta sesión ilustramos de manera sencilla los componentes de paginación incorporados por Bootstrap para mostrar resultados o contenido en un listado de varias páginas.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Bootstrap ofrece componentes sencillos para el diseño de la paginación (cuando queremos mostrar resultados o contenido relacionado en varias páginas). Podemos utilizar:

Paginación con lista de números de página
Enlaces Anterior-Siguiente

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Paginación sencilla con Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* clase local para visualizar mejor bloques de ejemplo */
.bs-example {
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<h1>Paginación sencilla con Bootstrap</h1>
<!-- Para estilos de números de página, usamos la clase "pagination" en la lista -->
<div class="bs-example">
<h2>Números de página</h2>
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Anterior"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(página actual)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Siguiente"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Ajustar tamaño</h2>
<h4>Grande</h4>
<nav>
<ul class="pagination pagination-lg">
<li><a href="#" aria-label="Anterior"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Siguiente"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<h4>Normal</h4>
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Anterior"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Siguiente"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<h4>Pequeña</h4>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#" aria-label="Anterior"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Siguiente"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<!-- Para estilos de enlaces Anterior-Siguiente, usamos la clase "pager" en la lista -->
<div class="bs-example">
<h2>Enlaces Anterior-Siguiente</h2>
<nav>
<ul class="pager">
<li><a href="#">Anterior</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
</nav>
</div>
<div class="bs-example">
<h2>Enlaces alineados</h2>
<nav>
<ul class="pager">
<!-- para alinear los enlaces de anterior/siguiente a la izquierda/derecha, usamos
las clases "previous" y "next" -->
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Anterior</a></li>
<li class="next"><a href="#">Siguiente <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.