pestaña Fundación
Si usted tiene una gran cantidad de páginas de contenido, es necesario utilizar la función de página.
Para crear una función de localización básica requiere <ul>
en el elemento más .pagination
categorías:
Ejemplos
<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>
Trate »
La página actual
Puede <li>
añadido .current
clase para marcar la página actual:
Ejemplos
<Li class = "actual"> <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>
Trate »
Desactivar pestaña
Si necesita configurar una pestaña que no se puede hacer clic necesita .unavailable
categorías:
Ejemplos
<Li> <a href = "#"> 1 </ a> </ li>
<Li> <a href = "#"> 2 </ a> </ li>
<Li class = "no disponible"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = "#"> 4 </ a> </ li>
<Li> <a href = "#"> 5 </ a> </ li>
</ Ul>
Trate »
dirección de paginación
En el primer y último código> <li> Agregue el elemento .arrow
entidades de inserción clase HTML Símbolo «
y »
para crear un símbolo de dirección de paginación:
Ejemplos
<Li class = "flecha"> <a href = "#"> & laquo; </ 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 = "flecha"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
paginación centrada
Podemos añadir el <ul> exterior <div>
elemento y el <div>
Agregar en .pagination-centered
las clases para implementar paginación centrado en:
Ejemplos
<Ul class = "paginación">
<Li class = "flecha"> <a href = "#"> & laquo; </ a> </ li>
<Li class = "actual"> <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 = "flecha"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
Trate »
pan rallado
estructura de navegación de las migas utiliza para mostrar la página actual.
En el <ul>
en el elemento añadido .breadcrumbs
clase para implementar el pan rallado. Puede añadir <li> en .current
o .unavailable
clase configurar la página actual y el efecto no se puede hacer clic:
Ejemplos
<Li> <a href = "#"> Inicio </ a> </ li>
<Li> <a href = "#"> privada </ a> </ li>
<Li class = "no disponible"> <a href = "#"> Fotos </ a> </ li>
<Li class = "actual"> vacaciones </ li>
</ Ul>
Trate »
navegación sub
Encendido de la página, el sub-navegación es muy útil.
En el <dl>
elemento se añade .sub-nav
clase para crear un sub-navegación. En el <dt>
sobre el elemento a insertar un título para la opción seleccionada <dd>
Añadir .active
categorías:
Ejemplos
<Dt> Filtro: </ dt >
<Clase Dd = "activa"> <a href = "#"> Todo </ a> </ dd>
<DD> <a href = "#"> Activo </ a> </ dd>
<DD> <a href = "#"> Pendiente </ a> </ dd>
<DD> <a href = "#"> suspendido </ a> </ dd>
</ Ul>
Trate »