Bootstrap 4 กริด
Bootstrap 4 Grid System
ระบบกริดของ Bootstrap สร้างขึ้นด้วย flexbox และอนุญาตให้มีคอลัมน์มากถึง 12 คอลัมน์ทั่วทั้งหน้า
หากคุณไม่ต้องการใช้ทั้ง 12 คอลัมน์แยกกัน คุณสามารถจัดกลุ่มคอลัมน์เข้าด้วยกันเพื่อสร้างคอลัมน์ที่กว้างขึ้นได้:
| ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 |
| ช่วง 4 | ช่วง 4 | ช่วง 4 | |||||||||
| ช่วง 4 | ช่วง8 | ||||||||||
| ช่วง 6 | ช่วง 6 | ||||||||||
| ช่วง 12 | |||||||||||
ระบบกริดตอบสนอง และคอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติขึ้นอยู่กับขนาดหน้าจอ
ตรวจสอบให้แน่ใจว่าผลรวมรวมกันได้ไม่เกิน 12 หรือน้อยกว่า (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์)
คลาสกริด
ระบบตาราง Bootstrap 4 มีห้าคลาส:
.col-(อุปกรณ์ขนาดเล็กพิเศษ - ความกว้างของหน้าจอน้อยกว่า 576px).col-sm-(อุปกรณ์ขนาดเล็ก - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 576px).col-md-(อุปกรณ์ขนาดกลาง - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 768px).col-lg-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 992px).col-xl-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 1200px)
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ:แต่ละคลาสจะขยายขนาดขึ้น ดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ
smและmdคุณเพียงแค่ระบุsmเท่านั้น
โครงสร้างพื้นฐานของ 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>
<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>
ตัวอย่างแรก: สร้างแถว ( <div
class="row">) จากนั้น เพิ่มจำนวนคอลัมน์ที่ต้องการ (แท็กที่มี
.col-*-*คลาสที่เหมาะสม) ดาวดวงแรก (*) แสดงถึงการตอบสนอง: sm, md, lg หรือ xl ในขณะที่ดาวดวงที่สองแสดงถึงตัวเลข ซึ่งควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว
ตัวอย่างที่สอง: แทนที่จะเพิ่มตัวเลขให้กับแต่ละcolให้ bootstrap จัดการเลย์เอาต์ เพื่อสร้างคอลัมน์ที่มีความกว้างเท่ากัน: สอง"col"องค์ประกอบ = ความกว้าง 50% สำหรับแต่ละคอลัมน์ สามสี = ความกว้าง 33.33% สำหรับแต่ละคอลัมน์ สี่ cols = ความกว้าง 25% เป็นต้น คุณยังสามารถใช้.col-sm|md|lg|xlเพื่อทำให้คอลัมน์ตอบสนองได้
ด้านล่างนี้ เราได้รวบรวมตัวอย่างเค้าโครงตาราง Bootstrap 4 พื้นฐานบางส่วน
สามคอลัมน์เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ บนอุปกรณ์ทั้งหมดและความกว้างของหน้าจอ:
ตัวอย่าง
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
คอลัมน์ตอบสนอง
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างสี่คอลัมน์ที่มีความกว้างเท่ากันโดยเริ่มต้นที่แท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่พิเศษ บนโทรศัพท์มือถือหรือหน้าจอที่มีความกว้างน้อยกว่า 576px คอลัมน์จะซ้อนกันโดยอัตโนมัติ :
ตัวอย่าง
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
สองคอลัมน์ตอบสนองที่ไม่เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ความกว้างต่างๆ สองคอลัมน์โดยเริ่มต้นที่แท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปพิเศษขนาดใหญ่:
ตัวอย่าง
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
เคล็ดลับ:คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับตาราง Bootstrap 4 ในภายหลังในบทช่วยสอนนี้