Vật chất hóa - Lưới
Materialize cung cấp một lưới đáp ứng chất lỏng 12 cột.
Nó sử dụng các lớp kiểu hàng và cột để xác định các hàng và cột tương ứng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | 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 | col Chỉ định một cột với các lớp con. |
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ỏ
Sau đâ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.No. | 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%. |
|
| s5 - s11 | ||
| 12 | 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
Sau đây là danh sách các kiểu cấp cột cho các thiết bị màn hình trung bình, điển hình là máy tính bảng.
| Sr.No. | 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%. |
|
| m5 - m11 | ||
| 12 | 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
Sau đâ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.No. | Tên & Mô tả Lớp học | |
|---|---|---|
| 1 | l1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
|
| 2 | l2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
|
| 3 | l3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
|
| 4 | l4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
|
| l5 - l11 | ||
| 12 | l12 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 = "row">
<div class = "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ụ
materialize_grids.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Grids Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class = "row">
<div class = "col m1 grey center">1</div>
<div class = "col m1 center">2</div>
<div class = "col m1 grey center">3</div>
<div class = "col m1 center">4</div>
<div class = "col m1 grey center">5</div>
<div class = "col m1 center">6</div>
<div class = "col m1 center grey">7</div>
<div class = "col m1 center">8</div>
<div class = "col m1 center grey">9</div>
<div class = "col m1 center">10</div>
<div class = "col m1 center grey">11</div>
<div class = "col m1 center">12</div>
</div>
<div class = "row">
<div class = "col m4 l3 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 = "col s4 m8 l9 grey">
<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ả.