ระบบกริดมูลนิธิ
มูลนิธิสำหรับระบบ 12 ตาราง
หากคุณไม่ได้มี 12 คุณสามารถผสานจำนวนของคอลัมน์สร้างชุดของความกว้างมากขึ้น
รากฐานของระบบกริดคือการตอบสนอง คอลัมน์จะปรับขนาดโดยอัตโนมัติตามขนาดของหน้าจอ บนหน้าจอขนาดใหญ่ก็อาจจะมีสามขนาดหน้าจอขนาดเล็กก็อาจจะเป็นสามแยกลำดับ
คอลัมน์ตาราง
ระบบกริดมูลนิธิมีสามคอลัมน์:
-
.small(ขั้วมือถือ) -
.medium(แท็บเล็ต) -
.large(อุปกรณ์คอมพิวเตอร์โน๊ตบุ๊คสก์ท็อป)
ชั้นเรียนดังกล่าวข้างต้นสามารถรวมกันเพื่อสร้างรูปแบบที่มีความยืดหยุ่นมากขึ้น
โครงสร้างพื้นฐานของตาราง
ต่อไปนี้เป็นมูลนิธิเช่นโครงสร้างตารางพื้นฐาน
ตัวอย่าง
<div class = "ขนาดเล็ก | กลาง | ใหญ่ NUM คอลัมน์"> </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก | กลาง | ใหญ่ NUM คอลัมน์"> </ div>
<div class = "ขนาดเล็ก | กลาง | ใหญ่ NUM คอลัมน์"> </ div>
<div class = "ขนาดเล็ก | กลาง | ใหญ่ NUM คอลัมน์"> </ div>
</ div>
<ระดับ Div = "แถว">
...
</ div>
ขั้นแรกให้สร้างแถว ( <div class="row"> ) นี่คือระดับของคอลัมน์แนวตั้ง แล้วเพิ่มจำนวนคอลัมน์อธิบาย small- num , medium- num และ large- num ระดับ หมายเหตุ: จำนวนคอลัมน์ num ต้องเพิ่มขึ้นถึง 12:
ตัวอย่าง
<div class = "ขนาดเล็ก 12 คอลัมน์"> .small-12 สีเหลือง </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 8 คอลัมน์"> .small-8 สีเบจ </ div>
<div class = "ขนาดเล็ก 4 คอลัมน์"> .small-4 สีเทา </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 9 ขนาดเล็ก 8 คอลัมน์"> .small-8 .large-9 สีชมพู </ div>
<div class = "ขนาดใหญ่ 3 ขนาดเล็ก 4 คอลัมน์"> .small-4 .large-3 สีส้ม </ div>
</ div>
ลอง»
ตัวอย่างเช่นบรรทัดแรกของ <div> ระดับ .small-12 ซึ่งจะสร้าง (กว้าง 100%) 12
บรรทัดที่สองสร้างสองคอลัมน์ .small-4 ความกว้าง 33.3%, .small-8 ความกว้างของ 66.6%
บรรทัดที่สามเราได้เพิ่มสองคอลัมน์พิเศษ ( .large-3 และ .large-9 ) ซึ่งหมายความว่าถ้าขนาดหน้าจอขนาดใหญ่คอลัมน์จะกลายเป็น 25% ( .large-3 ) และ 75% ( .large-9 Ratio) ของ นอกจากนี้เรายังระบุสัดส่วนของหน้าจอขนาดเล็กดังกล่าวข้างต้น% 33 ( .small-4 ) และ 66% ( .small-8 ) ชุดดังกล่าวสำหรับการแสดงผลหน้าจอที่แตกต่างกันจะมีประโยชน์มาก
ตัวเลือกกริด
ตารางต่อไปนี้สรุปมูลนิธิอธิบายระบบกริดบนอุปกรณ์หลาย:
| อุปกรณ์ขนาดเล็ก โทรศัพท์ (<40.0625em (640)) | อุปกรณ์ในระดับปานกลาง แท็บเล็ต (> = 40.0625em (640)) | อุปกรณ์ขนาดใหญ่ แล็ปท็อปและเดสก์ท็ (> = 64.0625em (1025px)) | |
|---|---|---|---|
| พฤติกรรมกริด | จะได้รับระดับของ | เริ่มที่จะยุบทำลายดังกล่าวข้างต้นในแนวนอน | เริ่มที่จะยุบทำลายดังกล่าวข้างต้นในแนวนอน |
| คำนำหน้าชั้นเรียน | .small- * | .medium- * | .large- * |
| จำนวนของชั้นเรียน | 12 | 12 | 12 |
| สามารถฝังตัว | ใช่ | ใช่ | ใช่ |
| สาขา | ใช่ | ใช่ | ใช่ |
| การเรียงลำดับคอลัมน์ | ใช่ | ใช่ | ใช่ |
จอไวด์สกรีน
ตารางสูงสุด ( .row ) 62.5rem กว้าง บนจอไวด์สกรีนเมื่อความกว้างมากกว่า 62.5rem คอลัมน์ไม่ได้ขยายความกว้างของหน้าแม้ว่าความกว้างที่ถูกกำหนดเป็น 100% แต่คุณสามารถตั้งค่าผ่านทาง CSS ความกว้างสูงสุด:
ถ้าคุณใช้การเริ่มต้นความกว้างสูงสุด แต่ต้องการสีพื้นหลังทั่วทั้งความกว้างของหน้าคุณสามารถใช้ .row ห่อภาชนะทั้งหมดและคุณจะต้องระบุสีพื้นหลัง:
ตัวอย่าง
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาดเล็ก 6 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;"> ขนาดเล็ก 6 </ div>
<ระดับ Div = "ขนาดเล็ก 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;"> ขนาดเล็ก 6 </ div>
</ div>
</ div>
ลอง»