duyarlı Sınıflar
W3.CSS Düzeninizi işlemek için duyarlı, mobil birinci ızgara sistemi içerir:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
dinlenme
1/4
dinlenme
100px
45px
dinlenme
W3.CSS grid sistemi duyarlı ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenleyecektir:
| Sınıf | Açıklama |
|---|---|
| w3-half | Pencerenin 1/2 kaplar (on medium and large screens) |
| w3-third | Pencerenin 1/3 kaplar (on medium and large screens) |
| w3-twothird | Pencerenin 2/3 kaplar (on medium and large screens) |
| w3-quarter | Pencerenin 1/4 kaplar (on medium and large screens) |
| w3-threequarter | Pencerenin 3/4 kaplar (on medium and large screens) |
| w3-rest | Arka arkaya kalanını tanımlar |
| w3-col | 12 kolon duyarlı sıvı ızgarasında bir sütun tanımlar (more in a later chapter) |
duyarlı Satırlar
Duyarlı sınıflar tamamen duyarlı olmaya bir w3-satır içinde yerleştirilmelidir.
| Sınıf | Açıklama |
|---|---|
| w3-row | Duyarlı sınıflar için bir padding-az kabı tanımlar. |
| w3-row-padding | Duyarlı sınıflar için bir yastıklı kabı tanımlar. |
w3 buçuk Sınıfı
W3 yarı sınıfının genişliğinin üst elemanın 1/2 (style="width:50%") .
küçük * ekranlarda% 100'e boyutlandırır.
w3 buçuk
w3 buçuk
Örnek
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Kendin dene " w3 üçte sınıfı
W3 üçte sınıfının genişliğinin üst elemanın 1/3 (style="width:33.33%") .
küçük * ekranlarda% 100'e boyutlandırır.
w3 üçte
w3 üçte
w3 üçte
Örnek w3 üçte kullanılarak
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Kendin dene " w3-twothird Sınıf
W3-twothird sınıfının genişliğinin üst elemanın 2/3 olduğu (style="width:66.66%") .
küçük * ekranlarda% 100'e boyutlandırır.
w3-twothird
w3 üçte
Örnek w3 üçte kullanılarak
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Kendin dene " w3 çeyrek Sınıfı
W3 çeyrek sınıfının genişliğinin üst elemanın 1/4 (style="width:25%") .
küçük * ekranlarda% 100'e boyutlandırır.
w3 çeyrek
w3 çeyrek
w3 çeyrek
w3 çeyrek
Örnek w3 dörtte kullanılarak
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Kendin dene " w3-threequarter Sınıfı
W3-threequarter sınıfının genişliğinin üst elemanın 3/4 (style="width:75%") .
küçük * ekranlarda% 100'e boyutlandırır.
w3 çeyrek
w3 çeyrek
Örnek w3-threequarter kullanılarak
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Kendin dene " Kombinasyonlar
w3 çeyrek
w3 buçuk
w3 çeyrek
w3 çeyrek
w3 çeyrek
w3 buçuk
w3 buçuk
w3 çeyrek
w3 çeyrek
İçiçe Satırlar
Örnek: w3-yarısında İç w3 buçuk
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Kendin dene " Geri Kalan kullanma Sütunlar
Ben 150p duyuyorum
Ben dinlenme değilim
Örnek w3-dinlenme kullanarak
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Kendin dene " Yüzde kullanma Sütunlar
% 20
% 60
% 20
yüzde kullanılarak Örnek
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Kendin dene " w3-içerik sınıfı
W3-içerik sınıfı sabit boyutlu merkezli içeriği için bir kap tanımlar:
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 " 12 Kolon duyarlı sıvı grid
W3.CSS ayrıca gelişmiş 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.
Bir sonraki bölümde akışkan ızgara hakkında daha fazla öğreneceksiniz.
* Ekran Çözünürlükleri
W3.CSS yerleşik yanıt ekranın DP boyutunu kullanır.
W3.CSS 375 x 667 piksellik bir küçük ekran olarak 750 x 1334 piksel çözünürlüğe sahip bir iPhone 6 görür.
Küçük ekranlar 601 piksel DP az olan, orta ekranlar az 993 piksel DP bulunmaktadır.
Aşağıda tipik cihaz çözünürlüğü listesi ve DP boyutları bildirdi:
Iphone 4
çözüm
640 x 960
DP
320 x 480
Iphone 5
çözüm
x 1136 640
DP
320 x 528
iphone 6
çözüm
x 1334 750
DP
375 x 667
Iphone 6s
çözüm
x 1920 1080
DP
414 x 736
Galaxy S6
çözüm
x 2560 1440
DP
360 x 640
Not 4
çözüm
x 2560 1440
DP
400 x 853
Nexus 6'nın
çözüm
x 2560 1440
DP
411 x 731
iPad Mini
çözüm
x 1024 768
DP
x 1024 768
iPad
çözüm
x 2048 1536
DP
x 1024 728
Tipik dizüstü
çözüm
1366 x 768
DP
1366 x 768
Tipik Masaüstü
çözüm
x 1080 1920
DP
x 1080 1920