W3.CSS Çubukları
Yatay çubuklar
Yatay çubuklar yaygın web tasarım öğeleridir:
w3-bar sınıfı , yatay bir çubuğa stil vermek için kullanılır:
Örnek
<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>
w3-bar-item sınıfının amacı doğru boşluk, dolgu ve konumlandırma sağlamaktır.
Dikey Çubuklar
Dikey çubuklar (kenar çubukları) web tasarımında da yaygındır:
w3-bar-block sınıfı , dikey bir çubuğa stil vermek için kullanılır:
Örnek
<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>
Çubuk Renkleri
Bir çubuğu biçimlendirmek için herhangi bir rengi kullanabilirsiniz:
Örnek
<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>
vurgulu renkler
Bir çubuğa stil vermek için herhangi bir vurgulu rengi kullanabilirsiniz:
Efekti görmek için fareyi çubuk öğelerinin üzerine getirin:
Örnek
<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>
Çubuk Bağlantılar
Gezinti sağlamak, çubuklar için tipik bir kullanımdır:
Örnek
<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>
Çubuk Düğmeler
w3-button sınıfı , bir barda linkleri şekillendirmek için mükemmeldir.
Efekti görmek için fareyi çubuk öğelerinin üzerine getirin:
Örnek
<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>
Duyarlı Çubuk
w3-mobile sınıfı , bar öğelerini duyarlı hale getirmek için mükemmeldir.
Efekti görmek için pencereyi yeniden boyutlandırın:
Örnek
<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>
Sağa Hizalanmış Çubuk Öğeleri
w3-right sınıfı , çubuk öğelerini sağa hizalamak için mükemmeldir:
Örnek
<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>