Pruhy W3.CSS
Vodorovné pruhy
Vodorovné pruhy jsou běžné prvky webového designu:
Třída w3-bar se používá ke stylování vodorovného pruhu:
Příklad
<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>
Účelem třídy w3-bar-item je poskytnout správné rozestupy, odsazení a umístění.
Svislé pruhy
Svislé pruhy (boční pruhy) jsou také běžné ve webovém designu:
Třída w3-bar-block se používá ke stylování svislé čáry:
Příklad
<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>
Barvy pruhů
Pro styling lišty můžete použít jakoukoli barvu:
Příklad
<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>
Vznášet barvy
Ke stylování pruhu můžete použít libovolnou barvu při najetí myší:
Chcete-li vidět efekt, umístěte kurzor myši na položky lišty:
Příklad
<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>
Bar Links
Poskytování navigace je typické použití pro lišty:
Příklad
<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>
Barová tlačítka
Třída tlačítka w3 je ideální pro stylování odkazů v liště.
Chcete-li vidět efekt, umístěte kurzor myši na položky lišty:
Příklad
<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>
Responzivní lišta
Třída w3-mobile je ideální k tomu, aby položky baru byly responzivní.
Změňte velikost okna, abyste viděli efekt:
Příklad
<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>
Položky zarovnané vpravo
Třída w3-right je ideální pro vytváření položek pruhů zarovnaných doprava:
Příklad
<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>