Bootstrap 4 beta มาแล้ว!! มาอ่านสรุปสั้นๆเกี่ยวกับ Bootstrap 4 beta กันครับว่ามีอะไรใหม่ๆ หรือแตกต่างจากเวอร์ชัน 3 ยังไงบ้าง
.
1. เปลี่ยนจากใช้ Less มาเป็น Sass
2. ไม่มี thumbnails, wells และ panels แล้วนะครับ แต่จะมี Cards component ให้ใช้แทน (เขียนด้วย flexbox)
3. มีการใช้ HTML resets ชื่อว่า Reboot (cross-browser rendering) โดย forked จาก normalize.css อีกที
4. ไม่รองรับ IE8,IE9 แล้วนะครับ ถ้าใครจะใช้ก็ให้ไปใช้ Bootstrap เวอร์ชัน 3 แทน
5. สำหรับ javascript plugin เขียนใหม่ทั้งหมด ด้วย JavaScript ES6 ครับ
6. ใช้ Popper.js สำหรับช่วยทำ tooltips, popovers และ dropdowns ต่างๆ
7. build tools ตัวใหม่ ใช้ npm scripts แทน Grunt ครับ
8. เปลี่ยนขนาดฟอนต์แบบ global จาก 14px เป็น 16px
9. ไม่มี Glyphicons ติดมาให้แล้ว ถ้าอยากใช้ก็ให้นำเข้ามาใช้เอง
10. เปลี่ยน คลาสของปุ่ม จาก .btn-default ไปเป็น .btn-secondary
11. มีคลาส .table-inverse เพิ่มเข้ามาสำหรับตกแต่งตาราง
12. รองรับความกว้างของ .container 5 ขนาด (เพิ่มจาก bootstrap 3) ดังนี้
– Extra small
– Small
– Medium
– Large
– Extra large
13. ถ้าอยากได้ heading ที่ใหญ่และเด่นกว่าปกติ สามารถใช้ class display-* ได้ มี 4 ขนาด ดังนี้
<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>
14. การทำให้รูปภาพให้เป็น responsive ให้ใช้คลาส class=”img-fluid” (เดิมเป็น .img-responsive) ตัวอย่างเช่น
<img src=”myimage.jpg” class=”img-fluid” alt=”Responsive Image”>
เว็บของ Bootstrap 4 beta ถูกออกแบบใหม่เลยนะครับ เข้าไปดูได้ที่ : https://getbootstrap.com/
ส่วนใครอยากปรับจากเวอร์ชันเป็นตัวนี้ ก็ดูการเปลี่ยนแปลงต่างๆได้ที่ : https://getbootstrap.com/docs/4.0/migration/
.
—-
โค้ชเอก
Coding Mentor