Stiftung Registerkarte
Wenn Sie eine Menge von Content-Seiten haben, müssen Sie die Paging-Funktion zu verwenden.
Um eine grundlegende Paging - Funktion erstellen erfordert <ul> auf dem Element und .pagination Kategorien:
Beispiele
<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>
Versuchen »
Die aktuelle Seite
Sie können <li> hinzugefügt .current Klasse die aktuelle Seite zu markieren:
Beispiele
<Li class = "current"> <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>
Versuchen »
Deaktivieren Registerkarte
Wenn Sie eine Registerkarte einrichten müssen klickbare müssen Sie nicht .unavailable Kategorien:
Beispiele
<Li> <a href = "#"> 1 </ a> </ li>
<Li> <a href = "#"> 2 </ a> </ li>
<Li class = "nicht verfügbar"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = "#"> 4 </ a> </ li>
<Li> <a href = "#"> 5 </ a> </ li>
</ Ul>
Versuchen »
Paging Richtung
Im ersten und letzten code> <li> Fügen Sie das Element .arrow Klasse einfügen HTML - Entitäten Symbol « und » auf eine Paging - Richtung Symbol zu erstellen:
Beispiele
<Li class = "Pfeil"> <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 = "Pfeil"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
Paging zentriert
Wir können das hinzufügen <ul> äußere <div> Element und <div> Fügen Sie auf .pagination-centered Klassen zum Implementieren von Paging zentriert:
Beispiele
<Ul class = "Paginierung">
<Li class = "Pfeil"> <a href = "#"> & laquo; </ a> </ li>
<Li class = "current"> <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 = "Pfeil"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
Versuchen »
Paniermehl
Paniermehl Navigationsstruktur verwendet, um die aktuelle Seite anzuzeigen.
In der <ul> auf dem Element hinzugefügt .breadcrumbs Klasse Paniermehl zu implementieren. Sie können <li> add on .current oder .unavailable Klasse gesetzt , die aktuelle Seite und nicht anklickbar Wirkung:
Beispiele
<Li> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Privat </ a> </ li>
<Li class = "nicht verfügbar"> <a href = "#"> Bilder </ a> </ li>
<Li class = "current"> Urlaub </ li>
</ Ul>
Versuchen »
Unternavigation
Das Einschalten der Seite, ist die Unternavigation sehr nützlich.
Im <dl> wird das Element hinzugefügt .sub-nav - Klasse eine Unternavigation zu erstellen. In der <dt> auf dem Element einen Titel für die gewählte Option hinzufügen <dd> hinzufügen .active Kategorien:
Beispiele
<Dt> Filter: </ dt >
<Dd class = "aktiv"> <a href = "#"> Alle </ a> </ tt>
<Dd> <a href = "#"> Aktiv </ a> </ tt>
<Dd> <a href = "#"> Ausstehend </ a> </ dd>
<Dd> <a href = "#"> Suspended </ a> </ dd>
</ Ul>
Versuchen »