Một số điểm mới trong bootstrap 4 alpha

Mình bắt đầu tìm hiểu sử dùng bootstrap từ 2013, và cái project đầu tiên sử dụng bootstrap của mình chính là blog này của mình. Sau 3 năm sử dụng thì giờ cảm thấy thực sự tuyệt vời và không thể thiếu nó. Vào ở thời điểm hiện tại thì bootstrap vẫn là CSS Framework được sử dụng nhiều nhất trên thế giới. Các project gần đây mình vẫn chủ yếu sử dụng bootstrap v3, nhưng gần đây có tìm hiểu v4 alpha để xem có gì hay ho hơn không.

1. Chuyển từ Less sang sử dụng Sass

Một trong những thay đổi lớn nhất của bootstrap 4 là chuyển sang sử dụng Sass thay cho Less như các phiên bản trước, lý do của sự thay đổi được đưa ra là Sass có một cộng đồng sử dụng rất lớn và nó nhanh và nhẹ hơn hơn nhiều. Cách tổ chức tốt hơn so với bản 3 nên đã giảm dung lượng BS 4 xuống nhẹ hơn so với 3 khoảng 30% (từ 123kb xuống còn 88kb).

 Trước đây mình cũng có làm về Less và thấy nó khá hay. Nhưng chắc thời gian tới thử tìm hiểu về Sass để sử dụng.

2. Chuyển hệ tính từ pixel sang rem

Bootstrap v3 sử dụng pixels để xác định kích thước màn hình, nhưng ở v4 họ đã chuyển sang sử dụng rem, sự thay đổi này sẽ thích hợp hơn cho các thiết bị có độ phân giải 4k khá phổ biến hiện nay. (Hỗ trợ tỉ lệ hiển thị 21×9 (bản 3 đạt tới tỉ lệ 16×9 – HD)

1 rem = 100% = 16px= 12pt

Khi chuyển sang rem, media queue giờ sẽ như sau

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

3. Không còn hỗ trợ IE8

Thằng IE8 mình nghĩ nên chôn nó lâu rồi, những ai làm việc với layout nhiều sẽ thấy căm thù cái thằng này lắm, giờ v4 nó chôn thật, sướng quá đi :). Vấn đề lớn nhất của thằng IE8 là nó không hỗ trợ css media queue, và đến phiên bản này họ đã quyết định bỏ hỗ trợ cho nó. Nếu bạn vẫn cần thì hãy sử dụng bootstrap v3 hiện tại

4. Bỏ Glyphicons Font

Thằng Glyphicons Font trong bootrap v3 mình thấy nó không tốt lắm, ví dụ khi mình dùng thì trên window phone 8 thính thoảng nó đếch hiện lên, phát khùng đi được. Nên mình hay dùng fontawesome hơn, với lại thằng này nó phong phú hơn rất nhiều. Ở phiên bản mới này bootstrap v4 bỏ đi thật hợp lý :)

5. Có thêm thành phần Card

Thằng component này nó gần giống panel trong version 3 ấy, mình dùng thì thấy nó có thêm cái image header khá hay. Họ cũng bỏ luôn mấy cái component well, panels, thumbnails để hướng sử dụng thằng này thay thế

6. Table với màu đen huyển ảo :))

Bổ sung thêm class inverse  cho table 

7. Outline button

Bổ sung thêm một phong cách button đơn giản mà đẹp, mới màu sắc chỉ bọc ngoài đường viền mà thôi.

8. Spacing Utility Class

Cấu trúc :[margin or padding]-[direction]-[size] 
 
For Margin or Padding: use:
 
    “m” for margin
    “p” for padding
 
For direction, you can use:
 
    “a” for all
    “t” for top
    “r” for right
    “l” for left
    “x” for left and right
    “y” for top and bottom
 
For sizes, you can use:
 
    “0” for zero
    Leave Blank for default
    “auto” for Auto
    “md” for Medium
    “lg” for Large
Còn rất nhiều tính năng nữa mà mình chưa có thời gian tìm hiểu hết, và sẽ update khi tìm hiểu được thêm. Và hiện tại đây mới chỉ là bản alpha, nên tương lai sẽ có rất nhiều thứ hay ho nữa.
Các bạn có thể tham khảo thêm ở Bootstrap 4 Aphal BlogBootstrap 4 alpha document

Related Post


CSS Media Queries for iPads & iPhones
Tuesday, May 3, 2016
Đã nhiều lần tôi phải thiết kế những website responsive có yêu cầu xử lý giao diện đặc biệt cho từng thiết bị bằng cách sử dụng CSS media queries. Bời vì vậy tôi đã tổng hợp lại một danh sách CSS Media Queries cho một số thiết bị tiêu biểu trong 2 năm qua. Tôi chia sẻ danh sách Media Queries với mục đích giúp cho designers và developers tiết kiệm thời gian tìm kiếm...
HTML & CSS Workmanship Manual
Tuesday, May 3, 2016
Hôm nay mình muốn chia sẻ một bài viết rất hay của NASA về việc sử dụng HMTL & CSS trong việc viết mã Front End. Để làm được không khó, nhưng đi sâu để hiểu và viết mã một cách đáng tin cậy thì còn có rất nhiều điều thú vị...
Search

Đăng ký nhận bài mới


Category

Blog Archive