บทช่วยสอน jQuery กริดมือถือ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ มือถือ jQuery ตารางเค้าโครง,ตารางที่กำหนดเอง,ตัวอย่าง,หลายสาย,ตัวอย่าง,ตารางที่ตอบสนองต่อ,ตัวอย่าง,
jQuery มือถือให้รายละเอียดของรูปแบบ CSS ที่ใช้ อย่างไรก็ตามบนอุปกรณ์มือถือพิจารณาความกว้างหน้าจอของโทรศัพท์แคบโดยทั่วไปเราไม่แนะนำให้ใช้รูปแบบคอลัมน์แยก
แต่บางครั้งคุณต้องการองค์ประกอบขนาดเล็ก (เช่นปุ่มลูกศรหรือแท็บ) จะถูกจัดเรียงเคียงข้างกันเหมือนในตาราง ในกรณีนี้ก็จะแนะนำให้ใช้รูปแบบย่อยคอลัมน์
คอลัมน์ตารางมีความกว้างเท่ากัน (รวม 100%) ไม่มีเส้นขอบ, พื้นหลัง, ขอบหรือ padding
มีรูปแบบที่สี่ตารางที่มีอยู่:
ระดับกริด | แถว | ความกว้างของคอลัมน์ | จดหมาย | ตัวอย่าง |
---|---|---|---|---|
UI-ตารางเดี่ยว | 1 | 100% | UI บล็อก-A | ความพยายาม |
UI ตาราง-A | 2 | 50% / 50% | UI-บล็อก a | b | ความพยายาม |
UI ตาราง-B | 3 | 33% / 33% / 33% | UI บล็อก-A | B | C | ความพยายาม |
UI ตาราง-C | 4 | 25% / 25% / 25% / 25% | UI บล็อก-A | B | C | D | ความพยายาม |
UI ตาราง-D | 5 | 20% / 20% / 20% / 20% / 20% | UI บล็อก-A | B | C | D | E | ความพยายาม |
ในภาชนะบรรจุที่คอลัมน์องค์ประกอบย่อยได้เรียนเป็น UI บล็อก-A | B | C | D | E ขึ้นอยู่กับจำนวนของคอลัมน์ ลอยด้านข้างแถว ตัวอย่างที่ 1: การเรียนของ UI ตาราง-A (สองรูปแบบ) คุณต้องระบุ UI-บล็อกและ UI บล็อก-B ของทั้งสององค์ประกอบย่อย ตัวอย่างที่ 2: การเรียนของ UI ตาราง-B (สามรูปแบบ) คุณต้องเพิ่ม UI บล็อก-A-UI บล็อก-B และ UI บล็อก-C ของทั้งสามองค์ประกอบย่อย |
โดยใช้ CSS คุณสามารถปรับแต่งบล็อกคอลัมน์:
นอกจากนี้คุณยังสามารถปรับแต่งการใช้บล็อกรูปแบบนี้:
<div class="ui-block-a" style="border: 1px solid black;"><span>Textth</span></div>
ในคอลัมน์คุณยังสามารถมีหลายบรรทัด
หมายเหตุ: UI บล็อก-a-ระดับมักจะสร้างบรรทัดใหม่:
ในหน้าจอขนาดเล็กมากเกินไปจะไม่แนะนำในด้านของแถวโดยปุ่มด้านข้าง (ข้อความสั้นลง)
เราสร้างตารางที่ตอบสนองต่อการใช้งานในภาชนะประเภท UI ตอบสนอง: