เป็นรูปธรรม - กริด

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>

ผลลัพธ์

ตรวจสอบผลลัพธ์