Grid Bootstrap ทำความเข้าใจระบบ Grid ของ Bootstrap แบบเข้าใจง่าย
ก่อนอื่นให้เข้าใจก่อนครับว่าระบบ Grid ของ Bootstrap จะแบ่งเป็น 12 ช่อง มาเข้าใจระบบแบ่งช่องกันก่อนนะ CSS ของ Bootstrap จะให้เรากำหนดจำนวนช่องได้ด้วยคำสั่งนี้ col-sm-4 โดย sm หมายถึงขนาดหน้าจอ และเลข 4 คือสัดส่วน 4 จาก 12 ... งงมะ ให้จำแบบนี้ละกัน ถ้าอยากให้ถ้าเราอยากให้แสดงกี่ช่องให้เอา 12 ตั้งแล้วหารด้วย ตัวเลขนั้น เช่น อยากให้แสดง 1 ช่อง : col-sm-12 (12 หาร 12 =1) อยากให้แสดง 2 ช่อง : col-sm-6 อยากให้แสดง 3 ช่อง : col-sm-4 ต่อมามาเข้าใจเรื่องของการกำหนดขนาดหน้าจอ โดย Bootstrap จะกำหนดขนาดไว้ทั้งหมด 4 Size ตามรูปด้านล่าง ตาม Concept การทำเว็บแบบ Responsive เรามักจะต้องกำหนดจำนวนช่องการแสดงผลของแต่ละหนาดหน้าจอแตกต่างกันเช่น PC ก็หลายช่องหน่อย รองลงมาก็ Notebook , Tablet และก็ Mobile ว่าแล้วเรามาลองกำหนดขนาดของ Grid ตามนี้ดู col-xs-6 หน้าจอมือถือเล็กสุด จะให้แสดง 2 ช่อง col-sm-4 หน้าจอ Tablet จะให้แสดง 3 ช่อง ...