W3.CSS Responsive Fluid Grid
ตารางตอบสนอง
W3.CSS รองรับตารางของเหลวที่ตอบสนอง 12 คอลัมน์
ปรับขนาดหน้าเห็นผล!
ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 4 บนหน้าจอขนาดกลางและ 3 บนหน้าจอขนาดใหญ่
ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 8 บนหน้าจอขนาดกลางและ 9 บนหน้าจอขนาดใหญ่
ตัวอย่าง
<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>
แถวตอบสนอง
ระบบกริดของ W3.CSS ตอบสนองได้ คอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติตามขนาดหน้าจอ: บนหน้าจอขนาดใหญ่ เนื้อหาอาจดูดีกว่าเมื่อจัดเป็นสามคอลัมน์ แต่ในหน้าจอขนาดเล็ก อาจดีกว่าถ้าเนื้อหาวางซ้อนกัน
ระดับ | คำอธิบาย |
---|---|
w3-แถว | คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง ไม่มีการเติม |
w3-row-padding | คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง โดยมีช่องว่างภายใน 8px ด้านซ้ายและขวา |
w3-col | กำหนดหนึ่งคอลัมน์ในตารางตอบสนอง 12 คอลัมน์ |
w3-col มีคลาสย่อยดังต่อไปนี้:
คอลัมน์สำหรับหน้าจอขนาดเล็ก (สมาร์ทโฟนทั่วไป):
ระดับ | คำอธิบาย |
---|---|
s1 | กำหนด 1 จาก 12 คอลัมน์ (กว้าง:08.33%) สำหรับหน้าจอขนาดเล็ก |
s2 | กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดเล็ก |
s3 | กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดเล็ก |
s4 | กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดเล็ก |
s5-s11 | |
s12 | กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดเล็ก |
คอลัมน์สำหรับหน้าจอขนาดกลาง (แท็บเล็ตทั่วไป):
ระดับ | คำอธิบาย |
---|---|
m1 | กำหนด 1 จาก 12 คอลัมน์ (ความกว้าง:08.33%) สำหรับหน้าจอขนาดกลาง |
m2 | กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดกลาง |
m3 | กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดกลาง |
m4 | กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดกลาง |
m5-m11 | |
m12 | กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดกลาง |
คอลัมน์สำหรับหน้าจอขนาดใหญ่ (แล็ปท็อปและเดสก์ท็อปทั่วไป):
ระดับ | คำอธิบาย |
---|---|
l1 | กำหนด 1 จาก 12 คอลัมน์ (ความกว้าง:08.33%) สำหรับหน้าจอขนาดใหญ่ |
l2 | กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดใหญ่ |
l3 | กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดใหญ่ |
l4 | กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดใหญ่ |
l5-l11 | |
l12 | กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดใหญ่) |
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
แต่ละคลาสจะขยายขนาดขึ้น ดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับหน้าจอขนาดเล็ก กลาง และใหญ่ คุณจะต้องระบุคลาสขนาดเล็ก เท่านั้น และถ้าคุณต้องการความกว้างเท่ากันบนหน้าจอขนาดกลางและขนาดใหญ่ คุณจะต้องระบุระดับกลางเท่านั้น
อย่างไรก็ตาม หากคุณใช้เฉพาะคลาสขนาดกลางและ/หรือขนาดใหญ่ ความกว้างจะเปลี่ยนเป็น 100% บนหน้าจอขนาดเล็กเสมอ
หมายเหตุ:จำนวนคอลัมน์ควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว (6+6, 3+3+6, 9+3 ฯลฯ)!
สองคอลัมน์เท่ากัน
สองคอลัมน์ที่มีความกว้างเท่ากัน (50%/50%) ในทุกขนาดหน้าจอ:
s6
s6
ตัวอย่าง
<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>
สองคอลัมน์ไม่เท่ากัน
สองคอลัมน์ที่มีความกว้างไม่เท่ากัน (25%/75%) ในทุกขนาดหน้าจอ:
s3
s9
ตัวอย่าง
<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>
สามคอลัมน์เท่ากัน
สามคอลัมน์ที่มีความกว้างเท่ากัน (33.3%/33.3%/33.3%) ในทุกขนาดหน้าจอ:
s4
s4
s4
ตัวอย่าง
<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>
สามคอลัมน์ไม่เท่ากัน
คอลัมน์ความกว้างต่างๆ สามคอลัมน์ (25%/50%/25%) บนแท็บเล็ต แล็ปท็อป และเดสก์ท็อป บนโทรศัพท์มือถือ คอลัมน์จะซ้อนกันโดยอัตโนมัติ (ความกว้าง 100%):
m3
m6
m3
ตัวอย่าง
<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>
หมายเหตุ:ตัวอย่างนี้เหมือนกับการใช้ w3-quarter (m3) w3-half (m6) w3-quarter (m3) ซึ่งคุณได้เรียนรู้ในบทที่ตอบสนองของ W3.CSS
หกคอลัมน์
หกคอลัมน์ที่มีความกว้างเท่ากัน (แต่ละ 16%) บนแท็บเล็ต แล็ปท็อป และเดสก์ท็อป บนโทรศัพท์มือถือ คอลัมน์จะซ้อนกันโดยอัตโนมัติ (ความกว้าง 100%):
m2
m2
m2
m2
m2
m2
ตัวอย่าง
<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>
ผสม: มือถือและแล็ปท็อป
คุณสามารถรวมคลาสเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นได้ ตัวอย่างนี้จะสร้างเค้าโครงสองคอลัมน์โดยแบ่งเป็น 83.34%/16.66% (l10, l2) บนหน้าจอขนาดใหญ่ และแบ่ง 50%/50% (s6, s6) บนหน้าจอขนาดเล็ก:
l10 s6
l2 s6
ตัวอย่าง
<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>
ผสม: มือถือ แท็บเล็ต และแล็ปท็อป
ตัวอย่างนี้จะสร้างเค้าโครงสามคอลัมน์โดยแบ่ง 25%/58.34%/16.66% (l3, l7, l2) บนหน้าจอขนาดใหญ่, 50%/25%/25% (m6, m3, m3) แยกบนหน้าจอขนาดกลางและ 33.3%/33.3%/33.3% (s4, s4, s4)แยกบนหน้าจอขนาดเล็ก:
l3 m6 s4
l7 m3 s4
l2 m3 s4
ตัวอย่าง
<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>
ความแตกต่างระหว่าง w3-row และ w3-row-padding
คลาส w3-row กำหนดคอนเทนเนอร์แบบไม่มี padded ในขณะที่คลาส w3-row-padding จะเพิ่มการเติมด้านซ้ายและขวา 8px ให้กับแต่ละคอลัมน์:
w3-แถว:
w3-row-padding:
ตัวอย่าง
<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>
ใช้ w3-rest
คลาสw3-restเป็นคลาสที่ทรงพลังและยืดหยุ่นซึ่งจะใช้สิ่งที่เหลืออยู่ของคอลัมน์กริด
150px
พักผ่อน
75px
พักผ่อน
100px
100px
พักผ่อน
หนึ่งในสี่
80px
พักผ่อน
หนึ่งในสี่
หนึ่งในสี่
หนึ่งในสี่
35%
พักผ่อน
ตัวอย่างการใช้ rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
องค์ประกอบที่ใช้ class="w3-rest" ต้องเป็นองค์ประกอบสุดท้ายในซอร์สโค้ดเสมอ
ใช้เปอร์เซ็นต์
ใช้คุณสมบัติความกว้าง CSS เพื่อกำหนดความกว้างเฉพาะของคอลัมน์
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
ตัวอย่าง
<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>