W3.CSS display klasslari
Display klasslari
W3.CSS display klasslari kontentni boshqa HTML elementlari ichida joylashtiradi.
Ular rasmlar, kartochkalar, bannerlar, qoplamalar (overlay), yorliqlar va tugmalar uchun qulay.
Display konteyneri
Ota elementda w3-display-container klassidan foydalaning.
So‘ngra uning ichidagi elementlarni joylashtirish uchun display klasslaridan foydalaning.
Misol
<div class="w3-display-container w3-green" style="height:250px">
<div class="w3-display-topleft w3-padding">Top Left</div>
<div class="w3-display-topright w3-padding">Top Right</div>
<div class="w3-display-middle w3-padding">Middle</div>
<div class="w3-display-bottomleft w3-padding">Bottom Left</div>
<div class="w3-display-bottomright w3-padding">Bottom Right</div>
</div>
O‘zingiz sinab ko‘ring »
Eslatma
Joylashtirilgan elementlar w3-display-container elementiga nisbatan joylashadi.
Display joylashuv klasslari
W3.CSS display konteyneri ichida to‘qqizta tayyor joylashuvni taqdim etadi.
| Klass | Joylashuv |
|---|---|
w3-display-topleft |
Yuqori chap |
w3-display-topmiddle |
Yuqori o‘rta |
w3-display-topright |
Yuqori o‘ng |
w3-display-left |
O‘rta chap |
w3-display-middle |
Markaz |
w3-display-right |
O‘rta o‘ng |
w3-display-bottomleft |
Pastki chap |
w3-display-bottommiddle |
Pastki o‘rta |
w3-display-bottomright |
Pastki o‘ng |
w3-display-position |
Erkin joylashuv |
Misol
<div class="w3-display-container">
<div class="w3-display-topleft w3-padding">Top Left</div>
<div class="w3-display-topmiddle w3-padding">Top Middle</div>
<div class="w3-display-topright w3-padding">Top Right</div>
<div class="w3-display-left w3-padding">Left</div>
<div class="w3-display-middle w3-padding">Middle</div>
<div class="w3-display-right w3-padding">Right</div>
<div class="w3-display-bottomleft w3-padding">Bottom Left</div>
<div class="w3-display-bottommiddle w3-padding">Bottom Middle</div>
<div class="w3-display-bottomright w3-padding">Bottom Right</div>
</div>
O‘zingiz sinab ko‘ring »
Rasm ustidagi matn
Display klasslarining eng foydali qo‘llanilishlaridan biri — matnni rasm ustiga joylashtirish.
Norway
Experience the Northern Lights
Misol
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Northern Lights" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding">
<h2>Norway</h2>
<p>Experience the Northern Lights</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Rasm yorliqlari
Display klasslari rasmlarga yorliq va nishonlar (badge) qo‘shishni osonlashtiradi.
NEW
Misol
<div class="w3-display-container">
<img src="img_snowtops.jpg" alt="Mountains" style="width:100%">
<span class="w3-display-topleft w3-tag w3-red w3-margin">NEW</span>
<div class="w3-display-bottomright w3-black w3-padding">The Alps</div>
</div>
O‘zingiz sinab ko‘ring »
Erkin joylashtirilgan yorliqlar
Misol
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Northern Lights" style="width:100%">
<div class="w3-display-position w3-padding w3-red"
style="top:50px;left:50px">Positioned</div>
</div>
O‘zingiz sinab ko‘ring »
Hover’da ko‘rsatish
w3-display-hover klassi foydalanuvchi sichqonchani display konteyneri ustiga olib bormaguncha elementni yashirib turadi.
Sichqonchani bu blok ustiga olib boring
Misol
<div class="w3-display-container">
<div class="w3-display-middle">Move the mouse over this box</div>
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div class="w3-display-topright w3-display-hover">Top Right</div>
</div>
O‘zingiz sinab ko‘ring »
Hover effektli rasm kartochkasini yaratish
Interaktiv rasm kartochkalarini yaratish uchun display klasslarini hover effektlari bilan birga ishlating.
Misol
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar3.png" alt="John Doe" style="width:100%">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>
O‘zingiz sinab ko‘ring »
Sichqonchani ushbu rasm ustiga olib boring:
W3.CSS effektlari va animatsiyalari haqida ushbu darslikning keyingi qismlarida ko‘proq bilib olasiz.
Elementlarni ko‘rsatish va yashirish
Elementni yashirish uchun w3-hide klassidan foydalaning.
Elementni ko‘rsatish uchun w3-show klassidan foydalaning.
Misol
<p class="w3-show">I am shown.</p>
<p class="w3-hide">I am hidden.</p>
O‘zingiz sinab ko‘ring »
Ko‘rsatish va yashirishni almashtirish
JavaScript kontentni ko‘rsatish va yashirish uchun W3.CSS display klasslarini qo‘shishi yoki olib tashlashi mumkin.
Salom! Bu kontentni ko‘rsatish va yashirish mumkin.
Misol
<button class="w3-button w3-black" onclick="myFunction()">Toggle</button>
<div id="demo" class="w3-panel w3-hide">
<p>Hello!</p>
</div>
O‘zingiz sinab ko‘ring »
“O‘zingiz sinab ko‘ring” misolida klassni almashtirish uchun zarur bo‘lgan JavaScript kodi mavjud.
Bayroq yasash
Display klasslaridan konteyner ichida elementlarni joylashtirib, shakllar yasash uchun ham foydalanish mumkin.
Misol
<div class="w3-display-container w3-card-4">
<div class="w3-red w3-display-topleft"></div>
<div class="w3-red w3-display-topright"></div>
<div class="w3-red w3-display-bottomleft"></div>
<div class="w3-red w3-display-bottomright"></div>
</div>
O‘zingiz sinab ko‘ring »
Chapga va o‘ngga suzdirish (float)
w3-left va w3-right klasslari elementlarni qarama-qarshi tomonlarga suzdiradi (float).
Misol
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red w3-padding">Left</div>
<div class="w3-right w3-blue w3-padding">Right</div>
</div>
O‘zingiz sinab ko‘ring »
w3-mobile klassi
w3-mobile klassi 600px dan kichik ekranlarda elementni to‘liq kenglikka yoyadi.
Moslashuvchan dizayn haqida ushbu darslikning keyingi qismlarida ko‘proq bilib olasiz.
Misol
<button class="w3-button w3-black w3-mobile">Home</button>
<button class="w3-button w3-black w3-mobile">News</button>
<button class="w3-button w3-black w3-mobile">Contact</button>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!