W3.CSS Seitenumfängen
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht eine Art von Paginierung jeder Seite hinzuzufügen:
Basis Paginierung
Eine grundlegende Paginierung, fügen Sie die w3-Paginierung Klasse zu einem <ul> Element zu erstellen:
Beispiel
<ul class="w3-pagination">
<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> Versuch es selber " Paginierung Arrows
Verwenden Sie HTML-Entitäten oder Symbole aus einer Symbolbibliothek Paginierung Pfeile hinzuzufügen:
Beispiel
<ul class="w3-pagination">
<li><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><a href="#">»</a></li>
</ul> Versuch es selber " Aktiv / aktuelle Link
Verwenden Sie eine der w3- Farbklassen , um anzuzeigen , welche Seite der Benutzer auf:
Beispiel
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" 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><a href="#">»</a></li>
</ul> Versuch es selber " Hover Farbe
In der Standardeinstellung, wenn Sie die Maus über die Paginierung Links bewegen, bekommen sie einen grauen Hintergrundfarbe. Verwenden Sie eine der w3-hover- Farbklassen , die Hover - Farbe zu ändern:
Beispiel
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> Versuch es selber " Paginierung Sizing
Verwenden Sie w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge oder w3-XXXLarge Größe der Paginierung:
angrenzende Paginierung
Fügen Sie die w3-Grenze Klasse eine Paginierung mit Grenzen zu schaffen:
Abgerundete Borders
Fügen Sie die w3-Runde Klasse neben w3-Grenze für abgerundete Grenzen:
zentriert Paginierung
Um die Paginierung zu zentrieren, wickeln Sie ein <div> -Element mit class = "w3-center" um <ul>:
Beispiel
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Versuch es selber " Andere Beispiele Paginierung
Als nächstes / vorheriges Beispiel
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Versuch es selber " Menü Beispiel
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> Versuch es selber "