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 cột trên màn hình trung bình và 3 cột 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 cột trên màn hình trung bình và 9 cột trên màn hình lớn.
Ví 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ãy tự mình thử »Hàng đáp ứng
Hệ thống lưới của W3.CSS rất nhạy. 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 sẽ 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 dành cho các lớp đáp ứng, không có phần đệm |
| phần đệm hàng w3 | Vùng chứa dành cho các lớp đáp ứng, có khoảng đệm trái và 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 dành 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 trên 12 cột (chiều rộng: 100%). Mặc định cho màn hình nhỏ |
Cột dành cho màn hình trung bình (máy tính bảng thông thường):
| 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 trên 12 cột (chiều rộng: 100%). Mặc định cho màn hình trung bình |
Cột 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 trên 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 bố cục năng động và linh hoạt hơn.
Mỗi lớp sẽ tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng một chiều rộng cho 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 trung bình 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ố lượng cột phải luôn 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
Ví 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> Hãy tự mình thử »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
Ví 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> Hãy tự mình thử »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
Ví 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> Hãy tự mình thử »Ba cột không bằng nhau
Ba cột có chiều 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 (chiều rộng 100%):
m3
m6
m3
Ví 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> Hãy tự mình thử »Lưu ý: Ví dụ này tương tự như cách sử dụng w3-quarter (m3), w3-half (m6), w3-quarter (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 (chiều rộng 100%):
m2
m2
m2
m2
m2
m2
Ví 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ãy tự mình thử »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 bố cục năng động và linh hoạt. Ví dụ này sẽ tạo 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
Ví 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ãy tự mình thử »Hỗn hợp: Điện thoại di động, Máy tính bảng và Máy tính xách tay
Ví dụ này sẽ tạo bố cục ba cột với tỷ lệ phân chia 25%/58,34%/16,66% (l3, l7, l2) trên màn hình lớn, tỷ lệ phân chia 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
Ví 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> Hãy tự mình thử »Sự khác biệt giữa đệm w3-row và w3-row-padding
Lớp w3-row xác định 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:
hàng w3:
phần đệm hàng w3:
Ví 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> Hãy tự mình thử »Sử dụng w3-rest
Lớp w3-rest là 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
nghỉ ngơi
75px
nghỉ ngơi
100px
100px
nghỉ ngơi
một phần tư
80px
nghỉ ngơi
một phần tư
một phần tư
một phần tư
35%
nghỉ ngơi
Ví dụ sử dụng phần còn lạ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> Hãy tự mình thử »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 CSS width để xác định độ rộng cụ thể của các cột.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Ví 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> Hãy tự mình thử »