W3.Impaginazione CSS
Impaginazione di base
Se hai un sito web con molte pagine, potresti voler usare una sorta di impaginazione.
Per creare un'impaginazione di base, utilizzare i pulsanti ( w3-button ) in una barra ( w3-bar ).
Esempio
<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>
Per rimuovere lo spazio tra i pulsanti, aggiungi una classe w3-bar-item :
Esempio
<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>
Frecce di impaginazione
Usa entità o icone HTML da una libreria di icone per aggiungere frecce di impaginazione:
Esempio
<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>
Collegamento attivo/corrente
Utilizzare una delle classi w3- color per indicare in quale pagina si trova l'utente:
Esempio
<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>
Colore al passaggio del mouse
Per impostazione predefinita, quando si sposta il mouse sui collegamenti di impaginazione, questi ottengono un colore di sfondo grigio. Usa una delle classi w3-hover- color per cambiare il colore al passaggio del mouse:
Esempio
<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>
Dimensionamento della paginazione
Utilizzare w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge o w3-xxxlarge per ridimensionare l'impaginazione:
Esempio
<div class="w3-bar
w3-xlarge">
Impaginazione centrata
Per centrare l'impaginazione, inserisci l'elemento "w3-bar" all'interno di un elemento "w3-center":
Esempio
<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>
Impaginazione bordata
Aggiungi la classe w3-border per creare un'impaginazione con bordi:
Esempio
<div class="w3-bar
w3-border">
Bordi arrotondati
Aggiungi la classe w3-round accanto a w3-border per bordi arrotondati:
Esempio
<div class="w3-bar
w3-border w3-round">
Altri esempi di impaginazione
La classe w3-bar può essere utilizzata anche per creare pulsanti successivo/precedente:
Esempio successivo/precedente
<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>
Esempio di menu in linea
<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>