この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ก่อนหน้านี้ผมได้เขียนบล็อก เกี่ยวกับ Laravel ไปแล้วว่ามันมีความสามารถอะไรบ้างและสะดวกในการใช้งานพัฒนาเว็บแอพพลิเคชั่นยังไง สามารถย้อนไปดูได้จาก ลิ้งนี้นะครับ Laravel
ครั้งนี้ผมจะมาเขียนเกี่ยวกับตัว Front-end framework ที่นักพัฒนาส่วนใหญ่นิยมนำมาเป็นตัวเลือกเพื่อใช้ในการออกแบบ และ สร้างเว็บไซต์ให้มีความทันสมัยพร้อมด้วยลูกเล่นที่หลากหลายนั้นก็คือ Bootstrap
Bootstrap คืออะไร ?
ทำไมต้องเป็น Bootstrap ?
จุดเด่นของของ Bootstrap Framework
- มี UI เริ่มต้นแบบที่สวยงามและใช้งานง่าย
- มีการปรับปรุงและพัฒนาอย่างต่อเนื่อง
- เป็นที่นิยมของนักพัฒนาทั่วโลก ทำให้สามารถเรียนรู้และแก้ปัญหาได้ง่าย
- โค้ดหรือชุดคำสั่งต่าง ๆ ค่อนข้างสะอาดมีโฟลเด้อต้นแบบแค่ 3 ส่วนคือ js, css, fonts
- ประหยัดเวลาในการพัฒนาเว็บไซต์และนำไปพัฒนาต่อได้ง่าย
- เป็น Responsive Framework พัฒนาเว็บไซต์ที่รองรับการแสดงผลได้หลากหลาย Device
โดยปกติแล้ว Laravel จะมีรูปแบบ public ซึ่งแบ่ง css และ js ให้อยู่แล้วเพื่อง่ายและมีอิสระในการเรียกใช้งานเฟรมเวิร์คต่างๆจากภายนอก ซึ่งในครั้งนี้ผมจะมาพูดเกี่ยวกับ การนำ Bootstrap มาใช้งานใน Laravel กัน
อันดับแรกเริ่มที่การติดตั้ง Bootstrap กันก่อน โดยในที่นี้เราจะใช้ตัว Bootstrap 4.4.1 ซึ่งเป็นเวอร์ชั่นล่าสุดของ Bootstrap ในตอนนี้ สามารถดาวน์โหลดและดูขั้นตอนการติดตั้งได้จาก ลิ้งนี้
ตัวอย่างการใข้งาน Bootstrap
-
Responsive tables คือ Bootstrap ส่วนใหญ๋ที่คนมักนิยมเอามาใช้งานกัน ในการพัฒนาเว็บไซต์ เนื่องจากสามารถสร้างตารางที่มีการตอบสนองของหน้าจอผู้ใช้งานได้ ไม่ว่าจะเข้าใช้งานเว็บไซต์จาก มือถือ,แท็บเล็ต หรือในหน้าจอคอมก็ตาม ตัวตาราง จะมีการปรับขนาดให้เหมาะสมตามหน้าตาจอของผู้ใช้งาน ซึ่งเป็นโค้ดที่สะดวกและใช้งานง่ายอย่างมาก
-
Aligning images เป็นการจัดรูปแบบ ตำแหน่งของรูปภาพต่างๆ ในเว็บไซต์ของเรา โดยเราสามารถเลือกได้ว่า จะจัดตำแหน่งของรูปภาพให้อยู่ตรงไหน หรือ มุมไหนในโปรเจคของเรา เพียงแค่ใส่แท็ก class="rounded float-left" ตามตัวอย่างดังต่อไปนี้
-
Unstyled คือการจัดรูปแบบตัวหนังสือและย่อหน้าในโปรเจคของเรา ให้เป็นไปตามรูปแบบที่สวยงาม อ่านง่าย และสะดวกต่อการดูข้อมูลต่างๆ โดยที่เราไม่จำเป็นต้อง ใส่แท็ก หรือ เขียนอะไรมากมายเพื่อจัดรูปแบบตัวหนังสือ ซึ่งเป็นเรื่องที่สะดวกมากในการใช้งาน และนี้คือตัวอย่างรูปแบบโค้ดที่นำมาใช้งาน
สุดท้ายผมหวังว่า ทุกท่านจะนำ Bootstrap มาเป็นพื้นฐานในการพัฒนาโปรแกรมหรือเว็บไซต์ของตัวเอง เพื่อความสะดวกและง่ายในการใช้งาน และ ลดเวลาในการทำงานให้มีความรวดเร็วมากยิ่งขึน ช่วงระยะแรก อาจจะจำเป็นต้องค้นหาข้อมูลหรือแท็กที่จำเป็นต้องใช้ แต่ถ้าใช้งานบ่อยๆ แล้วเราก็จะสามารถใช้งาน Bootstrap ควบคู่ไปกับการพัฒนาโปรแกรมได้ลื่นไหลมากเลยครับ