Bootstrap 4 Grid System
Bootstrap 4 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 4 มีห้าคลาส:
.col-(อุปกรณ์ขนาดเล็กพิเศษ - ความกว้างของหน้าจอน้อยกว่า 576px).col-sm-(อุปกรณ์ขนาดเล็ก - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 576px).col-md-(อุปกรณ์ขนาดกลาง - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 768px).col-lg-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 992px).col-xl-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 1200px)
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ:แต่ละคลาสจะขยายขนาดขึ้น ดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ
smและmdคุณเพียงแค่ระบุsmเท่านั้น
กฎของระบบกริด
กฎของระบบตาราง Bootstrap 4 บางส่วน:
- ต้องวางแถวภายใน
.container(ความกว้างคงที่) หรือ.container-fluid(ความกว้างเต็ม) เพื่อการจัดตำแหน่งและการเติมที่เหมาะสม - ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน
- ควรวางเนื้อหาภายในคอลัมน์ และเฉพาะคอลัมน์เท่านั้นที่อาจเป็นแถวย่อยของแถว
- คลาสที่กำหนดไว้ล่วงหน้าเช่น
.rowและ.col-sm-4พร้อมสำหรับการสร้างเลย์เอาต์กริดอย่างรวดเร็ว - คอลัมน์สร้างรางน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่านการเติม ช่องว่างภายในนั้นถูกชดเชยเป็นแถวสำหรับคอลัมน์แรกและคอลัมน์สุดท้ายโดยใช้ระยะขอบติดลบ
.rows - คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่ 12 คอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่น สามคอลัมน์ที่เท่ากันจะใช้สาม
.col-sm-4 - ความกว้างของคอลัมน์เป็นเปอร์เซ็นต์ ดังนั้นจึงเป็นแบบไหลและขนาดสัมพันธ์กับองค์ประกอบหลักเสมอ
- ความแตกต่างที่ใหญ่ที่สุดระหว่าง Bootstrap 3 และ Bootstrap 4คือ Bootstrap 4 ใช้ flexbox แทนการลอย ข้อดีอย่างหนึ่งของ flexbox คือคอลัมน์กริดที่ไม่มีความกว้างที่ระบุจะจัดวางเป็น "คอลัมน์ที่มีความกว้างเท่ากัน" โดยอัตโนมัติ (และความสูงเท่ากัน) ตัวอย่าง: สามองค์ประกอบโดย
.col-smแต่ละองค์ประกอบจะมีความกว้างโดยอัตโนมัติ 33.33% จากเบรกพอยต์ขนาดเล็กขึ้นไป เคล็ดลับ:หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Flexbox คุณสามารถอ่านCSS Flexbox Tutorialของเรา
โปรดทราบว่า Flexbox ไม่รองรับใน IE9 และเวอร์ชันก่อนหน้า
หากคุณต้องการการสนับสนุน IE8-9 ให้ใช้Bootstrap 3ซึ่งเป็นเวอร์ชันที่เสถียรที่สุดของ Bootstrap และยังคงได้รับการสนับสนุนจากทีมงานสำหรับการแก้ไขจุดบกพร่องที่สำคัญและการเปลี่ยนแปลงเอกสาร อย่างไรก็ตาม จะไม่มีการเพิ่มคุณสมบัติใหม่เข้าไป
โครงสร้างพื้นฐานของ Bootstrap 4 Grid
ต่อไปนี้เป็นโครงสร้างพื้นฐานของตาราง Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
ตัวอย่างแรก: สร้างแถว ( <div
class="row">) จากนั้น เพิ่มจำนวนคอลัมน์ที่ต้องการ (แท็กที่มี
.col-*-*คลาสที่เหมาะสม) ดาวดวงแรก (*) แสดงถึงการตอบสนอง: sm, md, lg หรือ xl ในขณะที่ดาวดวงที่สองแสดงถึงตัวเลข ซึ่งควรรวมกันได้มากถึง 12 สำหรับแต่ละแถว
ตัวอย่างที่สอง: แทนที่จะเพิ่มตัวเลขให้กับแต่ละcolให้ bootstrap จัดการเลย์เอาต์ เพื่อสร้างคอลัมน์ที่มีความกว้างเท่ากัน: สอง"col"องค์ประกอบ = ความกว้าง 50% สำหรับแต่ละคอลัมน์ สาม cols = ความกว้าง 33.33% สำหรับแต่ละคอลัมน์ สี่ cols = ความกว้าง 25% เป็นต้น คุณยังสามารถใช้.col-sm|md|lg|xlเพื่อทำให้คอลัมน์ตอบสนองได้
ตัวเลือกกริด
ตารางต่อไปนี้สรุปว่าระบบกริด Bootstrap 4 ทำงานอย่างไรในหน้าจอขนาดต่างๆ:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| 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) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
ตัวอย่าง
บทต่อไปจะแสดงตัวอย่างของระบบกริดสำหรับอุปกรณ์ต่างๆ และความกว้างของหน้าจอ:
- เรียงซ้อนเป็นแนวนอน
- เลย์เอาต์ขนาดเล็กพิเศษ
- อุปกรณ์ขนาดเล็ก
- อุปกรณ์ขนาดกลาง
- อุปกรณ์ขนาดใหญ่
- อุปกรณ์ขนาดใหญ่พิเศษ
- ตัวอย่างกริดเพิ่มเติม