Barres W3.CSS
Barres horizontales
Les barres horizontales sont des éléments de conception Web courants :
La classe w3-bar est utilisée pour styliser une barre horizontale :
Exemple
<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>
Le but de la classe w3-bar-item est de fournir un espacement, un rembourrage et un positionnement corrects.
Barres verticales
Les barres verticales (barres latérales) sont également courantes dans la conception Web :
La classe w3-bar-block est utilisée pour styliser une barre verticale :
Exemple
<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>
Couleurs des barres
Vous pouvez utiliser n'importe quelle couleur pour styliser une barre :
Exemple
<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>
Couleurs de survol
Vous pouvez utiliser n'importe quelle couleur de survol pour styliser une barre :
Passez la souris sur les éléments de la barre pour voir l'effet :
Exemple
<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>
Liens de barre
La navigation est une utilisation typique des bars :
Exemple
<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>
Boutons de la barre
La classe w3-button est parfaite pour styliser les liens dans une barre.
Passez la souris sur les éléments de la barre pour voir l'effet :
Exemple
<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>
Barre réactive
La classe w3-mobile est parfaite pour rendre les articles de bar réactifs.
Redimensionnez la fenêtre pour voir l'effet :
Exemple
<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>
Éléments de barre alignés à droite
La classe w3-right est parfaite pour aligner à droite les éléments de la barre :
Exemple
<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>