duyarlı Izgara
W3.CSS 12 sütun duyarlı sıvı ızgara destekler.
etkisini görmek için sayfayı yeniden boyutlandırma!
Bu bölüm büyük bir ekranda 12 orta ekranda küçük bir ekranda, 4 sütun, ve 3 işgal edecek.
Bu bölüm büyük bir ekranda 12 orta ekranda küçük bir ekranda, 8 sütun ve 9 işgal edecek.
Ö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> Kendin dene " duyarlı Satırlar
W3.CSS grid sistemi duyarlı ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenleyecektir: üç sütunlar halinde düzenlenmiş içerikle daha iyi görünebilir büyük bir ekranda, ama küçük bir ekranda bu içeriğin eğer daha iyi olurdu öğeler birbirinin üstüne yığılmış.
Sütunlar tamamen duyarlı olmaya satır içinde bulunmalıdır.
| Sınıf | Açıklama |
|---|---|
| w3-row | Duyarlı sütunlar için padding-az kabı tanımlar. |
| w3-row-padding | Duyarlı sütunlar için yastıklı bir kap tanımlar. |
| w3-col | alt sınıfları ile bir sütun tanımlar |
w3-col aşağıdaki alt sınıfları vardır:
Küçük ekranlar için Sütunlar (typical smart phones) :
| Sınıf | Açıklama |
|---|---|
| s1 | 1 ila 12 sütun tanımlar (width:08.33%) küçük ekranlar için |
| s2 | 2 12 sütun tanımlar (width:16.66%) küçük ekranlar için |
| s3 | 3 12 sütun tanımlar (width:25.00%) küçük ekranlar için |
| s4 | 4 12 sütun tanımlar (width:33.33%) küçük ekranlar için |
| s5-s11 | |
| s12 | 12 12 sütun tanımlar (width:100%) . küçük ekranlar için varsayılan |
Orta ekranlar için sütunlar (typical tablets) :
| Sınıf | Açıklama |
|---|---|
| m1 | 1 ila 12 sütun tanımlar (width:08.33%) , orta ekranlar için |
| m2 | 2 12 sütun tanımlar (width:16.66%) , orta ekranlar için |
| m3 | 3 12 sütun tanımlar (width:25.00%) , orta ekranlar için |
| m4 | 4 12 sütun tanımlar (width:33.33%) , orta ekranlar için |
| m5-m11 | |
| m12 | 12 12 sütun tanımlar (width:100%) . orta ekranlar için varsayılan |
Büyük ekran için sütunlar (typical laptops) :
| Sınıf | Açıklama |
|---|---|
| l1 | 1 ila 12 sütun tanımlar (width:08.33%) büyük ekranlar için |
| l2 | 2 12 sütun tanımlar (width:16.66%) büyük ekranlar için |
| l3 | 3 12 sütun tanımlar (width:25.00%) büyük ekranlar için |
| l4 | 4 12 sütun tanımlar (width:33.33%) büyük ekranlar için |
| l5-l11 | |
| l12 | 12 12 sütun tanımlar (width:100%) . Büyük ekranlar için Varsayılan) |
sınıfları üzerinde daha dinamik ve esnek düzenleri oluşturmak için birleştirilebilir.
Her sınıf yukarı ölçekler, bu nedenle küçük, orta ve büyük ekranlar için aynı genişliğe ayarlamak istiyorsanız, sadece küçük sınıfını belirtmek gerekir. Eğer orta ve büyük ekranlarda aynı genişliğe istiyorsanız, sadece orta sınıf belirtmek gerekir.
yalnızca orta ve / veya büyük sınıfları kullanmak, ancak genişliği her zaman küçük ekranlarda% 100 dönüştürecektir.
Not: sütun sayısı her zaman her satır için 12 kadar olmalıdır (6+6, 3+3+6, 9+3, etc) !
İki Eşit Sütunlar
İki eşit genişlikte sütunlar (50%/50%) , tüm ekran boyutlarında:
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> Kendin dene " İki Eşit Olmayan Sütunlar
Eşit olmayan genişlikte iki sütun (25%/75%) , tüm ekran boyutlarında:
s3
s9
Örnek
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Kendin dene " Üç Eşit Sütunlar
Üç eşit genişlikte sütunlar (33.3%/33.3%/33.3%) tüm ekran boyutlarına:
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> Kendin dene " Üç Eşitsiz Sütunlar
Üç farklı genişlikte sütunlar (25%/50%/25%) , tabletler, dizüstü ve masaüstü. Cep telefonlarında, sütunlar otomatik yığını olacak (100% width) :
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> Kendin dene " Not: Bu örnek, w3-çeyrek kullanarak aynıdır (m3) , w3-yarısını (m6) , w3-çeyrek (m3) Eğer öğrenilen, W3.CSS Duyarlı bölüm.
Altı Sütunlar
Altı eşit genişlikte sütunlar (16% each) tabletler, dizüstü bilgisayarlar ve masaüstü. Cep telefonlarında, sütunlar otomatik yığını olacak (100% width) :
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> Kendin dene " Karışık: Mobil ve dizüstü bilgisayarlar
Bir dinamik ve esnek bir düzen oluşturmak için sınıfları birleştirebilirsiniz. Bu örnek, bir / 16.66% 83.34% olan, iki sütun düzeni üretecek (l8, l4) büyük ekranlarda yarılmış ve bir% 50 /% 50 (s6, s6) küçük ekranlarda bölünmüş:
l8 s6
l4 s6
Örnek
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Kendin dene " Karışık: Mobil, Tablet ve dizüstü bilgisayarlar
Bu örnek, bir% 25 ağırlık / / 16.66% 58.34% olan üç sütun düzeni üretecek (l3, l7, l2) büyük ekranlarda bölünmüş,% 50 /% 25 /% 25 (m6, m3, m3) , orta ekranlarında bölünmüş ve % 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 l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Kendin dene " w3 sıralı ve w3'ün sıralı-dolgu arasındaki fark
w3 sıralı dolgu sınıfı her sütun için bir 8px sol ve sağ doldurma ekler w3 sıralı sınıfı, bir yastıklı-az kabı tanımlar:
w3-sıra:
w3-satır-padding:
Ö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_fjords.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_fjords.jpg"></div>
</div> Kendin dene " Yüzde kullanma
% 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> Kendin dene " w3-kalanını kullanma
150px
dinlenme
75px
dinlenme
100px
100px
dinlenme
çeyrek
80px
dinlenme
çeyrek
çeyrek
çeyrek
% 35
dinlenme
dinlenme kullanarak Örnek
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Kendin dene "