Bootstrap 5 มีอะไรใหม่บ้าง

(หมายเหตุ บทความนี้ถูกเขียนขึ้น ณ วันที่ 05/09/2021 เวอร์ชันของ Bootstrap 5 ณ วันที่เขียนคือ v5.1.0)

ในวงการนักพัฒนาเว็บ น้อยคนนักที่จะไม่รู้จัก front-end framework ยอดนิยมที่ชื่อว่า Bootstrap ซึ่งปัจจุบันได้มีการพัฒนาอย่างต่อเนื่องจนมาถึงเวอร์ชันที่ 5 แล้ว และได้ออกตัว stable เมื่อวันที่ 5 พฤษภาคม 2021 ที่ผ่านมา (เวอร์ชัน Alpha ตัวแรกออกเมื่อวันที่ 16 มิถุนายน 2020)

ทีนี้ เรามาดูกันว่า มีอะไรบ้างที่มาใหม่หรือแตกต่างไปจาก Bootstrap เวอร์ชัน 4

1. โลโก้ใหม่

นอกจากออกแบบโลโก้ใหม่แล้ว ยังมีการออกไอคอนสวยๆ มาให้เราใช้อีกด้วย ดูรายละเอียดได้ที่ https://icons.getbootstrap.com/

2. คอมโพเนนต์ใหม่ ที่ชื่อว่า offcanvas

Offcanvas เป็นคอมโพเนนต์อันใหม่ของ Bootstrap 5 ซึ่งสามารถสลับการ แสดง/ซ่อน ได้ผ่านทาง JavaScript  หน้าตาคร่าวๆ ดังภาพตัวอย่าง
รายละเอียดเต็มๆ ดูได้ที่ https://getbootstrap.com/docs/5.1/components/offcanvas/

5. ปรับปรุงและเพิ่มคอมโพเนนต์ของ forms

• คอมโพเนนต์พื้นฐานของ forms เช่น checkbox, radio, select, file ได้มีการปรับปรุงการเรียกใช้ให้ง่ายมากขึ้น และทำให้แสดงผลเหมือนกันทุก web browser ได้
• คอมโพเนนต์ใหม่ Floating labels เป็นสิ่งที่นักพัฒนาหลายๆ คนเรียกร้องมานาน ในที่สุดทางผู้สร้าง Bootstrap ก็ใส่มันมาให้แล้ว

• คอมโพเนนต์ File input ได้มีการปรับปรุงให้ใช้งานหน้าตาสวยๆ ได้ทันที โดยไม่ต้องระบุคลาสเพิ่มเหมือนเวอร์ชัน 4 อีกต่อไป

• การสร้าง layout ของเว็บทำได้ง่ายขึ้นกว่าเดิมมาก มีบางคลาสที่ถูกตัดออกไป และปรับปรุงคลาสให้ทำงานได้ดีขึ้น สวยงามขึ้น ลดความซับซ้อนของโค้ดลงไปได้มาก รายละเอียดเพิ่มเติมอ่านได้ที่ https://getbootstrap.com/docs/5.1/forms/layout/

6. เพิ่มการซัพพอร์ตเว็บแบบขวาไปซ้าย (RTL – Right To Left)

หลายๆ ภาษาในโลกนี้ เขียนจากขวาไปซ้าย ดังนั้นทางผู้สร้าง Bootstrap จึงได้ออกแบบให้รองรับเว็บแบบขวาไปซ้าย โดยไม่ต้องไปเขียนเพิ่มเติมเองให้เหน็ดเหนื่อย

7. ยกเครื่องสิ่งอำนวยความสะดวก

ใน Bootstrap เวอร์ชัน 5 นี้ ทางผู้พัฒนาก็ได้เพิ่มสิ่งอำนวยความสะดวกใหม่ๆ และแก้ไขของเดิมให้ดีขึ้นหลายอย่างเลย เช่น

• Utility API ใช้สำหรับการต่อเติม Boostrap 5 ให้ตรงความต้องการของนักพัฒนาที่จะนำไปใช้ต่อ ดูเพิ่มเติมได้ที่ https://getbootstrap.com/docs/5.1/utilities/api/
• Utility Class คลาสต่างๆ ที่ช่วยให้การออกแบบเว็บสวยงามและยืดหยุ่นมากขึ้น ดูเพิ่มเติมได้ที่ https://getbootstrap.com/docs/5.1/utilities/
• เพิ่มตัวอย่างโค้ดของการนำไปใช้งานมากมายหลายแบบกว่าเดิม ดูตัวอย่างได้ที่ https://getbootstrap.com/docs/5.1/examples/

8. Browser ที่รองรับ

สำหรับ Bootstrap 5 ได้มีการยกเลิกการซัพพอร์ต browser รุ่นเก่าๆ ออกไป เพื่อให้สามารถใช้ฟีเจอร์ใหม่ๆ รายการ browser ที่ยกเลิกการซัพพอร์ตมีดังต่อไปนี้

• Microsoft Edge Legacy
• Internet Explorer 10 และ 11
• Firefox รุ่นต่ำกว่า 60
• Safari รุ่นต่ำกว่า 10
• iOS Safari รุ่นต่ำกว่า 10
• Chrome รุ่นต่ำกว่า 60
• Android รุ่นต่ำกว่า 6

9. JavaScript

สิ่งที่ถือว่าเป็นเรื่องใหญ่เรื่องหนึ่งของ Bootstrap 5 ก็คือสามารถทำงานได้โดยไม่ต้องพึ่งพา jQuery เปิดโอกาสให้นำ Bootstrap 5 ไปใช้กับ frontend framework ยอดนิยมตัวอื่นได้ง่ายขึ้นมาก เช่น react.js, vue.js แต่ถ้าหากนักพัฒนายังอยากใช้ jQuery อยู่ ก็สามารถใช้งานได้เช่นกัน

และนอกจากนี้ ยังมีอีกหลายอย่างมากๆ ที่ Bootstrap 5 ได้ถูกพัฒนาออกมาให้เราใช้งานกัน หากต้องการข้อมูลโดยละเอียดครบทุกเรื่อง สามารถเข้าไปที่ official website ของ Bootstrap 5 ได้ที่นี่เลย https://getbootstrap.com/docs/5.1/getting-started/introduction/

ที่มา

• _{https://blog.getbootstrap.com/2021/05/05/bootstrap-5/}
• _{https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/}
• _{https://getbootstrap.com/docs/5.1/getting-started/introduction/}