W3.Barre CSS
Barre Orizzontali
Le barre orizzontali sono elementi comuni del web design:
La classe w3-bar viene utilizzata per definire lo stile di una barra orizzontale:
Esempio
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Lo scopo della classe w3-bar-item è fornire spaziatura, riempimento e posizionamento corretti.
Barre verticali
Anche le barre verticali (barre laterali) sono comuni nel web design:
La classe w3-bar-block viene utilizzata per definire lo stile di una barra verticale:
Esempio
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Colori della barra
Puoi usare qualsiasi colore per dare uno stile a una barra:
Esempio
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Colori al passaggio del mouse
Puoi utilizzare qualsiasi colore al passaggio del mouse per definire lo stile di una barra:
Passa il mouse sopra gli elementi della barra per vedere l'effetto:
Esempio
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Collegamenti della barra
Fornire la navigazione è un uso tipico delle barre:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Pulsanti della barra
La classe w3-button è perfetta per lo styling dei collegamenti in un bar.
Passa il mouse sopra gli elementi della barra per vedere l'effetto:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Barra reattiva
La classe w3-mobile è perfetta per rendere reattivi gli articoli da bar.
Ridimensiona la finestra per vedere l'effetto:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Elementi della barra allineati a destra
La classe w3-right è perfetta per allineare a destra gli elementi della barra:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>