การใช้ bootstrap Grid (บูทแตร๊ป กริต) เบื้องต้น ในปัจจุบันจอแสดงผลได้มีหลากหลายขนาด จึงทำให้มีความแตกต่างของหน้าจอ เช่น smartphone, tablet, notebook ทำให้วิธีการออกแบบหน้าเว็บก่อนหน้านี้ ทำให้เว็บไซต์ดูไม่สวย นักพัฒนาจึงต้องพัฒนาวิธีการออกแบบเว็บไซต์ให้เข้ากับยุคปัจจุบันที่มีหลากหลายขนาดจอ และ Bootstrap (บูทแตร๊ป) เองก็ได้พัฒนาเพื่อรองรับกับอุปกรณ์ต่างๆ
Grid system (กริต ซิสเต็มส์) เป็น layout (เรย์เอ้า) ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องและเป็นระเบียบ จะส่งผลดีต่อการพัฒนาเว็บไซต์ในอนาคต และ สามารถใช้ร่วมกับอุปกรณ์ได้ทุกขนาด Gird system (กริต ซิสเต็มส์) จะปรับเปลื่ยนวัตถุบนหน้าเว็บไปตามขนาดของอุปกรณ์ที่เปิดไว้ grid stsyem (กริต ซิสเต็มส์) ของ bootstrap (บูทแตร๊ป) ได้แบ่งออกเป็น 12 คอลัมน์ ขนาดเท่าๆกัน ซึ่งแต่ละ row (โร) จะมีกี่คอลัมน์ก็ได้ แต่ต้องมีขนาดคอลัมน์รวมกันทั้งหมด 12 คอลัมน์และ row (โร) ที่ต่างกันก็ไม่จำเป็นต้องมีคอลัมน์ที่เท่ากัน สามารถจัดการออกแบบได้อิสระ แต่ต้องอยู่ภายใน row (โร)
หน่วยหน้าจอจะมีให้เลือก 4 แบบ ซึ่งแต่ละหน่วยก็จะแตกต่างกันไป แต่สามารถเลือกใช้ได้ตามสะดวก สามารถดูได้จากรูปภาพข้างล่างนี้
จากรูปสรุปได้
XS คือ ใช้กับหน้าจอ smartphone
SM คือ ใช้กับหน้าจอ ipad หรือ tablet
MD คือ ขนาดความกว้างของหน้าจอ ipad แนวนอน หรือ หน้าจอ notebook
LG คือ ขนาดความกว้างกว่า 1200px ขึ้นไป
ดังนั้นจากที่ได้อธิบายรูปแบบของหน่วยหน้าจอและ Gird system (กริต ซิสเต็มส์) ไปแล้ว จะมาลองเขียน code (โค้ด) กัน
การเขียน Grid system (กริต ซิสเต็มส์) จะต้องรวมกันให้ได้ 12 คอลัมน์ และจำเป็นต้องมี row (โร) ครอบไว้ เพื่อความเป็นระเบียบและใช้ class container (คลาส คอนเทนเนอร์) ครอบ row (โร) ไว้อีกที เพราะถ้าไม่ได้ใช้ class container (คลาส คอนเทนเนอร์) จะให้ทำให้หน้าเว็บไซต์มีความกว้างมากเกินไปหากนำไปเปิดกับหน้าจอที่มีความกว้างมากๆ
การใช้ bootstrap Grid บูทแตร๊ป กริต เบื้องต้น - ทำ Respovsive
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Sr. Member
- โพสต์: 81
- ลงทะเบียนเมื่อ: 11/07/2016 10:05 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
โดย Panchalee » 01/11/2017 11:20 am » ใน Booststap Knowledge - 0 ตอบกลับ
- 2595 แสดง
-
โพสต์ล่าสุด โดย Panchalee
01/11/2017 11:20 am
-
-
- 0 ตอบกลับ
- 3765 แสดง
-
โพสต์ล่าสุด โดย abdkode
05/04/2019 1:46 pm
-
-
โพสต์ใหม่ การใช้ Closing Alerts ใน Bootstrap
โดย Parichat » 11/01/2018 2:57 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 2820 แสดง
-
โพสต์ล่าสุด โดย Parichat
11/01/2018 2:57 pm
-
-
-
โพสต์ใหม่ การใช้ Yii Booster ext กับการโหลด bootstrap มาใช้แบบแยก
โดย sarapmax » 09/06/2014 7:32 pm » ใน Programming - PHP - 0 ตอบกลับ
- 1278 แสดง
-
โพสต์ล่าสุด โดย sarapmax
09/06/2014 7:32 pm
-
-
-
โพสต์ใหม่ การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป
โดย sonram » 12/07/2016 5:46 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 2545 แสดง
-
โพสต์ล่าสุด โดย sonram
12/07/2016 5:46 pm
-
-
- 0 ตอบกลับ
- 946 แสดง
-
โพสต์ล่าสุด โดย moomai
01/02/2017 5:11 pm
-
-
โพสต์ใหม่ การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
โดย Jom07 » 01/03/2018 2:15 pm » ใน Python Knowledge - 0 ตอบกลับ
- 2335 แสดง
-
โพสต์ล่าสุด โดย Jom07
01/03/2018 2:15 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 2