Bootstrap Grid System
Bootstrap Grid System
ระบบกริดของ Bootstrap อนุญาตให้มีคอลัมน์ถึง 12 คอลัมน์ทั่วทั้งหน้า
หากคุณไม่ต้องการใช้ทั้ง 12 คอลัมน์แยกกัน คุณสามารถจัดกลุ่มคอลัมน์เข้าด้วยกันเพื่อสร้างคอลัมน์ที่กว้างขึ้นได้:
| ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 |
| ช่วง 4 | ช่วง 4 | ช่วง 4 | |||||||||
| ช่วง 4 | ช่วง8 | ||||||||||
| ช่วง 6 | ช่วง 6 | ||||||||||
| ช่วง 12 | |||||||||||
ระบบกริดของ Bootstrap นั้นตอบสนอง และคอลัมน์จะจัดเรียงใหม่ตามขนาดหน้าจอ: บนหน้าจอขนาดใหญ่ เนื้อหาอาจดูดีกว่าเมื่อจัดเป็นสามคอลัมน์ แต่บนหน้าจอขนาดเล็ก จะดีกว่าหากรายการเนื้อหาถูกเรียงซ้อนกัน ด้านบนของกันและกัน
เคล็ดลับ:จำไว้ว่าคอลัมน์กริดควรรวมกันเป็นสิบสองแถว ยิ่งไปกว่านั้น คอลัมน์จะสแต็กไม่ว่าวิวพอร์ตจะเป็นอย่างไรก็ตาม
คลาสกริด
ระบบกริด Bootstrap มีสี่คลาส:
xs(สำหรับโทรศัพท์ - หน้าจอกว้างน้อยกว่า 768px)sm(สำหรับแท็บเล็ต - หน้าจอกว้างเท่ากับหรือมากกว่า 768px)md(สำหรับแล็ปท็อปขนาดเล็ก - หน้าจอกว้างเท่ากับหรือมากกว่า 992px)lg(สำหรับแล็ปท็อปและเดสก์ท็อป - หน้าจอกว้างเท่ากับหรือมากกว่า 1200px)
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ:แต่ละคลาสจะขยายขนาดขึ้น ดังนั้น หากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ xs และ sm คุณจะต้องระบุ xs เท่านั้น
กฎของระบบกริด
กฎบางอย่างของระบบตาราง Bootstrap:
- ต้องวางแถวภายใน
.container(ความกว้างคงที่) หรือ.container-fluid(ความกว้างเต็ม) เพื่อการจัดตำแหน่งและการเติมที่เหมาะสม - ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน
- ควรวางเนื้อหาภายในคอลัมน์ และเฉพาะคอลัมน์เท่านั้นที่อาจเป็นแถวย่อยของแถว
- คลาสที่กำหนดไว้ล่วงหน้าเช่น
.rowและ.col-sm-4พร้อมสำหรับการสร้างเลย์เอาต์กริดอย่างรวดเร็ว - คอลัมน์สร้างรางน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่านการเติม ช่องว่างภายในนั้นถูกชดเชยเป็นแถวสำหรับคอลัมน์แรกและคอลัมน์สุดท้ายโดยใช้ระยะขอบติดลบ
.rows - คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่ 12 คอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่น สามคอลัมน์ที่เท่ากันจะใช้สาม
.col-sm-4 - ความกว้างของคอลัมน์เป็นเปอร์เซ็นต์ ดังนั้นจึงเป็นแบบไหลและขนาดสัมพันธ์กับองค์ประกอบหลักเสมอ
โครงสร้างพื้นฐานของ Bootstrap Grid
ต่อไปนี้เป็นโครงสร้างพื้นฐานของตาราง Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
ดังนั้น ในการสร้างเค้าโครงที่คุณต้องการ ให้สร้างคอนเทนเนอร์ ( <div
class="container">) ถัดไป สร้างแถว ( <div
class="row">) จากนั้น เพิ่มจำนวนคอลัมน์ที่ต้องการ (แท็กที่มี
.col-*-*คลาสที่เหมาะสม) โปรดทราบว่าตัวเลขใน.col-*-*ควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว
ตัวเลือกกริด
ตารางต่อไปนี้สรุปว่าระบบกริด Bootstrap ทำงานอย่างไรในอุปกรณ์หลายเครื่อง:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
ตัวอย่าง
บทต่อไปจะแสดงตัวอย่างของระบบกริดสำหรับอุปกรณ์ต่างๆ: