scheda Foundation
Se si dispone di un sacco di pagine di contenuto, è necessario utilizzare la funzione di paging.
Per creare una funzione di base di paging richiede <ul> sull'elemento più .pagination categorie:
Esempi
<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>
Prova »
La pagina corrente
È possibile <li> aggiunto .current classe per segnare la pagina corrente:
Esempi
<Li class = "corrente"> <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>
Prova »
Disabilitare scheda
Se è necessario impostare una scheda che non cliccabile bisogno .unavailable categorie:
Esempi
<Li> <a href = "#"> 1 </ a> </ li>
<Li> <a href = "#"> 2 </ a> </ li>
<Li class = "non disponibile"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = "#"> 4 </ a> </ li>
<Li> <a href = "#"> 5 </ a> </ li>
</ Ul>
Prova »
direzione paging
Nel primo e l'ultimo code> <li> aggiungere l'elemento .arrow entità inserto classe HTML Simbolo « e » per creare un simbolo direzione di paging:
Esempi
<Li class = "freccia"> <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 = "freccia"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
paging centrato
Siamo in grado di aggiungere il <ul> esterno <div> elemento e <div> Add on .pagination-centered classi per implementare il paging centrato:
Esempi
<Ul class = "impaginazione">
<Li class = "freccia"> <a href = "#"> & laquo; </ a> </ li>
<Li class = "corrente"> <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 = "freccia"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
Prova »
Pangrattato
struttura di Pangrattato navigazione utilizzato per visualizzare la pagina corrente.
Nel <ul> sull'elemento aggiunto .breadcrumbs classe per implementare il pangrattato. È possibile aggiungere <li> sul .current o .unavailable classe impostare la pagina corrente ed effetto non cliccabile:
Esempi
<Li> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Privato </ a> </ li>
<Li class = "non disponibile"> <a href = "#"> Foto </ a> </ li>
<Li class = "corrente"> vacanze </ li>
</ Ul>
Prova »
sottonavigazione
Accensione della pagina, il sub-navigazione è molto utile.
Nel <dl> l'elemento viene aggiunto .sub-nav classe per creare un sub-navigazione. Nel <dt> sull'elemento per aggiungere un titolo per l'opzione selezionata <dd> Aggiungi .active categorie:
Esempi
<Dt> Filtro: </ dt >
<Class Dd = "attivo"> <a href = "#"> Tutti </ a> </ dd>
<DD> <a href = "#"> Attivo </ a> </ dd>
<DD> <a href = "#"> attesa </ a> </ dd>
<DD> <a href = "#"> sospeso </ a> </ dd>
</ Ul>
Prova »