W3.CSS bar’lar
Gorizontal bar’lar
Gorizontal bar’lar veb-dizaynda keng tarqalgan elementlardir:
w3-bar klassi gorizontal bar yaratadi.
w3-bar-item klassi bar ichidagi elementlarni belgilaydi.
Misol
<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>
Vertikal bar’lar
Vertikal bar’lar (yon panellar) ham veb-dizaynda keng tarqalgan:
w3-bar-block klassi bar elementlarini vertikal ko‘rsatadi.
Misol
<div class="w3-bar-block w3-green" style="width:100px">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Bar ranglari
Bar’ga uslub berish uchun istalgan rangdan foydalanishingiz mumkin:
Misol
<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>
Hover ranglari
Bar’ga uslub berish uchun istalgan hover rangidan foydalanishingiz mumkin:
Effektni ko‘rish uchun sichqonchani bar elementlari ustiga olib boring:
Misol
<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 havolalari
Navigatsiyani ta’minlash bar’larning odatiy qo‘llanilishidir:
Misol
<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>
Bar tugmalari
Bar elementining butun maydonini bosiladigan qilish uchun havolalarga w3-button klassini qo‘shing.
Effektni ko‘rish uchun sichqonchani bar elementlari ustiga olib boring:
Misol
<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>
Moslashuvchan bar
Kichik ekranlarda bar elementlarini ustma-ust joylashtirish uchun w3-mobile klassidan foydalaning.
Effektni ko‘rish uchun oyna o‘lchamini o‘zgartiring:
Misol
<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>
O‘ngga tekislangan bar elementlari
Bar elementini o‘ngga surish uchun w3-right klassidan foydalaning:
Misol
<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>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!