ตารางที่ตอบสนองต่อ
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 แถว | กำหนดภาชนะ padding น้อยสำหรับคอลัมน์ที่ตอบสนองต่อ |
| W3 แถว-padding | กำหนดภาชนะเบาะสำหรับคอลัมน์ที่ตอบสนองต่อ |
| W3-Col | กำหนดคอลัมน์ที่มีการเรียนการย่อย |
W3-Col มีชั้นเรียนย่อยต่อไปนี้:
คอลัมน์สำหรับหน้าจอขนาดเล็ก (มาร์ทโฟนทั่วไป):
| ชั้น | ลักษณะ |
|---|---|
| S1 | กำหนด 1 of 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 of 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 of 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>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</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 ไตรมาส (M3) W3 ครึ่ง (M6) W3 ไตรมาส (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% (L8, L4) บนหน้าจอขนาดใหญ่และ 50% / 50% (S6, S6) แยกบนหน้าจอขนาดเล็ก:
L8 S6
L4 S6
ตัวอย่าง
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> ลองตัวเอง» ผสม: มือถือ, แท็บเล็ตและแล็ปท็อป
ตัวอย่างนี้จะผลิตรูปแบบสามคอลัมน์ที่มี A / 58.34% / 16.66% (L3, L7, L2) แยก 25% บนหน้าจอขนาดใหญ่ 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 l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> ลองตัวเอง» ความแตกต่างระหว่าง W3-W3 แถวและแถว-padding
ชั้น W3 แถวกำหนดภาชนะเบาะน้อยในขณะที่ระดับ W3 แถว-padding เพิ่มช่องว่างด้านซ้ายและขวาเพื่อ 8px แต่ละคอลัมน์:
W3 แถว:
W3 แถว-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_fjords.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_fjords.jpg"></div>
</div> ลองตัวเอง» โดยใช้ร้อยละ
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> ลองตัวเอง» ใช้ W3 ส่วนที่เหลือ
150px
ส่วนที่เหลือ
75px
ส่วนที่เหลือ
100px
100px
ส่วนที่เหลือ
ย่าน
80px
ส่วนที่เหลือ
ย่าน
ย่าน
ย่าน
35%
ส่วนที่เหลือ
ตัวอย่างการใช้ส่วนที่เหลือ
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> ลองตัวเอง»