ระบบกริดของ Bootstrap สร้างขึ้นด้วย flexbox และอนุญาตให้มีคอลัมน์ได้สูงสุด 12 คอลัมน์ทั่วทั้งหน้า
หากคุณไม่ต้องการใช้ทั้ง 12 คอลัมน์แยกกัน คุณสามารถจัดกลุ่มคอลัมน์เข้าด้วยกันเพื่อสร้างคอลัมน์ที่กว้างขึ้นได้:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
ระบบกริดตอบสนอง และคอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติตามขนาดหน้าจอ
ตรวจสอบให้แน่ใจว่าผลรวมรวมกันได้ไม่เกิน 12 หรือน้อยกว่า (คุณไม่จำเป็นต้องทำเช่นนั้น ใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์)
ระบบกริด Bootstrap 5 มีหกคลาส:
.col- (อุปกรณ์ขนาดเล็กพิเศษ - ความกว้างหน้าจอน้อยกว่า 576px)
.col-sm- (อุปกรณ์ขนาดเล็ก - ความกว้างหน้าจอเท่ากับหรือมากกว่า 576px)
.col-md- (อุปกรณ์ขนาดกลาง - ความกว้างหน้าจอเท่ากับหรือมากกว่า 768px)
.col-lg- (อุปกรณ์ขนาดใหญ่ - ความกว้างหน้าจอเท่ากับหรือมากกว่า 992px)
.col-xl- (อุปกรณ์ xlarge - ความกว้างหน้าจอเท่ากับหรือมากกว่า 1200px)
.col-xxl- (อุปกรณ์ xxlarge - ความกว้างหน้าจอเท่ากับหรือมากกว่า 1400px)
คลาสข้างต้นสามารถนำมารวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ: แต่ละคลาสจะขยายขนาดขึ้น ดังนั้น หากคุณต้องการตั้งค่าความกว้างเท่ากัน sm และ md คุณจะต้องระบุ sm.
ต่อไปนี้เป็นโครงสร้างพื้นฐานของตาราง Bootstrap 5:
<!-- 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 หรือ xxl ในขณะที่ดาวดวงที่สองแทนตัวเลข ซึ่งควรบวกกันได้สูงสุด 12 ดวงสำหรับแต่ละแถว
ตัวอย่างที่สอง: แทนที่จะเพิ่มตัวเลขลงในแต่ละ col ให้บูตสแตรปจัดการเค้าโครง เพื่อสร้างคอลัมน์ที่มีความกว้างเท่ากัน: สอง " องค์ประกอบ col"=ความกว้าง 50% สำหรับแต่ละคอลัมน์ ในขณะที่สามคอลัมน์=ความกว้าง 33.33% สำหรับแต่ละคอลัมน์ สี่คอลัมน์=ความกว้าง 25% เป็นต้น คุณยังสามารถใช้ .col-sm|md|lg|xl|xxl เพื่อทำให้คอลัมน์ตอบสนองได้
ด้านล่างนี้เราได้รวบรวมตัวอย่างเค้าโครงตาราง Bootstrap 5 พื้นฐานไว้แล้ว
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ อุปกรณ์และความกว้างหน้าจอ:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
ตัวอย่างต่อไปนี้แสดงวิธีสร้างคอลัมน์ที่มีความกว้างเท่ากันสี่คอลัมน์โดยเริ่มต้นที่แท็บเล็ตและปรับขนาดเป็น เดสก์ท็อปขนาดใหญ่พิเศษ บนโทรศัพท์มือถือหรือหน้าจอที่มีความกว้างน้อยกว่า 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>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ที่มีความกว้างต่างๆ สองคอลัมน์โดยเริ่มต้นที่ แท็บเล็ตและการปรับขนาดเป็นเดสก์ท็อปพิเศษขนาดใหญ่:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
เคล็ดลับ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับระบบกริดในภายหลังในบทช่วยสอนนี้