El mejor tutorial de pestaña Fundación en 2024. En este tutorial podrás aprender
La página actual,Desactivar pestaña,dirección de paginación,paginación centrada,pan rallado,navegación sub,
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 «
y »
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 »