Bootstrap ระบบกริด
Bootstrap's ระบบกริดช่วยให้ได้ถึง 12 คอลัมน์ทั่วหน้า
หากคุณไม่ต้องการที่จะใช้ทั้งหมด 12 คอลัมน์ทีคุณสามารถจัดกลุ่มคอลัมน์ร่วมกันเพื่อสร้างคอลัมน์กว้าง:
| ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 | ช่วงที่ 1 |
| ช่วง 4 | ช่วง 4 | ช่วง 4 | |||||||||
| ช่วง 4 | ช่วง 8 | ||||||||||
| ช่วง 6 | ช่วง 6 | ||||||||||
| ช่วง 12 | |||||||||||
Bootstrap's ระบบกริดมีการตอบสนองและคอลัมน์ที่จะจัดอีกครั้งขึ้นอยู่กับขนาดหน้าจอ: บนหน้าจอขนาดใหญ่ก็อาจจะดูดีขึ้นกับเนื้อหาที่จัดในคอลัมน์ที่สาม แต่บนหน้าจอเล็ก ๆ มันจะดีกว่าถ้ารายการเนื้อหาที่ถูกซ้อน ด้านบนของแต่ละอื่น ๆ
เคล็ดลับ: โปรดจำไว้ว่าคอลัมน์ตารางควรเพิ่มได้ถึงสิบสองสำหรับแถว ยิ่งไปกว่านั้นคอลัมน์จะสแต็คไม่ว่า viewport
เรียนกริด
Bootstrap ระบบกริดมีสี่ชั้นเรียน:
- xs (สำหรับโทรศัพท์)
- sm (สำหรับแท็บเล็ต)
- md (สำหรับเดสก์ท็)
- lg (สำหรับเดสก์ท็ขนาดใหญ่)
ชั้นเรียนดังกล่าวข้างต้นสามารถรวมกันเพื่อสร้างรูปแบบไดนามิกมากขึ้นและมีความยืดหยุ่น
เคล็ดลับ: เครื่องชั่งน้ำหนักแต่ละชั้นขึ้นดังนั้นหากคุณต้องการตั้งค่าความกว้างเหมือนกันสำหรับ xs และ sm คุณจะต้องระบุ xs
ตารางกฎระบบ
บาง Bootstrap กฎระบบกริด:
- แถวจะต้องอยู่ภายใน
.container(ความกว้างคงที่) หรือ.container-fluid(เต็มความกว้าง) สำหรับการจัดตำแหน่งที่เหมาะสมและ padding - ใช้แถวเพื่อสร้างกลุ่มแนวนอนของคอลัมน์
- เนื้อหาควรจะวางไว้ในคอลัมน์และคอลัมน์อาจจะเป็นแค่เด็กทันทีแถว
- ชั้นเรียนที่กำหนดไว้ล่วงหน้าเช่น
.rowและ.col-sm-4ที่มีอยู่ได้อย่างรวดเร็วทำให้รูปแบบตาราง - คอลัมน์สร้างท่อระบายน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่านช่องว่างภายใน ช่องว่างที่จะชดเชยในแถวสำหรับคอลัมน์แรกและครั้งสุดท้ายผ่านทางลบต่ออัตรากำไร
.rows - คอลัมน์ตารางจะถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่ 12 ที่คุณต้องการขยาย ยกตัวอย่างเช่นสามคอลัมน์เท่ากันจะใช้สาม
.col-sm-4
โครงสร้างพื้นฐานของ Bootstrap กริด
ต่อไปนี้เป็นโครงสร้างพื้นฐานของ Bootstrap ตาราง:
<div class="container">
<div
class="row">
<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 devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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 |
ตัวอย่าง
บทต่อไปแสดงให้เห็นตัวอย่างของระบบกริดสำหรับอุปกรณ์ที่แตกต่างกัน