ในบทความจะใช้กริก (Grid) ของ Bootstrap ซึ่งจะเป็นองค์ประกอบสำคัญที่เราสามารถนำไปใช้ประยุกต์ในจัดหน้าเว็บหรือจัดการโครงร่างของเว็บเพจของเราแบบ Responsive ให้รอบรับการแสดงผลในหน้าจอของอุปกรณ์อื่น ๆ ได้

การใช้งาน Grid เบื้องต้น

ใน Bootstrap การจัดโครงร่างหรือ Layout ของเพจนั้น ๆเพื่อให้รอบรับรูปแบบ Responsive ด้วยกริดที่คล้ายกับตาราง โดยมี 12 คอลัมน์ ซึ่งเราสามารถวางเนื้อหาของเว็บเพจลงในแต่ละช่องของกริด แต่ไม่จำเป็นต้องใส่เนื้อหาให้ครบทุกช่อง หรือใส่เนื้อหาที่มีขนาดไม่เท่ากันได้ ซึ่งบางกรณีอาจต้องใช้พื้นที่ของกริดมากกว่า 1 ช่อง เราสามารถขยายขนาดของกริดได้ตั้งแต่ 1 -12 คอลัมน์ของกริด หรือคล้ายกับโปรแกรม Excal คือให้ตารางมันรวมคอลลัมน์กัน

จากรูปภาพข้างบนในกริดจะใช้ col-x ในการจัดแบ่งหน้าของโครงร่างต่าง ๆ ซึ่ง x ก็คือขนาดของคอลัมน์นั้น ๆ ตัวอย่างเช่น col-6 คือคอลัมน์จะมีขนาดเท่ากับ 6 คอลัมน์ ส่วนลักษณะการนำไปใช้งาน ก็มี Class ที่ควรรู้จัก จะมีดังนี้

Class	คำอธิบาย
container	เป็น Class หลักที่ต้องกำหนดให้กับคอนเทนเนอร์ชั้นบนสุดของกริด แต่กรณีที่ระบุ Class นี้อาจจะไม่สัมพันธ์กับขนาดหน้าจอ
container-fluid	เป็น Class หลักที่ต้องกำหนดให้กับคอนเทนเนอร์ชั้นบนสุดของกริด กรณีที่ระบุ Class นี้ ขนาดหน้าจอจะมีความสัมพันธ์กับการเปลี่ยนแปลงขนาดหน้าจอ
row	กำหนดให้คอนเทนเนอร์ของแต่ละแถว
col-x	กำหนดให้คอลัมน์ให้มีขนาดความกว้างตามจำนวนคอลัมน์ที่ระบุ โดย x คือตัวเลข 1 ถึง 12
col	กำหนดให้คอลัมน์ ซึ่งใน Class นี้จะแบ่งคอลัมน์โดยอัตโนมัติ

ถ้าใช้ Class container และ container-fluid เราต้องเลือกใช้อันไหนอันหนึ่ง โดยลักษณะโครงสร้างพื้นฐานของกริด จะมีดังนี้

 <div class="container-fluid border bg-secondary text-center text-white" >
        <div class="row">
            <div class="col border">คอลัมน์ 1</div>
            <div class="col border">คอลัมน์ 2</div>
            <div class="col border">คอลัมน์ 3</div>
        </div>
 </div>

ผลลัพธ์ที่ได้

 หากเราต้องการผสามหรือยุบบางคอมลัมน์รวมกัน เราจะใช้ col-x แต่จะต้องไม่ลืมหลักการการใช้ของ col-x ที่ได้กล่าวข้างต้น

    <div class="container-fluid border bg-secondary text-center text-white mt-5" >
        <div class="row">
            <div class="col-4 border">col-4</div>
            <div class="col-4 border">col-4</div>
            <div class="col-4 border">col-4</div>
        </div>
        <div class="row">
            <div class="col-4 border">col-4</div>
            <div class="col-8 border">col-8</div>
        </div>
        <div class="row">
            <div class="col-2 border">col-2</div>
            <div class="col-5 border">col-5</div>
            <div class="col-5 border">col-5</div>
        </div>
    </div>

ผลลัพธ์ที่ได้

เราสามารถใช้ Class col-x กับ col ในแถบเดียวกันได้ โดยคอลัมน์ที่ต้องการระบุขนาดที่แน่นอนก็กำหนดด้วย col-x ส่วนคอลัมน์ที่ระบุด้วย col นั้นจะแบ่งส่วนของพื้นที่ของคอลัมน์ที่เหลือให้อัตโนมัติ ตัวอย่างเช่น

    <div class="container-fluid border bg-secondary text-center text-white mt-5" >
        <div class="row">
            <div class="col-4 border">col-4</div>
            <div class="col-2 border">col-2</div>
            <div class="col border">col</div>
        </div>
        <div class="row">
            <div class="col border">col</div>
            <div class="col-7 border">col-7</div>
        </div>
        <div class="row">
            <div class="col-5 border">col-5</div>
            <div class="col-3 border">col-3</div>
            <div class="col border">col</div>
            <div class="col-2 border">col-2</div>
        </div>
    </div>

ผลลัพธ์ที่ได้

 

ดังนั้นการใช้งาน Grid จะช่วยให้เราสามารถจัดโครงร่างแบบ Responsive ได้ ซึ่ง Bootstrap สามารถกำหนด col กำหนดขนาดของคอลัมน์ต่าง ๆ ได้ โดยเราสามารถเอาไปประยุกต์ต่าง ๆทำให้เว็บดูน่าสนใจมากขึ้นและการปรับการแสดงผลของเมนู ได้

 

อ้างอิง :

BootStrap คืออะไร ใช้งานอย่างไร ,[ออนไลน์], เข้าถึงได้จาก https://www.webdodee.com/what-is-bootstrap/

รู้จัก Bootstrap Layout – Grid ,[ออนไลน์], เข้าถึงได้จาก https://www.jir4yu.me/2014/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-bootstrap-layout-grid/

Grid system ,[ออนไลน์], เข้าถึงได้จาก https://getbootstrap.com/docs/4.0/layout/grid/