W3.CSS - Lưới
W3.CSS cung cấp lưới đáp ứng chất lỏng 12 cột.
Nó sử dụng các lớp kiểu w3-row và w3-col để xác định các hàng và cột tương ứng.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-row Chỉ định một vùng chứa không có phần đệm sẽ được sử dụng cho các cột đáp ứng. Lớp này là bắt buộc để các lớp đáp ứng có thể đáp ứng hoàn toàn. |
| 2 | w3-col Chỉ định một cột với các lớp con |
w3-col có một số lớp con dành cho các loại màn hình khác nhau.
Các cột dành cho thiết bị màn hình nhỏ
Dưới đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình nhỏ, điển hình là điện thoại thông minh.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | s1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | s2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | s3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | s4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | s12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình nhỏ. |
Cột cho Thiết bị Màn hình Trung bình
Dưới đây là danh sách các kiểu cấp cột cho thiết bị màn hình trung bình, thường là máy tính bảng.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | m1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | m2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | m3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | m4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | m12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình trung bình. |
Cột dành cho thiết bị màn hình lớn
Dưới đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình lớn, điển hình là máy tính xách tay.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | |1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | |2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | |3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | |4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | |12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho thiết bị màn hình lớn. |
Sử dụng
Mỗi lớp con xác định số lượng cột của lưới sẽ được sử dụng dựa trên loại thiết bị. Hãy xem xét đoạn mã HTML sau.
<div class = "w3-row">
<div class = "w3-col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
</div>Các cột mặc định sẽ được sử dụng là 12 trên một thiết bị nếu một lớp con không được đề cập trong thuộc tính lớp của một phần tử HTML.
Thí dụ
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<div class = "w3-row">
<div class = "w3-col m1 w3-center w3-grey">1</div>
<div class = "w3-col m1 w3-center">2</div>
<div class = "w3-col m1 w3-center w3-grey">3</div>
<div class = "w3-col m1 w3-center">4</div>
<div class = "w3-col m1 w3-center w3-grey">5</div>
<div class = "w3-col m1 w3-center">6</div>
<div class = "w3-col m1 w3-center w3-grey">7</div>
<div class = "w3-col m1 w3-center">8</div>
<div class = "w3-col m1 w3-center w3-grey">9</div>
<div class = "w3-col m1 w3-center">10</div>
<div class = "w3-col m1 w3-center w3-grey">11</div>
<div class = "w3-col m1 w3-center">12</div>
</div>
<div class = "w3-row">
<div class = "w3-col w3-container m4 l3 w3-yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</div>
<div class = "w3-col w3-container s4 m8 l9">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.