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

bootstrap3

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

(Visited 14,141 times, 1 visits today)

10 Responses to “Bootstrap 3 มีอะไรใหม่บ้าง ?”

  1. Kunathip Boonruangkhao says:

    ขอบคุณสำหรับบทความครับ น่าจะทำเป็น tutorial สอนการใช้งานบ้างนะครับ

    • Siam HTML says:

      ได้ครับ tutorial จะตามมาเร็วๆ นี้นะฮะ ^_^

  2. ชิน แช ยอง says:

    ขอบคุณครับ เด่วนี้ผมเข้ามาเว็บนี้ทุกวันเลย

  3. dixon says:

    บทความแต่ละเรื่องดี มากๆ เลยครับ เขียนละเอียดดี ว่างๆ สอนการใช้งาน grid boostrap3 บ้างนะครับ

  4. sumsure says:

    มีประโยชน์มากครับ

  5. Net'idol P'Pond Webdsn says:

    แจ่มแมว

  6. นิติรัตน์ says:

    ชอบเว็บนี้มากครับ ให้ความรู้ที่มีประโยชน์เสมอ
    ขอบคุณผู้จัดทำมากครับ ^_^

    • Siam HTML says:

      ได้ยินแบบนี้ คนเขียนก็ชื่นใจครับ
      ขอบคุณมากจริงๆ ครับ T__T

  7. Nutt Suwan says:

    วิธีเขียน media query ผมใส่ไว้ใน tag head แล้วยังไงต่อครับ

    • Siam HTML says:

      แยกไฟล์ css เป็น theme.css ไว้ก็ได้ครับ แล้วใส่ไว้ต่อจาก bootstrap.min.css ครับ

Leave a Reply