W3.CSS paginatii
Dacă aveți un site web cu o mulțime de pagini, ați putea dori să adăugați un fel de paginare la fiecare pagină:
Basic paginare
Pentru a crea un paginare de bază, adăugați clasa W3-paginare la un <ul> Element:
Exemplu
<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> Încearcă - l singur » Săgeți paginare
Utilizați entități HTML sau icoane dintr-o bibliotecă pictogramă pentru a adăuga săgeți paginare:
Exemplu
<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> Încearcă - l singur » Active / Link curent
Utilizați una din clasele de culoare w3- pentru a indica pagina pe care se află utilizatorul:
Exemplu
<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> Încearcă - l singur » hover Culoare
În mod implicit, atunci când mutați mouse-ul peste link-urile de paginare, ei primesc o culoare de fundal gri. Utilizați oricare dintre clasele de -W3 hover- de culoare pentru a schimba culoarea Hover:
Exemplu
<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> Încearcă - l singur » paginare Dimensionarea
Utilizați-W3 mici, W3-mici, W3-mare, W3-XLARGE, W3-xxlarge sau W3-xxxlarge la dimensiunea paginația:
Bordered paginare
Adăugați clasa W3-frontieră pentru a crea un paginare cu frontiere:
rotunjit frontiere
Adăugați clasa W3- a rundă de lângă W3-frontieră pentru frontierele rotunjite:
paginare Centrat
Pentru a centra paginația, înfășurați un <div> Element cu class = "W3-centru" în jurul valorii de <ul> :
Exemplu
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Încearcă - l singur » Alte exemple paginare
Următorul Exemplu / precedent
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Încearcă - l singur » Menu Exemplu
<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> Încearcă - l singur »