W3.CSS- paginering
Basiese paginering
As jy 'n webwerf met baie bladsye het, wil jy dalk 'n soort paginering gebruik.
Om 'n basiese paginering te skep, gebruik knoppies ( w3-knoppie ) in 'n balk ( w3-balk ).
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 die spasie tussen die knoppies te verwyder, voeg 'n w3-bar-item klas by:
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>
Pagineringpyle
Gebruik HTML-entiteite of ikone uit 'n ikoonbiblioteek om pagineringpyle by te voeg:
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>
Aktiewe/huidige skakel
Gebruik een van die w3- kleurklasse om aan te dui op watter bladsy die gebruiker is:
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>
Beweeg kleur
By verstek, wanneer jy die muis oor die pagineringskakels beweeg, kry hulle 'n grys agtergrondkleur. Gebruik enige van die w3-sweef-kleurklasse om die sweefkleur te verander:
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>
Paginering Grootte
Gebruik w3-klein , w3-klein , w3-groot , w3-xgroot , w3-xxgroot of w3-xxxgroot om die paginering te verander:
Voorbeeld
<div class="w3-bar
w3-xlarge">
Gesentreerde paginering
Om die paginering te sentreer, plaas die "w3-bar" element binne 'n "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 die w3-border- klas by om 'n paginering met grense te skep:
Voorbeeld
<div class="w3-bar
w3-border">
Afgeronde grense
Voeg die w3-ronde klas langs w3-grens by vir geronde grense:
Voorbeeld
<div class="w3-bar
w3-border w3-round">
Ander pagineringsvoorbeelde
Die w3-bar klas kan ook gebruik word om volgende/vorige knoppies te skep:
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>
Inline Menu Voorbeeld
<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>