reagujących Klasy
W3.CSS zawiera czuły, pierwszy mobilny system siatki do obsługi układu:
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
odpoczynek
1/4
odpoczynek
100px
na 45
odpoczynek
Układ siatki W3.CSS jest czułe i kolumny ponownie zorganizować automatycznie w zależności od rozmiaru ekranu:
| Klasa | Opis |
|---|---|
| w3 połowę | Zajmuje 1/2 okna (na średnich i dużych ekranów) |
| W3 trzecia | Zajmuje 1/3 okna (na średnich i dużych ekranów) |
| w3-twothird | Zajmuje 2/3 okna (na średnich i dużych ekranów) |
| w3 czwarta | Zajmuje 1/4 okna (na średnich i dużych ekranów) |
| w3-threequarter | Zajmuje 3/4 okna (na średnich i dużych ekranów) |
| w3 spoczynkowej | Definiuje resztę rzędu |
| w3-kol | Definiuje kolumnę w 12 kolumnie płynu reagują siatki (więcej w następnym rozdziale) |
reagujących Wiersze
Klasy reagujących musi być umieszczony wewnątrz w3 rzędzie być w pełni elastyczne.
| Klasa | Opis |
|---|---|
| w3-rzędowy | Definiuje pojemnik padding-mniej dla klas reagujących. |
| w3-row-wyściółka | Definiuje wyściełane pojemnik na zajęciach reagujących. |
W3-pół klasy
Szerokość klasy w3 pół to pół elementu nadrzędnego (style = "width: 50%").
Na małych ekranach * jest dostosowywany do 100%.
w3 połowę
w3 połowę
Przykład
<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> Spróbuj sam " W3 trzecia klasa
Szerokość w3 klasie trzeciej jest 1/3 elementu nadrzędnego (style = "width: 33,33%").
Na małych ekranach * jest dostosowywany do 100%.
W3 trzecia
W3 trzecia
W3 trzecia
Przykład wykorzystania w3 trzecią
<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> Spróbuj sam " W3-twothird Klasa
Szerokość klasy W3-twothird wynosi 2/3 elementu nadrzędnego (style = "width: 66,66%").
Na małych ekranach * jest dostosowywany do 100%.
w3-twothird
W3 trzecia
Przykład wykorzystania w3 trzecią
<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> Spróbuj sam " W3 czwartej klasy
Szerokość klasy w3 kwartał wynosi 1/4 elementu nadrzędnego (style = "width: 25%").
Na małych ekranach * jest dostosowywany do 100%.
w3 czwarta
w3 czwarta
w3 czwarta
w3 czwarta
Przykład wykorzystania w3 czwartą
<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> Spróbuj sam " W3-threequarter Klasa
Szerokość klasy W3-threequarter jest 3/4 elementu nadrzędnego (style = "width: 75%").
Na małych ekranach * jest dostosowywany do 100%.
w3 czwarta
w3 czwarta
Przykład wykorzystania w3-threequarter
<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> Spróbuj sam " kombinacje
w3 czwarta
w3 połowę
w3 czwarta
w3 czwarta
w3 czwarta
w3 połowę
w3 połowę
w3 czwarta
w3 czwarta
Wiersze zagnieżdżone
Przykład: w3 pół Wewnątrz w3 połowę
<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> Spróbuj sam " Kolumny Korzystanie Rest
Jestem 150px
Jestem reszta
Przykład wykorzystania w3-Rest
<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> Spróbuj sam " Kolumny Korzystanie Percent
20%
60%
20%
Przykład wykorzystania procent
<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> Spróbuj sam " W3-content Klasa
Klasa w3-content definiuje pojemnik na stałym rozmiarze skupione treści:
Różnica pomiędzy w3 rzędzie i W3-row-wyściółką
Klasa w3-wiersz definiuje wyściełane mniej pojemnika, natomiast klasa W3-row-obicie dodaje 8PX lewego i prawego dopełnienie do każdej kolumny:
w3-rząd:
w3-row-padding:
Przykład
<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> Spróbuj sam " 12 Kolumna siatki płyn reagujący
W3.CSS obsługuje również zaawansowane 12 kolumny płynu reagują siatkę.
Zmiana rozmiaru strony, aby zobaczyć efekt!
Ta część zajmie 12 kolumn na małym ekranie, 4 na nośniku ekranie i 3 na dużym ekranie.
Ta część zajmie 12 kolumn na małym ekranie, 8 na nośniku ekranie, a 9 na dużym ekranie.
Dowiesz się więcej na temat sieci płynu w późniejszym rozdziale.
* Rozdzielczość ekranu
Wbudowanego reagowania W3.CSS wykorzystuje wielkość DP ekranie.
W3.CSS potraktuje iPhone 6 o rozdzielczości 750 x 1334 pikseli jako małego ekranu 375 x 667 pikseli.
Małe ekrany są mniejsze niż 601 pikseli DP średnie ekrany są mniejsze niż 993 pikseli DP.
Poniżej znajduje się lista typowych rozdzielczościach urządzeń i raportowane rozmiary DP:
Iphone 4
Rozkład
640 x 960
DP
320 x 480
iPhone 5
Rozkład
640 x 1136
DP
320 x 528
iphone 6
Rozkład
750 x 1334
DP
375 x 667
iphone 6s
Rozkład
1080 x 1920
DP
414 x 736
Galaxy S6
Rozkład
1440 x 2560
DP
360 x 640
Uwaga 4
Rozkład
1440 x 2560
DP
400 x 853
Nexus 6
Rozkład
1440 x 2560
DP
411 x 731
iPad Mini
Rozkład
768 x 1024
DP
768 x 1024
iPad
Rozkład
1536 x 2048
DP
728 x 1024
Typowy laptop
Rozkład
1366 x 768
DP
1366 x 768
Typowy Pulpit
Rozkład
1920 x 1080
DP
1920 x 1080