Lưới chất lỏng đáp ứng W3.CSS
Lưới đáp ứng
W3.CSS hỗ trợ lưới chất lỏng đáp ứng 12 cột.
Thay đổi kích thước trang để xem hiệu ứng!
Phần này sẽ chiếm 12 cột trên màn hình nhỏ, 4 trên màn hình vừa và 3 trên màn hình lớn.
Phần này sẽ chiếm 12 cột trên màn hình nhỏ, 8 trên màn hình vừa và 9 trên màn hình lớn.
Thí dụ
<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>
Hàng đáp ứng
Hệ thống lưới của W3.CSS đáp ứng tốt. Các cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình: Trên màn hình lớn, nội dung được sắp xếp thành ba cột có thể trông đẹp hơn, nhưng trên màn hình nhỏ, sẽ tốt hơn nếu nội dung được xếp chồng lên nhau.
| Lớp học | Sự miêu tả |
|---|---|
| hàng w3 | Vùng chứa cho các lớp đáp ứng, không có phần đệm |
| w3-row-padding | Vùng chứa cho các lớp đáp ứng, với phần đệm bên trái và bên phải 8px |
| w3-col | Xác định một cột trong lưới đáp ứng 12 cột |
w3-col có các lớp con sau:
Các cột cho màn hình nhỏ (điện thoại thông minh điển hình):
| Lớp học | Sự miêu tả |
|---|---|
| s1 | Xác định 1 trong 12 cột (chiều rộng: 08,33%) cho màn hình nhỏ |
| s2 | Xác định 2 trong số 12 cột (chiều rộng: 16,66%) cho màn hình nhỏ |
| s3 | Xác định 3 trong số 12 cột (chiều rộng: 25,00%) cho màn hình nhỏ |
| s4 | Xác định 4 trong số 12 cột (chiều rộng: 33,33%) cho màn hình nhỏ |
| s5-s11 | |
| s12 | Xác định 12 trong số 12 cột (chiều rộng: 100%). Mặc định cho màn hình nhỏ |
Các cột cho màn hình trung bình (máy tính bảng điển hình):
| Lớp học | Sự miêu tả |
|---|---|
| m1 | Xác định 1 trong 12 cột (chiều rộng: 08,33%) cho màn hình trung bình |
| m2 | Xác định 2 trong số 12 cột (chiều rộng: 16,66%) cho màn hình trung bình |
| m3 | Xác định 3 trong số 12 cột (chiều rộng: 25,00%) cho màn hình trung bình |
| m4 | Xác định 4 trong số 12 cột (chiều rộng: 33,33%) cho màn hình trung bình |
| m5-m11 | |
| m12 | Xác định 12 trong số 12 cột (chiều rộng: 100%). Mặc định cho màn hình trung bình |
Các cột dành cho màn hình lớn (máy tính xách tay và máy tính để bàn thông thường):
| Lớp học | Sự miêu tả |
|---|---|
| l1 | Xác định 1 trong 12 cột (chiều rộng: 08,33%) cho màn hình lớn |
| l2 | Xác định 2 trong số 12 cột (chiều rộng: 16,66%) cho màn hình lớn |
| l3 | Xác định 3 trong số 12 cột (chiều rộng: 25,00%) cho màn hình lớn |
| l4 | Xác định 4 trong số 12 cột (chiều rộng: 33,33%) cho màn hình lớn |
| l5-l11 | |
| l12 | Xác định 12 trong số 12 cột (chiều rộng: 100%). Mặc định cho màn hình lớn) |
Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn.
Mỗi lớp tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng một chiều rộng cho các màn hình nhỏ, vừa và lớn, bạn chỉ cần chỉ định lớp nhỏ . Và nếu bạn muốn có cùng chiều rộng trên màn hình vừa và lớn, bạn chỉ cần chỉ định lớp trung bình.
Tuy nhiên, nếu bạn chỉ sử dụng các lớp vừa và / hoặc lớn, chiều rộng sẽ luôn chuyển đổi thành 100% trên màn hình nhỏ.
Lưu ý: Số cột luôn phải cộng tối đa 12 cho mỗi hàng (6 + 6, 3 + 3 + 6, 9 + 3, v.v.)!
Hai cột bằng nhau
Hai cột có chiều rộng bằng nhau (50% / 50%) trên tất cả các kích thước màn hình:
s6
s6
Thí dụ
<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>
Hai cột không bằng nhau
Hai cột có chiều rộng không bằng nhau (25% / 75%) trên tất cả các kích thước màn hình:
s3
s9
Thí dụ
<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>
Ba cột bằng nhau
Ba cột có chiều rộng bằng nhau (33,3% / 33,3% / 33,3%) trên tất cả các kích thước màn hình:
s4
s4
s4
Thí dụ
<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>
Ba cột không bằng nhau
Ba cột có độ rộng khác nhau (25% / 50% / 25%) trên máy tính bảng, máy tính xách tay và máy tính để bàn. Trên điện thoại di động, các cột sẽ tự động xếp chồng (100% chiều rộng):
m3
m6
m3
Thí dụ
<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>
Lưu ý: Ví dụ này giống như cách sử dụng w3-1/4 (m3), w3-half (m6), w3-1/4 (m3) mà bạn đã học trong chương W3.CSS Responsive .
Sáu cột
Sáu cột có chiều rộng bằng nhau (16% mỗi cột) trên máy tính bảng, máy tính xách tay và máy tính để bàn. Trên điện thoại di động, các cột sẽ tự động xếp chồng (100% chiều rộng):
m2
m2
m2
m2
m2
m2
Thí dụ
<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>
Hỗn hợp: Điện thoại di động và Máy tính xách tay
Bạn có thể kết hợp các lớp để tạo ra một bố cục năng động và linh hoạt. Ví dụ này sẽ tạo ra bố cục hai cột với tỷ lệ phân chia 83,34% / 16,66% (l10, l2) trên màn hình lớn và tỷ lệ phân chia 50% / 50% (s6, s6) trên màn hình nhỏ:
l10 s6
l2 s6
Thí dụ
<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>
Hỗn hợp: Di động, Máy tính bảng và Máy tính xách tay
Ví dụ này sẽ tạo ra bố cục ba cột với mức phân chia 25% / 58,34% / 16,66% (l3, l7, l2) trên màn hình lớn, 50% / 25% / 25% (m6, m3, m3) trên màn hình trung bình và tỷ lệ phân chia 33,3% / 33,3% / 33,3% (s4, s4, s4) trên màn hình nhỏ:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Thí dụ
<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>
Sự khác biệt giữa w3-row và w3-row-padding
Lớp w3-row xác định một vùng chứa không có phần đệm, trong khi lớp w3-row-padding thêm phần đệm trái và phải 8px vào mỗi cột:
w3-hàng:
w3-row-padding:
Thí dụ
<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>
Sử dụng w3-rest
Lớp w3-rest là một lớp mạnh mẽ và linh hoạt sẽ sử dụng những gì còn lại của cột lưới.
150px
còn lại
75px
còn lại
100px
100px
còn lại
phần tư
80px
còn lại
phần tư
phần tư
phần tư
35%
còn lại
Ví dụ sử dụng nghỉ ngơi
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Phần tử sử dụng class = "w3-rest" phải luôn là phần tử cuối cùng trong mã nguồn.
Sử dụng phần trăm
Sử dụng thuộc tính chiều rộng CSS để xác định chiều rộng cụ thể của các cột.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Thí dụ
<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>