W3.CSS Responsywna siatka płynów
Responsywna siatka
W3.CSS obsługuje 12-kolumnową responsywną siatkę płynów.
Zmień rozmiar strony, aby zobaczyć efekt!
Ta część zajmie 12 kolumn na małym ekranie, 4 na średnim ekranie i 3 na dużym ekranie.
Ta część zajmie 12 kolumn na małym ekranie, 8 na średnim ekranie i 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>
Responsywne wiersze
System siatki W3.CSS jest responsywny. Kolumny zmienią się automatycznie w zależności od rozmiaru ekranu: na dużym ekranie może wyglądać lepiej z zawartością zorganizowaną w trzech kolumnach, ale na małym ekranie może być lepiej, gdyby zawartość była ułożona jedna na drugiej.
| Klasa | Opis |
|---|---|
| w3-wiersz | Kontener na zajęcia responsywne, bez wypełnienia |
| w3-wiersz-wypełnienie | Pojemnik na zajęcia responsywne, z wypełnieniem 8px lewy i prawy |
| w3-kolor | Definiuje jedną kolumnę w 12-kolumnowej siatce responsywnej |
w3-col ma następujące podklasy:
Kolumny na małe ekrany (typowe smartfony):
| Klasa | Opis |
|---|---|
| s1 | Definiuje 1 z 12 kolumn (szerokość: 08,33%) dla małych ekranów |
| s2 | Definiuje 2 z 12 kolumn (szerokość: 16,66%) dla małych ekranów |
| s3 | Definiuje 3 z 12 kolumn (szerokość: 25,00%) dla małych ekranów |
| s4 | Definiuje 4 z 12 kolumn (szerokość: 33,33%) dla małych ekranów |
| s5-s11 | |
| s12 | Definiuje 12 z 12 kolumn (szerokość: 100%). Domyślnie dla małych ekranów |
Kolumny na średnie ekrany (typowe tablety):
| 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ślne dla średnich ekranów |
Kolumny na duże ekrany (typowe laptopy i komputery stacjonarne):
| Klasa | Opis |
|---|---|
| l1 | Definiuje 1 z 12 kolumn (szerokość: 08,33%) dla dużych ekranów |
| l2 | Definiuje 2 z 12 kolumn (szerokość: 16,66%) dla dużych ekranów |
| l3 | Definiuje 3 z 12 kolumn (szerokość: 25,00%) dla dużych ekranów |
| l4 | Definiuje 4 z 12 kolumn (szerokość: 33,33%) dla dużych ekranów |
| l5-l11 | |
| l12 | Definiuje 12 z 12 kolumn (szerokość: 100%). Domyślne dla dużych ekranów) |
Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.
Każda klasa skaluje się w górę, więc jeśli chcesz ustawić tę samą szerokość dla małych, średnich i dużych ekranów, wystarczy określić małą klasę. A jeśli chcesz mieć taką samą szerokość na średnich i dużych ekranach, wystarczy określić klasę średnią.
Jeśli jednak użyjesz tylko średnich i/lub dużych klas, szerokość zawsze zmieni się na 100% na małych ekranach.
Uwaga: liczba kolumn powinna zawsze sumować się do 12 w każdym wierszu (6+6, 3+3+6, 9+3 itd.)!
Dwie równe kolumny
Dwie kolumny o równej szerokości (50%/50%) na 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>
Dwie nierówne kolumny
Dwie kolumny o nierównej szerokości (25%/75%) na wszystkich rozmiarach ekranu:
s3
s9
Przykład
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Trzy równe kolumny
Trzy kolumny o równej szerokości (33,3%/33,3%/33,3%) na 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>
Trzy nierówne kolumny
Trzy kolumny o różnej szerokości (25%/50%/25%) na tabletach, laptopach i komputerach stacjonarnych. W telefonach komórkowych kolumny zostaną automatycznie ułożone (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>
Uwaga: Ten przykład jest taki sam, jak użycie w3 kwartał (m3), w3 połowa (m6), w3 kwartał (m3), którego nauczyłeś się w rozdziale W3.CSS Responsive .
Sześć kolumn
Sześć kolumn o równej szerokości (16% każda) na tabletach, laptopach i komputerach stacjonarnych. W telefonach komórkowych kolumny będą się układać automatycznie (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>
Mieszane: telefony komórkowe i laptopy
Możesz łączyć klasy, aby stworzyć dynamiczny i elastyczny układ. Ten przykład wygeneruje układ dwukolumnowy z podziałem 83,34%/16,66% (l10, l2) na dużych ekranach i podziałem 50%/50% (s6, s6) na małych ekranach:
l10 s6
l2 s6
Przykład
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Mieszane: telefony komórkowe, tablety i laptopy
Ten przykład wygeneruje układ trójkolumnowy z podziałem 25%/58,34%/16,66% (l3, l7, l2) na duże ekrany, 50%/25%/25% (m6, m3, m3) na średnich ekranach oraz podział 33,3%/33,3%/33,3% (s4, s4, s4) na małych ekranach:
l3 m6 s4
17 m3 s4
l2 m3 s4
Przykład
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Różnica między dopełnieniem w3-rzędów i w3-rzędów
Klasa w3-row definiuje kontener bez dopełnienia, podczas gdy klasa w3-row-padding dodaje 8px dopełnienie lewe i prawe do każdej kolumny:
w3-wiersz:
w3-wiersz dopełnienia:
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_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>
Korzystanie z w3-rest
Klasa w3-rest jest potężną i elastyczną klasą, która użyje tego, co pozostało z kolumny siatki.
150px
odpoczynek
75px
odpoczynek
100px
100px
odpoczynek
kwartał
80px
odpoczynek
kwartał
kwartał
kwartał
35%
odpoczynek
Przykład z wykorzystaniem odpoczynku
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Element używający class="w3-rest" musi być zawsze ostatnim elementem w kodzie źródłowym.
Korzystanie z procentów
Użyj właściwości CSS width, aby określić konkretną szerokość kolumn.
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>