Foundation Paginación
Si tu página web tiene mucho contenido, necesitas usar la función de paginación.
Para crear una paginación básica, necesitas en el<ul>elemento agregar la.paginationclase:
Ejemplo
<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>
</ul>
Pruébalo »
Página actual
Puedes<li>agregar la.currentclase para marcar la página actual:
Ejemplo
<li class="current"><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>
</ul>
Pruébalo »
Deshabilitar paginación
Si necesitas que un elemento de paginación no se pueda hacer clic, necesitas usar la.unavailableclase:
Ejemplo
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Pruébalo »
Dirección de paginación
En el primero y en el último<li>elemento, agrega la.arrowclase para insertar símbolos de entidades HTML«y»para crear los símbolos de dirección de paginación:
Ejemplo
<li class="arrow"><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 class="arrow"><a href="#">»</a></li>
</ul>
Paginación centrada
Podemos agregar fuera del <ul><div>elemento, y en el<div>agregar la.pagination-centeredclase para centrar la paginación:
Ejemplo
<ul class="pagination">
<li class="arrow"><a href="#">«</a></li>
<li class="current"><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 class="arrow"><a href="#">»</a></li>
</ul>
</div>
Pruébalo »
Navegación de migas de pan
La navegación de migas de pan se utiliza para mostrar la estructura de navegación de la página actual.
En<ul>elemento, agrega la.breadcrumbsclase para implementar la navegación de migas de pan. Puedes agregar en el <li>.currento.unavailableclase para establecer la página actual y el efecto no clicable:
Ejemplo
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li class="unavailable"><a href="#">Pictures</a></li>
<li class="current">Vacation</li>
</ul>
Pruébalo »
Subnavegación
Al cambiar de página, la subnavegación es muy útil.
En<dl>elemento, agrega la.sub-navclase para crear la subnavegación. En el<dt>elemento, agrega un título. Para la opción seleccionada<dd>agrega la.activeclase:
Ejemplo
<dt>Filter:</dt>
<dd class="active"><a href="#">All</a></dd>
<dd><a href="#">Active</a></dd>
<dd><a href="#">Pending</a></dd>
<dd><a href="#">Suspended</a></dd>
</dl>
Pruébalo »