jQuery กริดมือถือ
มือถือ 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 คุณสามารถปรับแต่งบล็อกคอลัมน์:
ตัวอย่าง
<style>
.ui บล็อก-A, .ui บล็อก-B .ui บล็อก-C {
สีพื้นหลัง: lightgray;
ชายแดน: 1px ของแข็งสีดำ
ความสูง: 100px;
font-weight: หนา;
text-align: ศูนย์;
padding: 30px;
}
</ style>
.ui บล็อก-A, .ui บล็อก-B .ui บล็อก-C {
สีพื้นหลัง: lightgray;
ชายแดน: 1px ของแข็งสีดำ
ความสูง: 100px;
font-weight: หนา;
text-align: ศูนย์;
padding: 30px;
}
</ style>
ลอง»
นอกจากนี้คุณยังสามารถปรับแต่งการใช้บล็อกรูปแบบนี้:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
หลายสาย
ในคอลัมน์คุณยังสามารถมีหลายบรรทัด
หมายเหตุ: UI บล็อก-a-ระดับมักจะสร้างบรรทัดใหม่:
ตัวอย่าง
<ระดับ Div = "UI ตาราง-B">
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-B"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-C"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-B"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
</ div>
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-B"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-C"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-B"> <span> ข้อความ </ span> </ div>
<ระดับ Div = "UI บล็อก-A"> <span> บางข้อความ </ span> </ div>
</ div>
ลอง»
ตารางที่ตอบสนองต่อ
ในหน้าจอขนาดเล็กมากเกินไปจะไม่แนะนำในด้านของแถวโดยปุ่มด้านข้าง (ข้อความสั้นลง)
เราสร้างตารางที่ตอบสนองต่อการใช้งานในภาชนะประเภท UI ตอบสนอง: