W3.CSS impaginazioni
Se si dispone di un sito web con un sacco di pagine, si potrebbe desiderare di aggiungere una sorta di impaginazione per ogni pagina:
Impaginazione di base
Per creare una impaginazione di base, aggiungere la classe w3-impaginazione ad un elemento <ul>:
Esempio
<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> Prova tu stesso " Frecce impaginazione
Utilizzare entità HTML o icone da una libreria di icone per aggiungere frecce di impaginazione:
Esempio
<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> Prova tu stesso " Attivo / collegamento corrente
Utilizzare una delle classi di colore w3- per indicare quale pagina si trova l'utente:
Esempio
<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> Prova tu stesso " hover colori
Per impostazione predefinita, quando si sposta il mouse sopra i link di paginazione, ottengono un colore di sfondo grigio. Utilizzare qualsiasi delle classi di colore W3-hover- per cambiare il colore hover:
Esempio
<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> Prova tu stesso " impaginazione Dimensionamento
Utilizzare w3-tiny, w3-piccole, w3-large, w3-XLarge, w3-XXLarge o w3-XXXLarge a misura l'impaginazione:
Delimitata Impaginazione
Aggiungere la classe w3-confine per creare una impaginazione con i bordi:
arrotondato Borders
Aggiungere la classe w3-rotonda vicino al w3-border per i bordi arrotondati:
Impaginazione centrato
Per centrare l'impaginazione, avvolgere un elemento <div> con class = "w3-center" intorno <ul>:
Esempio
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Prova tu stesso " Altri esempi di paginazione
Successivo Esempio / precedente
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Prova tu stesso " Esempio Menu
<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> Prova tu stesso "