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 ช่อง
 col-md-2  หน้าจอ Notebook ให้แสดง 6 ช่อง
 col-lg-1   ส่วนบน PC ให้แสดง 12 ช่อง

1. มาดูผลกัน เริ่มจากบน มือถือที่ความกว้าง 336 จะแสดง 2 ช่อง
จนกว่าหน้าจอจะกว้างกว่า 720

 













 2. Tablet ที่ความกว้าง 770 จะแสดง 3 ช่อง จนกว่าหน้าจอจะกว้างกว่า 960

  





3. Notebook ที่ความกว้าง 998 จะแสดง 6 ช่อง จนกว่าหน้าจอจะกว้างกว่า 1,200

  




4. PC ที่ความกว้าง 1,212 จะแสดง 12 ช่อง และมากสุดที่เท่านี้

เพิ่มเติมอีกนิดถ้าหากว่าเราไม่ต้องการกำหนดข้อแตกต่างระหว่าง Device หรือขนาดหน้าจอก็สามารถกำหนดเป็น col-12 ได้เลยหมายความว่าให้แสดง 1 ช่องทุกขนาด