Latest web development tutorials

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

<Ul class = "paginación">
<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

<Ul class = "paginación">
<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

<Ul class = "paginación">
<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 &laquo; y &raquo; para crear un símbolo de dirección de paginación:

Ejemplos

<Ul class = "paginación">
<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>
Trate »

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

<Div class = "centrada en la paginación ">
<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

<class = "migas de pan" ul>
<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

<Ul class = "sub-nav ">
<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 »