Paginador Normal
incluye dos componentes para paginar los contenidos de tu sitio o aplicación web. El primero es un completo paginador que muestra enlaces para todas las páginas de resultados y el segundo es un paginador simple con los enlaces Anterior y Siguiente.
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul>
Ejemplo
El paginador normal está basado en el sitio Rdio y queda bien tanto para las aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar. Ejemplo:
Paginador con materials design
El paginador materials design está basado en el sitio Rdio y queda bien tanto para las aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar. cuenta con sinco tipos de temas tanto com el fondo y como las fonts Ejemplo:
<ul class="pagination-2 tema-dark "> <li><a class="font-dark "> href="#">«</a class="font-dark ">></li> <li><a class="font-dark "> href="#">1</a></li> <li><a class="font-dark "> href="#">2</a></li> <li><a class="font-dark "> href="#">3</a></li> <li><a class="font-dark "> href="#">4</a></li> <li><a class="font-dark "> href="#">5</a></li> <li><a class="font-dark "> href="#">»</a></li> </ul>
Ejemplo
El paginador normal está basado en el sitio Rdio y queda bien tanto para las aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar.
Temas
Cities & Maiki le muestra ejemplos sensillos de temas personalizados para su elaboración para sus sitios web con una personalización adatables para Desarrollo webs con diseño de materiales adaptables para dispositivos moviles, webs corporativas, marketing. Empesamos con ( tema-dark ) tema dark para personalizar el fondo oscuro acompañado con ( font-dark ) que prsonaliza las fonts de color gris, ( tema-grey ) tema grey para personalizar el fondo gris acompañado con ( font-grey ) que prsonaliza las fonts de color oscuro, ( tema-orange ) tema grey para personalizar el fondo naranja acompañado con ( font-orange ) que prsonaliza las fonts de color blanco, ( tema-peter ) tema peter para personalizar el fondo gris oscuro acompañado con ( font-peter ) que prsonaliza las fonts de color blanco, ( tema-asbestos ) tema asbestos para personalizar el fondo gris claro acompañado con ( font-asbestos ) que prsonaliza las fonts de color blanco.
Paginador perzonalizado
Cities & Maiki le muestra ejemplos sensillos Como definición rápida, es un paginador perzonalizado border-radius:50px; esto permite redondear los bordes de las cajas. Se usa principalmente en el diseño de las cajas que muestran el contenido de una web y para hacer algunas figuras sencilla, como los círculos que tome un estilo La propiedad border-radius de CSS3 nos permite hacerlos.
Paginador simple
El paginador simple de Bootstrap 3 es ideal para sitios web sencillos como blogs o revistas. Este paginador solamente muestra dos enlaces para ir a la página Anterior o Siguiente de los resultados. Ejemplo:
<ul class="pager">
<li><a href="#">Anterior</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
Alineando los enlaces del paginador simple
Si lo prefieres, también puedes alinear los enlaces a la izquierda y a la derecha con las clases CSS especiales .previous y .next. Ejemplo:
<ul class="pager">
<li class="previous"><a href="#">← Anterior</a></li>
<li class="next"><a href="#">Siguiente →</a></li>
</ul>
