มือถือ jQuery เค้าโครงกริด
jQuery มือถือให้ชุดของรูปแบบคอลัมน์ CSS ที่ใช้ อย่างไรก็ตามรูปแบบคอลัมน์ไม่แนะนำให้ใช้โดยทั่วไปบนโทรศัพท์มือถือเนื่องจากความกว้างหน้าจอมือถือของ
แต่มีบางครั้งคุณต้องการตำแหน่งองค์ประกอบขนาดเล็กเช่นปุ่มลูกศรหรือแท็บด้านข้างราวกับว่ามันเป็นในตาราง จากนั้นคอลัมน์ที่สมบูรณ์แบบ
คอลัมน์ในตารางมีความกว้างเท่ากัน (และ 100% กว้างทั้งหมด) โดยไม่มี border, background, margin หรือ padding
มีห้ากริดรูปแบบที่สามารถนำมาใช้:
| ชั้นกริด | คอลัมน์ | ความกว้างของคอลัมน์ | สอดคล้องกับ | ตัวอย่าง |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
ภายในคอนเทนเนอร์คอลัมน์องค์ประกอบของเด็กสามารถมีระดับ ui-block-a|b|c|d|e ขึ้นอยู่กับจำนวนของคอลัมน์ คอลัมน์จะลอยด้านข้าง
ตัวอย่างที่ 1: สำหรับ UI-ตารางชั้น (ซึ่งเป็นรูปแบบสองคอลัมน์) คุณต้องระบุสององค์ประกอบลูกของ ui-block-a และ ui-block-b
ตัวอย่างที่ 2: สำหรับ ui-grid-b (รูปแบบสามคอลัมน์), เพิ่มสามองค์ประกอบลูกของ ui-block-a, ui-block-b และ ui-block-c
ปรับแต่งกริด
คุณสามารถปรับแต่งบล็อกคอลัมน์ของคุณโดยใช้ CSS:
ตัวอย่าง
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
ลองตัวเอง» นอกจากนี้คุณยังสามารถปรับแต่งบล็อกของคุณโดยใช้รูปแบบอินไลน์:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
หลายแถว
นอกจากนี้ยังเป็นไปได้ที่จะมีหลายแถวภายในคอลัมน์ของคุณ
หมายเหตุ: ui-block-a-class มักจะสร้างบรรทัดใหม่:
ตัวอย่าง
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
ลองตัวเอง» กริดที่ตอบสนองต่อ
บนหน้าจอขนาดเล็กก็จะไม่แนะนำให้มีปุ่มมากเกินไปมีข้อความด้านโดยด้านหนึ่งแถว - เป็นข้อความที่อาจได้รับสั้นลง
สำหรับกริดตอบสนองเพิ่มระดับ UI ตอบสนองกับภาชนะบรรจุ: