การใช้ bootstrap Grid บูทแตร๊ป กริต เบื้องต้น - ทำ Respovsive

[sonram]

การใช้ bootstrap Grid (บูทแตร๊ป กริต) เบื้องต้น ในปัจจุบันจอแสดงผลได้มีหลากหลายขนาด จึงทำให้มีความแตกต่างของหน้าจอ เช่น smartphone, tablet, notebook ทำให้วิธีการออกแบบหน้าเว็บก่อนหน้านี้ ทำให้เว็บไซต์ดูไม่สวย นักพัฒนาจึงต้องพัฒนาวิธีการออกแบบเว็บไซต์ให้เข้ากับยุคปัจจุบันที่มีหลากหลายขนาดจอ และ Bootstrap (บูทแตร๊ป) เองก็ได้พัฒนาเพื่อรองรับกับอุปกรณ์ต่างๆ

Grid system (กริต ซิสเต็มส์) เป็น layout (เรย์เอ้า) ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องและเป็นระเบียบ จะส่งผลดีต่อการพัฒนาเว็บไซต์ในอนาคต และ สามารถใช้ร่วมกับอุปกรณ์ได้ทุกขนาด Gird system (กริต ซิสเต็มส์) จะปรับเปลื่ยนวัตถุบนหน้าเว็บไปตามขนาดของอุปกรณ์ที่เปิดไว้ grid stsyem (กริต ซิสเต็มส์) ของ bootstrap (บูทแตร๊ป) ได้แบ่งออกเป็น 12 คอลัมน์ ขนาดเท่าๆกัน ซึ่งแต่ละ row (โร) จะมีกี่คอลัมน์ก็ได้ แต่ต้องมีขนาดคอลัมน์รวมกันทั้งหมด 12 คอลัมน์และ row (โร) ที่ต่างกันก็ไม่จำเป็นต้องมีคอลัมน์ที่เท่ากัน สามารถจัดการออกแบบได้อิสระ แต่ต้องอยู่ภายใน row (โร)

boot-grid.jpg (42.63 KiB) Viewed 886 times

หน่วยหน้าจอจะมีให้เลือก 4 แบบ ซึ่งแต่ละหน่วยก็จะแตกต่างกันไป แต่สามารถเลือกใช้ได้ตามสะดวก สามารถดูได้จากรูปภาพข้างล่างนี้

girdd.png (21.49 KiB) Viewed 886 times

จากรูปสรุปได้
XS คือ ใช้กับหน้าจอ smartphone
SM คือ ใช้กับหน้าจอ ipad หรือ tablet
MD คือ ขนาดความกว้างของหน้าจอ ipad แนวนอน หรือ หน้าจอ notebook
LG คือ ขนาดความกว้างกว่า 1200px ขึ้นไป

ดังนั้นจากที่ได้อธิบายรูปแบบของหน่วยหน้าจอและ Gird system (กริต ซิสเต็มส์) ไปแล้ว จะมาลองเขียน code (โค้ด) กัน

codegrid.png (24.49 KiB) Viewed 886 times

การเขียน Grid system (กริต ซิสเต็มส์) จะต้องรวมกันให้ได้ 12 คอลัมน์ และจำเป็นต้องมี row (โร) ครอบไว้ เพื่อความเป็นระเบียบและใช้ class container (คลาส คอนเทนเนอร์) ครอบ row (โร) ไว้อีกที เพราะถ้าไม่ได้ใช้ class container (คลาส คอนเทนเนอร์) จะให้ทำให้หน้าเว็บไซต์มีความกว้างมากเกินไปหากนำไปเปิดกับหน้าจอที่มีความกว้างมากๆ