การใช้ 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
Moderators: mindphp, ผู้ดูแลกระดาน
-
- PHP Sr. Member
- Posts: 81
- Joined: 11/07/2016 10:05 am
-
- Similar Topics
- Replies
- Views
- Last post
-
-
การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
by Panchalee » 01/11/2017 11:20 am » in Booststap Knowledge - 0 Replies
- 1519 Views
-
Last post by Panchalee
01/11/2017 11:20 am
-
-
- 0 Replies
- 1765 Views
-
Last post by abdkode
05/04/2019 1:46 pm
-
- 0 Replies
- 1762 Views
-
Last post by จันนุสรณ์ ดีแก่
23/11/2018 11:32 am
-
- 2 Replies
- 11901 Views
-
Last post by livingroom
11/06/2015 1:28 pm
-
-
ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น
by M004 » 15/01/2014 2:26 pm » in Booststap Knowledge - 0 Replies
- 2451 Views
-
Last post by M004
15/01/2014 2:26 pm
-
-
- 0 Replies
- 2051 Views
-
Last post by Parichat
11/01/2018 2:57 pm
-
- 1 Replies
- 2182 Views
-
Last post by boo_kyoshii
21/08/2013 11:08 am
-
- 0 Replies
- 1561 Views
-
Last post by sonram
12/07/2016 5:46 pm
Who is online
Users browsing this forum: No registered users and 3 guests