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

Bootstrap นั้น ถือว่าเป็น front-end framework ที่ได้รับความนิยมมากที่สุดในขณะนี้เลยก็ว่าได้ โดยจุดเด่นของ bootstrap จะอยู่ที่ การใช้งานที่ง่าย เรียนรู้ได้เร็ว แถมยังรวบรวมสิ่งที่เราใช้บ่อยๆ มาให้เกือบหมดเลย อย่างไรก็ตาม bootstrap ยังคงมีการพัฒนามาอย่างต่อเนื่อง และล่าสุด bootstrap ก็ได้ออกเวอร์ชั่นใหม่ ซึ่งถือว่าเป็นเวอร์ชั่นที่ 3 แล้ว เรามาดูกันซิว่า ใน bootstrap 3 นี้ มีอะไรใหม่ๆ เพิ่มเข้ามาบ้าง ?

Theme

เราจะเห็นว่า default theme ของ bootstrap 3 ได้เปลี่ยนมาเป็นแบบ flat design ซึ่งกำลังได้รับความนิยมในปัจจุบันแล้ว แต่ถ้าเราไม่ชอบแนวนี้ เราก็สามารถเปลี่ยนมาใช้ optional theme ได้ ซึ่งจะมีหน้าตาเหมือนกับ default theme ของ boostrap 2

Responsive Design

bootstrap 3 เปลี่ยนมาใช้ mobile-first approach หรือการพัฒนาเว็บโดยโฟกัสไปที่หน้าจอขนาดเล็กก่อน ซึ่งวิธีนี้ ถือเป็น best practice ของการทำ responsive web ในปัจจุบัน นอกจากนี้ css ของ bootstrap 3 จะรวม responsive features มาให้ในตัวเลย ไม่ได้แยกไฟล์เหมือนกับ boostrap 2 แล้ว อย่างไรก็ตาม หากใครไม่อยากใช้ responsive features ก็สามารถถอดคุณสมบัตินี้ออกได้

Grid System

grid system ใน bootstrap 3 จะถูกยุบรวมให้เหลือแบบเดียว คือ mobile-first responsive fluid grid system โดยยังคงมีจำนวน 12 คอลัมน์ เหมือนเดิม แต่จะมีคุณสมบัติใหม่ที่เพิ่มเข้ามาก็คือ เราจะสามารถกำหนดขนาดของคอลัมน์ให้กับ devices ในแต่ละแบบได้ ตัวอย่างเช่น ใน phones เรากำหนดความกว้างให้เป็น 12 12 12 มันก็จะแสดงเต็มความกว้างของหน้าจอ เรียงต่อกันไปในแนวตั้ง แต่ใน desktops เราอาจเปลี่ยนเป็น 3 6 3 ซึ่งมันจะกลายเป็น layout แบบ 3 คอลัมน์ แทน จะเห็นว่าใน bootstrap 2 นั้น เราไม่สามารถทำแบบนี้ได้

Components

bootstrap 3 ได้เพิ่ม components เข้ามาใหม่ 2 อัน ด้วยกัน ได้แก่ list group และ panel แต่ในขณะเดียวกัน ก็ได้เอา components ออกไปหลายอันด้วยกัน ไม่ว่าจะเป็น submenus, typeahead รวมไปถึง accordion นอกจากนี้ bootstrap 3 ยังได้ปรับปรุง components ต่างๆ ที่เคยมีอยู่เดิมให้ดีขึ้นอีกด้วย

Browser support

bootstrap 3 ยกเลิกการรองรับ Internet Explorer 7 แล้ว ส่วน Internet Explorer 8 นั้นยังคงรองรับอยู่ แต่เราต้องใส่ respond.js เพิ่มเข้าไปด้วย เพื่อทำให้ใช้ media queries ได้ เราสามารถเข้าไปอ่านรายละเอียดทั้งหมดได้ที่ Browser support

เคยใช้ Bootstrap 2 อยู่ จะเปลี่ยนมาใช้ Bootstrap 3 ?

หากเราเคยเขียนด้วย bootstrap 2 มาก่อน แล้วอยากจะเปลี่ยนมาใช้ bootstrap 3 แทน เราไม่สามารถเปลี่ยนแค่ไฟล์ css และ js ได้ เนื่องจาก css และ js ของ bootstrap 3 นั้นถูกเขียนขึ้นมาใหม่ทั้งหมด การใช้งาน grid system ก็เปลี่ยนไป บาง class ถูกถอดออกไป บาง class ถูกเปลี่ยนชื่อ เราจำเป็นจะต้องปรับโค้ดก่อนจึงจะสามารถใช้ bootstrap 3 ได้ สามารถเข้าไปอ่านวิธีปรับโค้ดได้ที่ Migrating from 2.x to 3.0