มูลนิธิบล็อกตาราง
ตารางที่ยิ่งใหญ่สำหรับการแบ่งปันเนื้อหาของหน้า: ยกตัวอย่างเช่นหนึ่งบรรทัดเพื่อแสดงสี่ภาพไม่ว่าสิ่งที่มีความกว้างเฉลี่ยของหน้าจอเป็นสิ่งจำเป็น
คุณสามารถใช้ <ul> องค์ประกอบบวก .small|medium|large-block-grid- num grid- NUM ระดับในการสร้างตารางขนาดใหญ่ NUM เป็นจำนวนที่ใช้ในการระบุค่าเฉลี่ย:
ตัวอย่าง
<ระดับ Ul = "เล็กบล็อก -grid-3">
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
<li> <img src = " paris.jpg" alt = "ปารีส"> </ li>
<li> <img src = " sanfran.jpg" alt = "ซานฟรานซิ"> </ li>
</ ul>
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
<li> <img src = " paris.jpg" alt = "ปารีส"> </ li>
<li> <img src = " sanfran.jpg" alt = "ซานฟรานซิ"> </ li>
</ ul>
ลอง»
อีกตัวอย่างหนึ่งใช้วรรค:
ตัวอย่าง
<ระดับ Ul = "เล็กบล็อก -grid-3">
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
</ ul>
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
<li> <p> เพียง ข้อความตัวอย่างง่ายๆ ... </ p> </ li>
</ ul>
ลอง»
แสดงหมายเลขที่แตกต่างกันขนาดแตกต่างกัน
โดยการเพิ่มบล็อกตารางหลายชั้นเรียนขนาดแตกต่างกันสามารถตั้งค่าการแสดงจำนวนที่แตกต่างกันของบล็อก:
ตัวอย่าง
<ul class = "บล็อกขนาดเล็ก -grid-2 ขนาดบล็อกตารางที่ 3 บล็อกขนาดใหญ่ตาราง-4">
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
<li> <img src = " paris.jpg" alt = "ปารีส"> </ li>
<li> <img src = " sanfran.jpg" alt = "ซานฟรานซิ"> </ li>
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
</ ul>
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
<li> <img src = " paris.jpg" alt = "ปารีส"> </ li>
<li> <img src = " sanfran.jpg" alt = "ซานฟรานซิ"> </ li>
<li> <img src = " newyork.jpg" alt = "นิวยอร์ก"> </ li>
</ ul>
ลอง»