การใช้งาน Layout ในการกำหนด Grid  จะมีอยู่ 2 class ซึ่งมีชื่อคือ container และ container-fluid ส่วนความกว้างของ div มีทั้งหมด 1-12 ตัวอักษรแล้วมี div ทั้งหมด แบ่งออกเป็น 12 คอลัมน์ จะสังเกตเห็นว่าจำนวนของคอลัมน์รวมกันได้มากถึง 12 ซึ่งอาจน้อยกว่าสิบสองคอลัมน์ แต่ระวังถ้ามีมากกว่า 12 ซึ่งใน Bootstrap 4 นั้น จะมีการใช้งาน xs โดยไม่ต้องกำหนดค่าต่อท้าย ยกตัวอย่างเช่น col, col-sm, col-md, col-lg, col-xl ซึ่งจะใช้ col แทน col-xs

Responsive breakpoints

จุดการเปลี่ยนของการกำหนด responsive  หรือจุดที่กำหนดให้รูปแบบการแสดงผล

- xs ขนาดเล็กที่สุด  เช่น อุปกรณ์ขนาดเล็กมาก หรือจอเมือถือในแนวตั้งที่ขนาด  < 576px

- sm ขนาดเล็ก เช่น  อุปกรณ์ขนาดเล็ก หรือ จอมือถือในแนวนอนที่ขนาด >= 576px และ < 768px

- md ขนาดปานกลาง เช่น แท็บเล็ทขนาดหน้าจอ >= 768px และ < 992px

- lg ขนาดใหญ่ เช่น คอมพิวเตอร์ขนาดหน้าจอ >= 992px และ < 1200px

- xl ขนาดใหญ่ที่สุด เช่น คอมพิวเตอร์หน้าจอขนาดใหญ่ >= 1200px ขึ้นไป

ตัวอย่าง

<div class="container">

  <div class="row">

    <div class="col-sm">

      One of three columns

    </div>

    <div class="col-sm">

      One of three columns

    </div>

    <div class="col-sm">

      One of three columns

    </div>

  </div>

</div>

เป็นการกำหนดแถวหนึ่งแถว สามคอลัมน์ โดยให้ class row เป็นแถว  และ class col เป็นคอลัมน์

Grid เป็นเครื่องมือที่ช่วยให้เราสามารถออกแบบเลย์เอาท์เอกสารของ html ได้เหมือนกับการใช้แท็ก ซึ่งในการใช้จะใช้ divในการช่วยทำเอกสารได้เร็วมากยิ่งขึ้น นอกจากนี้ยังชวยให้เราสามารถออกแบบเลย์เอาท์ต่าง ๆได้ ที่เรียกว่า responsive web design  ซึ่งจะช่วยลดเวลาการทำการพัฒนาได้มากยิ่งขึ้น

อ้างอิง

การใช้งาน Grid ใน Bootstrap.[ออนไลน์].เข้าถึงได้จาก https://angsila.cs.buu.ac.th/~58160436/887371/lab03/bootstrap.html

ความหมายของตัวเลขใน“ col-md-4”,“ col-xs-1”,“ col-lg-2” ใน Bootstrap.[ออนไลน์].เข้าถึงได้จากhttps://qastack.in.th/programming/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap

Grid System คืออะไร ? .[ออนไลน์].เข้าถึงได้จากhttps://angsila.cs.buu.ac.th/~58160640/887371/lab03/grid.html