W3.CSS Stawe
Horisontale stawe
Horisontale stawe is algemene webontwerpelemente:
Die w3-staafklas word gebruik om 'n horisontale staaf te styl:
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>
Die doel van die w3-staaf-item klas is om korrekte spasiëring, vulling en posisionering te verskaf.
Vertikale stawe
Vertikale stawe (sybalke) is ook algemeen in webontwerp:
Die w3-staafblokklas word gebruik om 'n vertikale staaf te styl:
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>
Bar kleure
Jy kan enige kleur gebruik om 'n staaf te styl:
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>
Beweeg kleure
Jy kan enige sweefkleur gebruik om 'n staaf te styl:
Beweeg oor die balkitems om die effek te sien:
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>
Kroegskakels
Die verskaffing van navigasie is 'n tipiese gebruik vir 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>
Staafknoppies
Die w3-knoppie- klas is perfek om skakels in 'n kroeg te stileer.
Beweeg oor die balkitems om die effek te sien:
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>
Responsiewe Bar
Die w3-mobiele klas is perfek om kroegitems responsief te maak.
Verander die grootte van die venster om die effek te sien:
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>
Regs-belynde staafitems
Die w3-regs- klas is perfek om staafitems regs-belyn te maak:
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>