Class Container
div element div ย่อมาจากค าว่า division (แผนกหรือกอง) ซึ่งเอาไว้ใช้ในการเป็นภาชนะ ส าหรับ HTML elements อื่นๆ เพื่อความง่ายในการใช้เป็นตัวเลือกเพื่อที่จะ ตกแต่งด้วย CSS หรือจะท าให้มันมีการเคลื่อนไหวด้วย JavaScript การใช้งาน ของ div ก็คือการจับเป็นก้อนกลุ่มเพื่อความง่ายในการอ่านและเป็นตัวเลือก เพื่อที่จะเอาไปท าไรข้อมูลต่อๆ ไป
div element
จัดระเบียบ HTML ด้วย Class คุณสมบัติ class (ประเภท)
การใช้งาน Class Container การใช้งาน Class หลักใน bootstrap การใช้งาน layout และจ าเป็นต้องก าหนดเมื่อมีการใช้งานระบบ grid จะมี class อยู่ 2 ชื่อ คือ "container" และ "container-fluid" โดยสามารถท าความเข้าใจรูปแบบของทั้ง 2 ได้ดังนี้ - container เป็นกล่องส ำหรับเก็บเนื้อหำ ส่วนประกอบต่ำง ๆ ไว้ภำยในเป็นรูปแบบขนำดตำยตัว แสดงอยู่กึ่งกลำงหน้ำจอ container จะขยำยขนำดควำมกว้ำงปรับไปตำมขนำดหน้ำจอ โดยมีช่องว่ำงซ้ำยขวำ (padding) ข้ำงละ 15px - container-fluid เป็นกล่องส ำหรับเก็บเนื้อหำส่วนประกอบต่ำง ๆ ไว้ภำยในเป็นรูปแบบยืดหยุ่นได้ ตำมขนำดของจอแสดงผล โดยจะขยายขนาดความกว้างเต็มจอเสมอ
ผลลัพธ์ ที่แตกต่างกันระหว่าง container และ container-fluid
ผลลัพธ์ ที่แตกต่างกันระหว่าง container และ container-fluid
class ที่ชื่อว่า row หลังจากที่ สร้าง class ที่ชื่อว่า container เพื่อครอบเนื้อหา และส่วนประกอบต่าง ๆ เรียบร้อย แล้ว สิ่งที่ ต้องเรียนรู้และส าคัญมากก็ คือ class ที่ชื่อว่า “row” อยู่ภายใน class ที่ชื่อว่า container เสมอ <body> <div class="container"> <div class="row"> ........ </div> </div> </body> <body> <div class="container-fluid"> <div class="row"> ........ </div> </div> </body>
การใช้งาน Grid เบื้องต้น ใน Bootstrap การจัดโครงร่างหรือ Layout ของเพจนั้น ๆเพื่อให้รอบรับรูปแบบ Responsive ด้วยกริดที่คล้ายกับตาราง โดยมี 12 คอลัมน์ ซึ่งสามารถวางเนื้อหาของเว็บ เพจลงในแต่ละช่องของกริด แต่ไม่จ าเป็นต้องใส่เนื้อหาให้ครบทุกช่อง หรือใส่เนื้อหาที่มี ขนาดไม่เท่ากันได้ ซึ่งบางกรณีอาจต้องใช้พื้นที่ของกริดมากกว่า 1 ช่อง สามารถขยาย ขนาดของกริดได้ตั้งแต่ 1 -12 คอลัมน์ของกริด หรือคล้ายกับโปรแกรม Excal คือให้ตาราง มันรวมคอลลัมน์กัน
การจัดโครงร่างของกริกหรือ Grid ใน Bootstrap
จากรูปภาพในกริดจะใช้ col-x ในการจัดแบ่งหน้าของโครงร่างต่าง ๆ ซึ่ง x ก็คือขนาดของคอลัมน์นั้น ๆ ตัวอย่างเช่น col-6 คือคอลัมน์จะมีขนาดเท่ากับ 6 คอลัมน์ ส่วนลักษณะการน าไปใช้งาน ก็มี Class ที่ ควรรู้จัก จะมีดังนี้
คลาสที่ใช้ควบคุมการแสดงผลของ Grid ใน Bootstrap 5 สำมำรถใช้คลำสในกำรควบคุมกำรแสดงผลของ Grid ได้ 6 คลำสด้วยกัน ซึ่งแต่ ละคลำสก็จะมีเป้ำหมำยในกำรใช้งำนบนอุปกรณ์ที่มีขนำดควำมละเอียดของหน้ำจอแตกต่ำงกันไป ดังนี้ .col- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดเล็กเป็นพิเศษ (ความกว้างของหน้าจอน้อยกว่า 576px) .col-sm- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดเล็ก (ความกว้างของหน้าจอมากกว่าหรือเท่ากับ 576px) .col-md- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดกลาง (ความกว้างของหน้าจอมากกว่าหรือเท่ากับ 768px) .col-lg- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดใหญ่ (ความกว้างของหน้าจอมากกว่าหรือเท่ากับ 992px) .col-xl- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดใหญ่เป็นพิเศษ (ความกว้างของหน้าจอมากกว่าหรือเท่ากับ 1200px) .col-xxl- ส าหรับอุปกรณ์ที่มีหน้าจอขนาดใหญ่มากๆ (ความกว้างของหน้าจอมากกว่าหรือเท่ากับ 1400px)
คลาสที่ใช้ควบคุมการแสดงผลของ Grid
คลาสที่ใช้ควบคุมการแสดงผลของ Grid • XS :: ใช้กับหน้าจอขนาดเล็กกว่า Ipad แนวตั้งลงมา (หน้าจอสมาร์ทโฟนต่างๆ) • SM :: ขนาดหน้าจอตั้งแต่ Ipad แนวตั้ง • MD :: ขนาดความกว้างต่ าสุดที่หน้าจอ Ipad แนวนอน • LG :: หน้าจอที่กว้างกว่า 1200 pixels ขึ้นไป หรือให้เหมาะสมกับขนาดหน้าจอโน้ตบุคมาตราฐาน
เวลาใช้งานจริง ก็จะเติมตัวเลขเข้าไป เช่น - บนอุปกรณ์ขนาดเล็กต้องการให้แสดงผล 6 คอลัมน์ ก็จะใช้เป็น .col-sm-6 - บนอุปกรณ์ขนาดใหญ่ต้องการให้แสดงผลเป็น 12 คอลัมน์ ก็จะใช้เป็น .col-lg-12 ถ้าต้องการให้อิลิเมนต์แต่ละตัวปรับขนาดการแสดงผลด้วยจ านวนคอลัมน์ที่ต่างกันตามขนาด อุปกรณ์ที่เปลี่ยนไป ก็สามารถใช้หลายคลาสรวมกันได้ เช่น .col-sm-3 .col-md-6 .col-lg-12
โครงสร้างพื้นฐานของ Grid ใน Bootstrap 5 โครงสร้างของ Grid ใน Bootstrap 5 จะต้องสร้างแถวขึ้นมาก่อน โดยใช้แท็ก div ที่มีคลาส .row ก ากับอยู่ ดังนี้ <div class="row"> </div> เมื่อสร้างแถวขึ้นมาแล้ว ก็จะใช้แท็กต่าง ๆ ตามที่ต้องการ โดยวางไว้ภายในแท็ก div ที่สร้างไว้ข้างต้น โดยใช้คลาส .col-*-* ก ากับ (เครื่องหมายดอกจันทน์ตัวแรก ให้ระบุตัวอักษรแทนขนาดหน้าจอ เช่น sm,md,lg,xl,xxl ส่วนเครื่องหมายดอกจันทน์ตัวที่ ให้ระบุตัวเลขแทนจ านวนคอลัมน์) เช่น <div class="col-md-6">
ทดสอบการใช้งาน