guia Foundation
Se você tem um monte de páginas de conteúdo, é necessário utilizar a função de paginação.
Para criar uma característica básica de pager <ul> no elemento mais .pagination categorias:
Exemplos
<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>
tente »
A página atual
Você pode <li> acrescentou .current classe para marcar a página atual:
Exemplos
<LI class = "atual"> <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>
tente »
guia Disable
Se você precisa configurar uma guia você não clicável precisa .unavailable categorias:
Exemplos
<Li> <a href = "#"> 1 </ a> </ li>
<Li> <a href = "#"> 2 </ a> </ li>
<LI class = "indisponível"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = "#"> de 4 </ a> </ li>
<Li> <a href = "#"> 5 </ a> </ li>
</ Ul>
tente »
direção paginação
No primeiro e último code> <li> adicionar o elemento .arrow entidades de inserção de classe HTML Símbolo « e » para criar um símbolo sentido de paginação:
Exemplos
<LI class = "seta"> <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 = "seta"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
paginação centrado
Nós podemos adicionar a <ul> externo <div> elemento e <div> Adicionar on .pagination-centered classes para implementar paginação centrado:
Exemplos
<Class Ul = "paginação">
<LI class = "seta"> <a href = "#"> & laquo; </ a> </ li>
<LI class = "atual"> <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 = "seta"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
tente »
farinha de rosca
estrutura de farinha de rosca de navegação usado para exibir a página atual.
Na <ul> no elemento adicionado .breadcrumbs classe para implementar pão ralado. Você pode adicionar <li> em .current ou .unavailable classe definir a página atual e efeito não pode ser clicado:
Exemplos
<Li> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> privada </ a> </ li>
<Li class = "indisponível"> <a href = "#"> Pictures </ a> </ li>
<Li class = "atual"> Vacation </ li>
</ Ul>
tente »
sub navegação
Ligar a página, o sub-navegação é muito útil.
Na <dl> o elemento é adicionado .sub-nav classe para criar uma sub-navegação. Na <dt> no elemento para adicionar um título para a opção selecionada <dd> Adicionar .active categorias:
Exemplos
<Dt> Filtro: </ dt >
<Dd class = "ativo"> <a href = "#"> Todos </ a> </ dd>
<Dd> <a href = "#"> Ativo </ a> </ dd>
<Dd> <a href = "#"> Pendente </ a> </ dd>
<Dd> <a href = "#"> Suspenso </ a> </ dd>
</ Ul>
tente »