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

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

sonram
PHP Sr. Member
PHP Sr. Member
โพสต์: 81
ลงทะเบียนเมื่อ: 11/07/2016 10:05 am

การใช้ 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
boot-grid.jpg (42.63 KiB) Viewed 1591 times
หน่วยหน้าจอจะมีให้เลือก 4 แบบ ซึ่งแต่ละหน่วยก็จะแตกต่างกันไป แต่สามารถเลือกใช้ได้ตามสะดวก สามารถดูได้จากรูปภาพข้างล่างนี้
girdd.png
girdd.png (21.49 KiB) Viewed 1591 times
จากรูปสรุปได้
XS คือ ใช้กับหน้าจอ smartphone
SM คือ ใช้กับหน้าจอ ipad หรือ tablet
MD คือ ขนาดความกว้างของหน้าจอ ipad แนวนอน หรือ หน้าจอ notebook
LG คือ ขนาดความกว้างกว่า 1200px ขึ้นไป

ดังนั้นจากที่ได้อธิบายรูปแบบของหน่วยหน้าจอและ Gird system (กริต ซิสเต็มส์) ไปแล้ว จะมาลองเขียน code (โค้ด) กัน
codegrid.png
codegrid.png (24.49 KiB) Viewed 1591 times
การเขียน Grid system (กริต ซิสเต็มส์) จะต้องรวมกันให้ได้ 12 คอลัมน์ และจำเป็นต้องมี row (โร) ครอบไว้ เพื่อความเป็นระเบียบและใช้ class container (คลาส คอนเทนเนอร์) ครอบ row (โร) ไว้อีกที เพราะถ้าไม่ได้ใช้ class container (คลาส คอนเทนเนอร์) จะให้ทำให้หน้าเว็บไซต์มีความกว้างมากเกินไปหากนำไปเปิดกับหน้าจอที่มีความกว้างมากๆ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 26