Foundation-Paginierung
Wenn Ihre Webseite viele Inhalte enthält, müssen Sie die Paginierungsfunktion verwenden.
Um eine grundlegende Paginierungsfunktion zu erstellen, müssen Sie<ul>zu Element hinzufügen.paginationKlasse:
Beispiel
<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>
Selbst ausprobieren »
Aktuelle Seite
Sie können<li>hinzufügen.currentKlasse zum Markieren der aktuellen Seite:
Beispiel
<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>
Selbst ausprobieren »
Deaktivierte Paginierung
Wenn Sie ein Paginierungselement nicht anklickbar machen möchten, müssen Sie.unavailableKlasse:
Beispiel
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Selbst ausprobieren »
Paginierungsrichtung
In der ersten und letzten<li>zu Element hinzufügen.arrowKlasse zum Einfügen von HTML-Entity-Symbolen«und»um Symbole für die Paginierungsrichtung zu erstellen:
Beispiel
<li class="arrow"><a href="#">«</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="arrow"><a href="#">»</a></li>
</ul>
Zentrierte Paginierungsanzeige
Wir können es an der äußeren Ebene des <ul><div>-Elements hinzufügen, und auf die<div>hinzufügen zu.pagination-centeredKlasse zur Implementierung einer zentrierten Paginierungsanzeige:
Beispiel
<ul class="pagination">
<li class="arrow"><a href="#">«</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="arrow"><a href="#">»</a></li>
</ul>
</div>
Selbst ausprobieren »
Breadcrumb-Navigation
Die Breadcrumb-Navigation wird verwendet, um die Navigationsstruktur der aktuellen Seite anzuzeigen.
In<ul>zu Element hinzufügen.breadcrumbsKlasse zur Implementierung der Breadcrumb-Navigation. Sie können sie am <li> hinzufügen.currentoder.unavailableKlasse, um die aktuelle Seite festzulegen und einen nicht klickbaren Effekt zu erzielen:
Beispiel
<li><a href="#">Startseite</a></li>
<li><a href="#">Privat</a></li>
<li class="unavailable"><a href="#">Bilder</a></li>
<li class="current">Urlaub</li>
</ul>
Selbst ausprobieren »
Unternavigation
Beim Seitenwechsel ist die Unternavigation sehr nützlich.
In<dl>zu Element hinzufügen.sub-navKlasse zum Erstellen der Unternavigation. In<dt>Fügen Sie dem Element einen Titel für die ausgewählte Option hinzu<dd>hinzufügen.activeKlasse:
Beispiel
<dt>Filter:</dt>
<dd class="active"><a href="#">Alle</a></dd>
<dd><a href="#">Aktiv</a></dd>
<dd><a href="#">Ausstehend</a></dd>
<dd><a href="#">Gesperrt</a></dd>
</dl>
Selbst ausprobieren »