เป็นรูปธรรม - กริด
Materialize ให้ตารางตอบสนองของไหล 12 คอลัมน์
ใช้คลาสสไตล์แถวและคอลัมน์เพื่อกำหนดแถวและคอลัมน์ตามลำดับ
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | row ระบุคอนเทนเนอร์ที่ไม่มีช่องว่างภายในที่จะใช้สำหรับคอลัมน์ที่ตอบสนอง คลาสนี้จำเป็นสำหรับคลาสที่ตอบสนองเพื่อตอบสนองอย่างเต็มที่ |
| 2 | col ระบุคอลัมน์ที่มีคลาสย่อย |
col มีคลาสย่อยหลายคลาสสำหรับหน้าจอประเภทต่างๆ
คอลัมน์สำหรับอุปกรณ์หน้าจอขนาดเล็ก
ต่อไปนี้เป็นรายการสไตล์ระดับคอลัมน์สำหรับอุปกรณ์หน้าจอขนาดเล็กซึ่งโดยทั่วไปจะเป็นสมาร์ทโฟน
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย | |
|---|---|---|
| 1 | s1 กำหนด 1 จาก 12 คอลัมน์โดยมีความกว้างเป็น 08.33% |
|
| 2 | s2 กำหนด 2 จาก 12 คอลัมน์โดยมีความกว้าง 16.66% |
|
| 3 | s3 กำหนด 3 จาก 12 คอลัมน์โดยมีความกว้าง 25.00% |
|
| 4 | s4 กำหนด 4 จาก 12 คอลัมน์โดยมีความกว้าง 33.33% |
|
| s5 - s11 | ||
| 12 | s12 กำหนด 12 จาก 12 คอลัมน์โดยมีความกว้าง 100% คลาสเริ่มต้นสำหรับโทรศัพท์หน้าจอขนาดเล็ก |
|
คอลัมน์สำหรับอุปกรณ์หน้าจอขนาดกลาง
ต่อไปนี้เป็นรายการสไตล์ระดับคอลัมน์สำหรับอุปกรณ์หน้าจอขนาดกลางโดยทั่วไปคือแท็บเล็ต
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย | |
|---|---|---|
| 1 | m1 กำหนด 1 จาก 12 คอลัมน์ที่มีความกว้างเป็น 08.33% |
|
| 2 | m2 กำหนด 2 จาก 12 คอลัมน์โดยมีความกว้าง 16.66% |
|
| 3 | m3 กำหนด 3 จาก 12 คอลัมน์โดยมีความกว้าง 25.00% |
|
| 4 | m4 กำหนด 4 จาก 12 คอลัมน์โดยมีความกว้าง 33.33% |
|
| m5 - m11 | ||
| 12 | m12 กำหนด 12 จาก 12 คอลัมน์โดยมีความกว้าง 100% คลาสเริ่มต้นสำหรับโทรศัพท์หน้าจอขนาดกลาง |
|
คอลัมน์สำหรับอุปกรณ์หน้าจอขนาดใหญ่
ต่อไปนี้เป็นรายการสไตล์ระดับคอลัมน์สำหรับอุปกรณ์หน้าจอขนาดใหญ่โดยทั่วไปคือแล็ปท็อป
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย | |
|---|---|---|
| 1 | l1 กำหนด 1 จาก 12 คอลัมน์โดยมีความกว้างเป็น 08.33% |
|
| 2 | l2 กำหนด 2 จาก 12 คอลัมน์โดยมีความกว้าง 16.66% |
|
| 3 | l3 กำหนด 3 จาก 12 คอลัมน์โดยมีความกว้าง 25.00% |
|
| 4 | l4 กำหนด 4 จาก 12 คอลัมน์โดยมีความกว้าง 33.33% |
|
| l5 - l11 | ||
| 12 | l12 กำหนด 12 จาก 12 คอลัมน์โดยมีความกว้าง 100% คลาสเริ่มต้นสำหรับอุปกรณ์หน้าจอขนาดใหญ่ |
|
การใช้งาน
แต่ละคลาสย่อยจะกำหนดจำนวนคอลัมน์ของกริดที่จะใช้ตามประเภทของอุปกรณ์ พิจารณาตัวอย่าง HTML ต่อไปนี้
<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>คอลัมน์เริ่มต้นที่จะใช้คือ 12 บนอุปกรณ์หากไม่มีการกล่าวถึงคลาสย่อยในแอตทริบิวต์คลาสขององค์ประกอบ HTML
ตัวอย่าง
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>ผลลัพธ์
ตรวจสอบผลลัพธ์