W3.CSS Duyarlı Akışkan Izgarası
Duyarlı Izgara
W3.CSS, 12 sütuna duyarlı bir akışkan ızgarasını destekler.
Efekti görmek için sayfayı yeniden boyutlandırın!
Bu kısım küçük ekranda 12, orta ekranda 4 ve büyük ekranda 3 sütun kaplar.
Bu kısım küçük ekranda 12, orta ekranda 8 ve büyük ekranda 9 sütun kaplar.
Örnek
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Duyarlı Satırlar
W3.CSS'nin ızgara sistemi duyarlıdır. Sütunlar, ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenir: Büyük ekranda içerik üç sütun halinde organize edildiğinde daha iyi görünebilir, ancak küçük bir ekranda içeriğin üst üste istiflenmesi daha iyi olabilir.
| Sınıf | Açıklama |
|---|---|
| w3-satır | Dolgu içermeyen duyarlı sınıflar için kapsayıcı |
| w3-satır dolgusu | 8 piksel sol ve sağ dolgu ile duyarlı sınıflar için kapsayıcı |
| w3-col | 12 sütunlu yanıt veren bir kılavuzda bir sütunu tanımlar |
w3-col aşağıdaki alt sınıflara sahiptir:
Küçük ekranlar için sütunlar (tipik akıllı telefonlar):
| Sınıf | Açıklama |
|---|---|
| s1 | Küçük ekranlar için 12 sütundan 1'ini (genişlik: %08.33) tanımlar |
| s2 | Küçük ekranlar için 12 sütundan 2'sini (genişlik: %16,66) tanımlar |
| s3 | Küçük ekranlar için 12 sütundan 3'ünü (genişlik: %25,00) tanımlar |
| s4 | Küçük ekranlar için 12 sütundan 4'ünü (genişlik: %33,33) tanımlar |
| s5-s11 | |
| s12 | 12 sütundan 12'sini tanımlar (genişlik: %100). Küçük ekranlar için varsayılan |
Orta ekranlar için sütunlar (tipik tabletler):
| Sınıf | Açıklama |
|---|---|
| m1 | Orta ekranlar için 12 sütundan 1'ini (genişlik: %08.33) tanımlar |
| m2 | Orta ekranlar için 12 sütundan 2'sini (genişlik: %16,66) tanımlar |
| m3 | Orta ekranlar için 12 sütundan 3'ünü (genişlik: %25,00) tanımlar |
| m4 | Orta ekranlar için 12 sütundan 4'ünü (genişlik: %33,33) tanımlar |
| m5-m11 | |
| m12 | 12 sütundan 12'sini tanımlar (genişlik: %100). Orta ekranlar için varsayılan |
Büyük ekranlar için sütunlar (tipik dizüstü bilgisayarlar ve masaüstü bilgisayarlar):
| Sınıf | Açıklama |
|---|---|
| l1 | Büyük ekranlar için 12 sütundan 1'ini (genişlik: %08.33) tanımlar |
| l2 | Büyük ekranlar için 12 sütundan 2'sini (genişlik: %16,66) tanımlar |
| l3 | Büyük ekranlar için 12 sütundan 3'ünü (genişlik: %25,00) tanımlar |
| l4 | Büyük ekranlar için 12 sütundan 4'ünü (genişlik: %33,33) tanımlar |
| l5-l11 | |
| l12 | 12 sütundan 12'sini tanımlar (genişlik: %100). Büyük ekranlar için varsayılan) |
Yukarıdaki sınıflar, daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.
Her sınıf ölçeklenir, bu nedenle küçük, orta ve büyük ekranlar için aynı genişliği ayarlamak istiyorsanız, yalnızca küçük sınıfı belirtmeniz yeterlidir. Ve orta ve büyük ekranlarda aynı genişliği istiyorsanız, sadece orta sınıfı belirtmeniz yeterli.
Ancak, yalnızca orta ve/veya büyük sınıfları kullanırsanız, genişlik küçük ekranlarda her zaman %100'e dönüşecektir.
Not: Sütun sayısı her satır için her zaman 12'ye kadar olmalıdır (6+6, 3+3+6, 9+3, vb.)!
İki Eşit Sütun
Tüm ekran boyutlarında iki eşit genişlikte sütun (%50/%50):
s6
s6
Örnek
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
İki Eşit Olmayan Sütun
Tüm ekran boyutlarında eşit olmayan genişlikte (%25/%75) iki sütun:
s3
s9
Örnek
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Üç Eşit Sütun
Tüm ekran boyutlarında üç eşit genişlikte sütun (%33,3/%33,3/%33,3):
s4
s4
s4
Örnek
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Üç Eşit Olmayan Sütun
Tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlarda üç farklı genişlikte sütun (%25/%50/%25). Cep telefonlarında sütunlar otomatik olarak istiflenir (%100 genişlik):
m3
m6
m3
Örnek
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Not: Bu örnek, W3.CSS Duyarlı bölümünde öğrendiğiniz w3-çeyrek (m3), w3-yarım (m6), w3-çeyrek (m3) kullanımıyla aynıdır.
Altı Sütun
Tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlarda altı eşit genişlikte sütun (her biri %16) Cep telefonlarında sütunlar otomatik olarak istiflenir (%100 genişlik):
m2
m2
m2
m2
m2
m2
Örnek
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Karma: Mobil ve Dizüstü Bilgisayarlar
Dinamik ve esnek bir düzen oluşturmak için sınıfları birleştirebilirsiniz. Bu örnek, büyük ekranlarda %83,34/16,66 (l10, l2) ve küçük ekranlarda %50/%50 (s6, s6) bölünmüş iki sütunlu bir düzen oluşturacaktır:
l10 s6
l2 s6
Örnek
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Karma: Mobil, Tabletler ve Dizüstü Bilgisayarlar
Bu örnek, büyük ekranlarda %25/58.34/16.66 (l3, l7, l2), orta ekranlarda %50/25/25 (m6, m3, m3) ve a %33,3/33.3/33.3 (s4, s4, s4) küçük ekranlarda bölünmüş:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Örnek
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
w3-satır ve w3-satır dolgu arasındaki fark
w3-row sınıfı, dolgusuz bir kapsayıcı tanımlarken, w3-row-padding sınıfı, her sütuna 8 piksellik bir sol ve sağ dolgu ekler:
w3-satır:
w3-satır dolgusu:
Örnek
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
w3-rest'i kullanma
w3-rest sınıfı , grid sütunundan geriye kalanları kullanacak güçlü ve esnek bir sınıftır.
150 piksel
dinlenmek
75 piksel
dinlenmek
100 piksel
100 piksel
dinlenmek
çeyrek
80 piksel
dinlenmek
çeyrek
çeyrek
çeyrek
%35
dinlenmek
Dinlenme örneği
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
class="w3-rest" kullanan öğe her zaman kaynak kodundaki son öğe olmalıdır.
Yüzde Kullanımı
Sütunların belirli bir genişliğini belirlemek için CSS genişlik özelliğini kullanın.
%20
%60
%20
%45
%55
%15
%35
%10
%30
%10
Örnek
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>