การแบ่งคอลัมน์หน้าเว็บไซต์ด้วย Bootstrap

การแบ่งคอลัมน์หน้าเว็บไซต์ด้วย Bootstrap บทความนี้สอนการใช้ Bootstrap Framework สำหรับการแบ่งคอลัมน์หน้าเว็บไซต์ ผ่าน Grid System ซึ่งเป็นชุดคำสั่งสำหรับสร้าง row และ column ให้กับเว็บไซต์ โดยมีรายละเอียดดังนี้

ตัวอย่าง การแบ่งคอลัมน์หน้าเว็บไซต์ด้วย Bootstrap

1. ติดตั้ง Bootstrap Framework ผ่าน CDN โดยการคัดลอกลิงก์ด้านล่างวางไว้ในแท็ก head ซึ่งประกอบด้วยไฟล์ css และ js

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

2. เขียนโค้ดตามด้านล่างไว้ในแท็ก body

<style>
.column {
    text-align: center;
    background-color: aquamarine;
    border: solid 1px aliceblue;
    height: 150px;
    line-height: 9rem;    
}    
</style>

<div class="container">
    <div class="row">
        <div class="col-2 column">Left</div>
        <div class="col-8 column">Center</div>
        <div class="col-2 column">Right</div>
    </div>
</div>

ผลลัพธ์

การแบ่งคอลัมน์หน้าเว็บไซต์ด้วย Bootstrap แบบเริ่มต้นจะมี class ที่สำคัญทั้งหมด 3 คำสั่ง และรายละเอียดดังนี้

1. class container เป็น class ที่คลุม class row และ col-* ของ Bootstrap

2. class row จะคลุม class col-* เพราะ columns อยู่ใน rows

3. class col-* ใช้สำหรับสร้าง column โดย Grid System แบ่งได้สูงสุด 12 columns และน้อยสุดคือ 1 column ซึ่งความกว้างของแต่ละ columns จะถูกคำนวณอัตโนมัติตามขนาดพื้นที่

4. จากตัวอย่าง col-2 col-8 และ col-2 หมายความว่า สร้าง columns ทั้งหมด 3 columns โดยตัวเลขด้านหลัง col คือ 2 + 8 + 2 = 12 (ตามความหมายข้อ 3.) ซึ่ง 2 จะมีความกว้างน้อยกว่า 8 โดยความกว้าง Bootstrap จะกำหนดให้อัตโนมัติตามพื้นที่ container มีเพื่อให้รองรับ Web Responsive Design