W3.CSS- balken
Horizontale balken
Horizontale balken zijn veelvoorkomende webdesignelementen:
De klasse w3-bar wordt gebruikt om een horizontale balk op te maken:
Voorbeeld
<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>
Het doel van de klasse w3-bar-item is om de juiste spatiëring, opvulling en positionering te bieden.
Verticale balken
Verticale balken (zijbalken) komen ook veel voor in webdesign:
De klasse w3-bar-block wordt gebruikt om een verticale balk op te maken:
Voorbeeld
<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>
Staafkleuren
U kunt elke kleur gebruiken om een balk op te maken:
Voorbeeld
<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>
Zweefkleuren
U kunt elke zweefkleur gebruiken om een balk op te maken:
Beweeg met de muis over de balkitems om het effect te zien:
Voorbeeld
<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>
Barlinks
Het verstrekken van navigatie is een typisch gebruik voor bars:
Voorbeeld
<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>
Balkknoppen
De klasse w3-knop is perfect voor het stylen van links in een bar.
Beweeg met de muis over de balkitems om het effect te zien:
Voorbeeld
<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>
Responsieve balk
De klasse w3-mobile is perfect om bar-items responsief te maken.
Verklein het venster om het effect te zien:
Voorbeeld
<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>
Rechts uitgelijnde staafitems
De klasse w3-right is perfect om staafitems rechts uitgelijnd te maken:
Voorbeeld
<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>