W3.CSS paginering
Basis paginering
Als u een website heeft met veel pagina's, wilt u misschien een soort paginering gebruiken.
Gebruik knoppen ( w3-button ) in een balk ( w3-bar ) om een eenvoudige paginering te maken.
Voorbeeld
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Om de ruimte tussen de knoppen te verwijderen, voegt u een klasse w3-bar-item toe :
Voorbeeld
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Pagineringspijlen
Gebruik HTML-entiteiten of pictogrammen uit een pictogrambibliotheek om pagineringspijlen toe te voegen:
Voorbeeld
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Actieve/huidige link
Gebruik een van de w3 -kleurklassen om aan te geven op welke pagina de gebruiker zich bevindt:
Voorbeeld
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Zweefkleur
Wanneer u de muis over de paginatielinks beweegt, krijgen ze standaard een grijze achtergrondkleur. Gebruik een van de w3-hover- color - klassen om de hover-kleur te wijzigen:
Voorbeeld
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Grootte van paginering
Gebruik w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge of w3-xxxlarge om de paginering op maat te maken:
Voorbeeld
<div class="w3-bar
w3-xlarge">
Gecentreerde paginering
Om de paginering te centreren, plaatst u het "w3-bar" -element in een "w3-center" -element:
Voorbeeld
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Begrensde paginering
Voeg de klasse w3-border toe om een paginering met randen te maken:
Voorbeeld
<div class="w3-bar
w3-border">
Afgeronde randen
Voeg de klasse w3-round toe naast w3-border voor afgeronde randen:
Voorbeeld
<div class="w3-bar
w3-border w3-round">
Andere voorbeelden van paginering
De klasse w3-bar kan ook worden gebruikt om volgende/vorige knoppen te maken:
Volgende/vorige voorbeeld
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Voorbeeld van inlinemenu
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>