Home Web design Bootstrap Bootstrap 4 Alpha có điểm gì mới?

Bootstrap 4 Alpha có điểm gì mới?

5 min read
2
0
7
Bootstrap 4 Alpha có điểm gì mới?

Bootstrap 4 Alpha có điểm gì mới?

Chuyển từ Less sang Sass

Một trong các thay đổi lớn nhất của Bootstrap 4 là chuyển sang dùng Sass thay cho Less như những phiên bản trước, lý do của sự đổi thay được đưa ra là Sass với một cộng đồng sử dụng rất lớn, nhanh, nhẹ hơn và  phổ biến. So với Boostrap 3, dung lượng Bootstrap 4 nhẹ hơn khoảng 30% (từ 123kb xuống còn 88kb).

Chuyển hệ tính trong khoảng pixel sang rem

Chuyển hệ tính từ pixel sang rem
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 những vật dụng sở hữu độ phân giải 4k đang dần phổ biến. 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) { ... }

Không còn hỗ trợ IE8

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

Vấn đề to nhất của IE8 là không hỗ trợ css media queue, và tới 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 tiêu dùng Bootstrap 3 hiện tại.

Không còn Glyphicons Font

Glyphicons Font trong Bootrap v3 cũng không phải là một lựa chọn hoàn hảo, Fontawesome có lẽ sẽ tốt hơn với nhiều lựa chọn phong phú hơn. Thật hợp lý khi bỏ đi ở phiên bản v4 này.

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

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

Component này gần giống Panel trong v3, thêm mẫu image header tương đối hay. Vì thế, để thay đổi, Bootstrap 4 cũng không còn giữ component well, panels, thumbnails.

Table với màu đen huyển ảo

Table với màu đen huyển ảo
Table với màu đen huyển ảo

Bản v4 đã bổ sung thêm class inverse cho table

Outline button

Outline button

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

Và Còn rất nhiều tính năng nữa trong bản 4 này.

via thuyvk.com

Load More Related Articles
Load More By Dong
Load More In Bootstrap