W3.CSS Düzeni
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
W3.CSS Düzen Sınıfları
W3.CSS sürüm 2.90 / 2.91, "sütun benzeri" düzen için aşağıdaki sınıfları tanıttı:
| Sınıf | Açıklama |
|---|---|
| w3 hücre satırı | Hücreler (sütunlar) için kapsayıcı. |
| w3 hücreli | Düzen hücresi (sütun). |
| w3-hücre üstü | İçeriği bir hücrenin (sütun) üstüne hizalar. |
| w3-hücre-orta | İçeriği bir hücrenin (sütun) dikey ortasına hizalar. |
| w3-hücre-alt | İçeriği bir hücrenin (sütun) altına hizalar. |
| w3-mobil | Bir hücreye (sütun) mobil öncelikli yanıt ekler. Öğeleri mobil cihazlarda blok öğeler olarak görüntüler. |
Düzen sınıfları, kullanımdan kaldırılan düzen sınıflarının yerini alır.
Yeni düzen sınıflandırıcı daha çok yönlü ve kullanımı daha kolaydır.
Kullanımdan kaldırılan düzen sınıfları bu sayfanın altında listelenmiştir.
HTML Blok Öğeleri
Başlangıçta, HTML blok öğeleri (<div> öğeleri gibi) dikey bloklar olarak görüntülenir:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Düzen Hücreleri
w3-cell sınıfı , blok öğelerini yatay olarak görüntülenecek şekilde yeniden tanımlar (tablo hücreleri gibi):
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Düzen Kapsayıcı
w3-hücre satırı , hücreler (sütunlar) için bir kapsayıcıdır.
w3 hücre satırı kabının genişliği, içerilen tüm hücrelerin toplam genişliğini tanımlar.
Varsayılan genişlik %100'dür:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Hücre kabının genişliğini değiştirirseniz, içerdiği hücrelerin toplam genişliğini azaltır:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Düzen Hücreleri Kendi Kendini Ayarlıyor
w3-cell sınıfı , çok güzel bir yerleşik kendi kendini ayarlayan standarda sahiptir. Yan yana öğeler, gerekli genişliğe otomatik olarak ayarlanır:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni. Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Düzen Hücreleri Eşit Yüksekliğe Ayarlanır
Yan yana w3 hücreli öğeler de otomatik olarak eşit yüksekliğe ayarlanır:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Duyarlı Düzen
w3-mobile sınıfı , herhangi bir HTML öğesine mobil öncelikli yanıt verme özelliğini ekler.
w3-cell ile birlikte kullanıldığında, yerleşim sütunlarını küçük ekranlarda/cep telefonlarında dikey olarak ve orta/büyük ekranlarda yatay olarak görüntüler.
Orta ve büyük ekranlarda:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Küçük ekranlarda:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Kolay Hizalama
w3-cell sınıfı , metni hizalamayı çok kolaylaştırır.
3 farklı hizalama sınıfı vardır:
- w3-hücre üstü (varsayılan)
- w3-hücre-orta
- w3-hücre-alt
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
w3-cell-row sınıfı , öğeleri sayfa genişliğine uyacak şekilde genişletir:
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Merhaba W3.CSS Düzeni.
Örnek
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Kullanımdan Kaldırılan W3.CSS Tablo Düzeni Sınıfları
| w3-düzen-konteyner | Bunun yerine w3-cell-row kullanın. |
| w3-düzen-satır | |
| w3-düzen-hücresi | Bunun yerine w3 hücresini kullanın. |
| w3-düzen-üst | Bunun yerine w3-cell-top kullanın. |
| w3-düzen-orta | Bunun yerine w3-cell-orta kullanın. |
| w3-düzen-alt | Bunun yerine w3-cell-bottom kullanın. |
| w3-layout-col | Bunun yerine w3-mobile kullanın. |
Kullanımdan kaldırılan sınıflar, sürüm 4.0'da W3.CSS'den kaldırılacaktır.