responsive Siatka
W3.CSS obsługuje 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.
Przykład
<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> Spróbuj sam " reagujących Wiersze
Układ siatki W3.CSS jest czułe i kolumny ponownie zorganizować automatycznie w zależności od rozmiaru ekranu: Na dużym ekranie może wyglądać lepiej z treścią zorganizowanej w trzech kolumnach, lecz na małym ekranie byłoby lepiej, gdyby treści pozycje ułożone jedna na drugiej.
Kolumny muszą znajdować się w środku rzędu, aby być w pełni elastyczne.
| Klasa | Opis |
|---|---|
| w3-rzędowy | Definiuje pojemnik padding-mniej dla reagujących kolumn. |
| w3-row-wyściółka | Definiuje wyściełane pojemnik na reagujących kolumn. |
| w3-kol | Definiuje kolumnę z klas podrzędnych |
w3-col ma następujące klasy podrzędne:
Kolumny dla małych ekranach (typowe smartfony):
| Klasa | Opis |
|---|---|
| s1 | Definiuje 1 z 12 kolumn (szerokość: 08,33%) na małych ekranach |
| s2 | Definiuje 2 z 12 kolumn (szerokość: 16,66%) na małych ekranach |
| s3 | Definiuje 3 z 12 kolumn (szerokość: 25,00%) na małych ekranach |
| S4 | Definiuje 4 z 12 kolumn (szerokość: 33,33%) na małych ekranach |
| S5-S11 | |
| s12 | Definiuje 12 z 12 kolumn (szerokość: 100%). Domyślnie dla małych ekranów |
Słupy do ekranów średnich (typowe tabletki):
| Klasa | Opis |
|---|---|
| m1 | Definiuje 1 z 12 kolumn (szerokość: 08,33%) dla średnich ekranów |
| m2 | Definiuje 2 z 12 kolumn (szerokość: 16,66%) dla średnich ekranów |
| m3 | Definiuje 3 z 12 kolumn (szerokość: 25,00%) dla średnich ekranów |
| m4 | Definiuje 4 z 12 kolumn (szerokość: 33,33%) dla średnich ekranów |
| m5-m11 | |
| m12 | Definiuje 12 z 12 kolumn (szerokość: 100%). Domyślnie dla ekranów średnich |
Kolumny do dużych ekranach (typowe laptopy):
| Klasa | Opis |
|---|---|
| l1 | Definiuje 1 z 12 kolumn (szerokość: 08,33%) na dużych ekranach |
| l2 | Definiuje 2 z 12 kolumn (szerokość: 16,66%) na dużych ekranach |
| L3 | Definiuje 3 z 12 kolumn (szerokość: 25,00%) na dużych ekranach |
| l4 | Definiuje 4 z 12 kolumn (szerokość: 33,33%) na dużych ekranach |
| L5-L11 | |
| l12 | Definiuje 12 z 12 kolumn (szerokość: 100%). Domyślnie dla dużych ekranów) |
Klasy powyżej mogą być łączone w celu stworzenia bardziej dynamiczne i elastyczne układy.
Każda klasa skaluje się, więc jeśli chcesz ustawić taką samą szerokość dla małych, średnich i dużych ekranach, trzeba tylko podać małą klasę. A jeśli chcesz taką samą szerokość na średnich i dużych ekranach, tylko trzeba określić średnią klasę.
Jednakże, jeśli używasz tylko pożywkę i / lub w dużych klas, szerokość zawsze będą przekształcać się w 100% na małych ekranach.
Uwaga: liczba kolumn powinny zawsze sumują się do 12 dla każdego wiersza (6 + 6, 3 + 3 + 6, 9 + 3, itp)!
Dwie równe kolumny
Dwie kolumny równej szerokości (50% / 50%) we wszystkich rozmiarach ekranu:
S6
S6
Przykład
<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> Spróbuj sam " Dwie nierówne Kolumny
Dwie kolumny nierównej szerokości (25% / 75%), we wszystkich rozmiarach ekranu:
s3
S9
Przykład
<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> Spróbuj sam " Trzy równe Kolumny
Trzy kolumny równej szerokości (33,3% / 33,3% / 33,3%) we wszystkich rozmiarach ekranu:
S4
S4
S4
Przykład
<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> Spróbuj sam " Trzy Nierówne Kolumny
Trzy kolumny różne szerokości (25% / 50% / 25%) na tabletkach, laptopów i komputerów stacjonarnych. W telefonach komórkowych, kolumny automatycznie stosu (szerokość 100%):
m3
M6
m3
Przykład
<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> Spróbuj sam " Uwaga: Ten przykład jest taki sam, jak przy użyciu w3 czwartą (m3) W3 połowę (M6) W3 czwartą (m3), której nauczył się w W3.CSS Responsive rozdziału.
sześć Kolumny
Sześć kolumn równa szerokości (16% każda) na tabletkach, laptopów i komputerów stacjonarnych. W telefonach komórkowych, kolumny automatycznie stosu (szerokość 100%):
m2
m2
m2
m2
m2
m2
Przykład
<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> Spróbuj sam " Mieszane: Mobile i laptopy
Można łączyć klasy, aby utworzyć układ dynamiczny i elastyczny. Ten przykład będzie produkować układ dwie kolumny z 83,34% / 16,66% (L8, L4) pęknięciem na dużych ekranach, a 50% / 50% (S6, S6) podzielonego na małych ekranach:
L8 S6
l4 S6
Przykład
<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> Spróbuj sam " Mieszane: Mobile, tablety i laptopy
Ten przykład będzie produkować układ trzech kolumn o 25% / 58,34% / 16,66% (L3, L7, L2) pęknięciem na dużych ekranach, 50% / 25% / 25% (M6, M3, M3) Podział na średnich ekranach 33,3% / 33,3% / 33,3% (S4, S4, S4) podział na małych ekranach:
L3 M6 S4
L7 m3 S4
l2 m3 S4
Przykład
<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> Spróbuj sam " 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 " Korzystanie Percent
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Przykład
<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> Spróbuj sam " Korzystanie w3-Rest
150px
odpoczynek
75 pikseli
odpoczynek
100px
100px
odpoczynek
jedna czwarta
80px
odpoczynek
jedna czwarta
jedna czwarta
jedna czwarta
35%
odpoczynek
Przykład wykorzystania reszty
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Spróbuj sam "