สร้าง Grid Layout ของ Bootstrap ง่ายๆด้วย Shoelace แถม Responsive กันให้เห็นจะๆ

บางคนอาจจะยังงงๆอยู่กับเรื่องของ Responsive หรือการวาง layout แบบ Responsive ด้วย Twitter Bo0tstrap แต่ตอนนี้มีเครื่องมืออย่าง shoelace.io ออกแบบมาเพื่อให้เราเห็นรูปแบบการเปลี่ยน Layout ตามโครงสร้างแบบที่เราออกแบบไว้ท้งบน Mobile, Tablet, Desktop ถือว่าสะดวกมากๆเลย

shoelace bootstap grid layout

shoelace bootstrap grid layout

การวางโครงสร้าง Layout ตามแบบของ Bootstrap นั้นเน้นที่ความเป็น Responsive เพราะพัฒนาแบบให้คำนึงไปที่ Mobile ก่อนแล้วค่อยลำดบเป็นอย่างอื่นๆต่อไป ดังนั้นส่วนใหญ่เลยการใช้งาน Bootstrap จึงจะมองที่เรื่องของการทำ Responsive อยู่แล้ว แต่หลายคนที่เริ่มศึกษาใหม่ๆ อาจจะยังไม่คล่อง ลองมาดูวิธีเล่นดูกันก่อนนะครับ

แทบด้านซ้ายจะเป็นตัวบอกว่าลำดับการแสดงผลบนอะไร เช่น Phone, Tablet, Desktop  เช่น เมื่อเราวางแบบไว้ที่แถวแรก 3 Column การแสดงผลที่ Desktop ส่วนที่ Phone อาจจะแสดงเป็นหนึ่งแถว ดังนั้นคุณต้องดูกรอบ Code ด้านขวามือ

เพราะ Col-xs-12 จะเป็นตัวบอกว่า จอขนาดเล็กสุด อย่างเช่น Phone จะมีขนาด กว้างเต็ม 12 ช่อง
ส่วน Col-sm-12 คือจอขนาด Tablet ขึ้นไปจะมีขนาดกว้างเต็มขนาด 12 ช่อง
ส่วน Col-md-12 คือจอขนาด Desktop ขึ้นไปจะมีขนาดกว้างเต็มขนาด 12 ช่อง
และในส่วนของ Col-lg-12 หมายถึงจอขนาดใหญ่สุดก็จะมีขนาดกว้างเต็มขนาด 12 ช่อง ด้วยเช่นกัน

ใครที่ออกแบบลองเปิดดูหลายๆ Device ที่ด้านซ้ายมือ จนได้ตามที่ตั้งใจแล้วค่อย Copy Code ที่ด้านขวามือไปใช้งานได้เลย

Link :: shoelace.io

 

 

 

 

rapido admin template

rapido admin template