W3.CSS Yerleşik Duyarlılık
W3.CSS, düzeni işlemek için duyarlı, mobil öncelikli bir ı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
50 piksel
dinlenmek
1/4
dinlenmek
100 piksel
45 piksel
dinlenmek
W3.CSS Duyarlı Sınıflar
W3.CSS'nin ızgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenir:
| Sınıf | Açıklama |
|---|---|
| w3-yarım | Pencerenin 1/2'sini kaplar (orta ve büyük ekranlarda) |
| w3-üçüncü | Pencerenin 1/3'ünü kaplar (orta ve büyük ekranlarda) |
| w3-üçte iki | Pencerenin 2/3'ünü kaplar (orta ve büyük ekranlarda) |
| w3-çeyrek | Pencerenin 1/4'ünü kaplar (orta ve büyük ekranlarda) |
| w3-üç çeyrek | Pencerenin 3/4'ünü kaplar (orta ve büyük ekranlarda) |
| w3-dinlenme | Sütun genişliğinin geri kalanını kaplar |
| w3-col | 12 sütunlu yanıt veren bir kılavuzda bir sütunu tanımlar |
| w3-mobil | Bir hücreye (sütun) mobil öncelikli yanıt ekler. Öğeleri mobil cihazlarda blok öğeler olarak görüntüler. |
Yukarıdaki duyarlı sınıflar, tam olarak yanıt verebilmek için bir w3-satır sınıfına (veya w3-satır-doldurma sınıfına) yerleştirilmelidir.
| 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 içeriği | Sabit boyutlu merkezli içerik için kapsayıcı |
| w3-gizle-küçük | İçeriği küçük ekranlarda gizler (601 pikselden az) |
| w3-gizle-orta | Orta ekranlarda içeriği gizler |
| w3-gizle-büyük | İçeriği büyük ekranlarda gizler (992 pikselden büyük) |
| l1 - l12 | Büyük ekranlar için duyarlı boyutlar |
| m1 - m12 | Orta ekranlar için duyarlı boyutlar |
| s1 - s12 | Küçük ekranlar için duyarlı boyutlar |
w3-yarım Sınıfı
w3-half sınıfının genişliği , ana öğenin 1/2'sidir (style="width:50%").
601 pikselden küçük ekranlarda %100 olarak yeniden boyutlandırılır.
w3-yarım
w3-yarım
Örnek
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
w3-üçüncü Sınıf
w3-üçüncü sınıfın genişliği , ana öğenin 1/3'ü kadardır (style="width:33.33").
601 pikselden küçük ekranlarda %100 olarak yeniden boyutlandırılır.
w3-üçüncü
w3-üçüncü
w3-üçüncü
Örnek
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
w3-two Third Sınıfı
w3-two Third sınıfının genişliği , ana öğenin 2/3'ü kadardır (style="width:66.66%").
601 pikselden küçük ekranlarda %100 olarak yeniden boyutlandırılır.
w3-üçte iki
w3-üçüncü
Örnek
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
w3-çeyrek Sınıfı
w3-çeyrek sınıfının genişliği , ana öğenin 1/4'ü kadardır (style="width:25%").
601 pikselden küçük ekranlarda %100 olarak yeniden boyutlandırılır.
w3-çeyrek
w3-çeyrek
w3-çeyrek
w3-çeyrek
Örnek
<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>
w3-üç çeyrek Sınıfı
w3-üç çeyrek sınıfının genişliği , ana öğenin 3/4'ü kadardır (style="width:75%").
601 pikselden küçük ekranlarda %100 olarak yeniden boyutlandırılır.
w3-üç çeyrek
w3-çeyrek
Örnek
<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>
kombinasyonlar
w3-çeyrek
w3-yarım
w3-çeyrek
w3-çeyrek
w3-çeyrek
w3-yarım
w3-yarım
w3-çeyrek
w3-çeyrek
İç İçe Satırlar
Örnek: w3-yarım İç w3-yarım
<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>
Dinlenmeyi Kullanan Sütunlar
w3-col sınıfı , 12 sütunlu yanıt veren bir ızgarada bir sütun tanımlar.
w3-rest sınıfı , genişliğin geri kalanını kaplar:
ben 150px
ben geri kalanım
Örnek
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
Yüzde Kullanan Sütunlar
Genişliği yüzde olarak ayarlamak için CSS genişlik özelliğini de kullanabilirsiniz:
%20
%60
%20
Ö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>
w3-içerik Sınıfı
w3-content sınıfı , sabit boyutlu merkezli içerik için bir kap tanımlar. Varsayılan genişliği (980 piksel) geçersiz kılmak için CSS maksimum genişlik özelliğini kullanın.
Örnek
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-satır ve w3-satır dolgusu
w3-row sınıfı , dolgusuz bir kap tanımlarken w3-row-padding sınıfı, her sütuna 8 piksel sol ve sağ dolgu ekler:
w3-satır:
w3-üçüncü
w3-üçüncü
w3-üçüncü
w3-satır dolgusu:
w3-üçüncü
w3-üçüncü
w3-üçüncü
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>
Streç Yastıklı Sıralar
w3-stretch sınıfı , bir öğeden sağ ve sol kenar boşluklarını kaldırır. Bu sınıf genellikle yastıklı bir satırı uzatmak için kullanılır:
w3-stretch ile bir örnek:
w3-stretch içermeyen bir örnek:
Örnek
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
Duyarlı Göster / Gizle
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.