Bootstrap 4 tính năng mới và thú vị Bạn sẽ thích
Bản phát hành chính tiếp theo của khung Bootstrap nằm ở góc. Phiên bản alpha đã có thể được tải xuống từ trang web phát triển của Bootstrap và mã nguồn cũng có sẵn trên Github.
Twitter Bootstrap hiện là khung giao diện phổ biến nhất hiện có. Nó cho phép các nhà phát triển để xây dựng các trang web di động đầu tiên và đáp ứng, nhanh chóng. Bootstrap cho phép sử dụng thông minh bộ ba tiêu chuẩn HTML5, CSS3 và Javascript tiêu chuẩn. Nó hiện đang được sử dụng bởi hơn 6 triệu trang web trên web.
Mặc dù Bootstrap 4 vẫn đang trong giai đoạn phát triển (vì vậy chưa sử dụng nó trên một trang web trực tiếp), các nhà phát triển đã thực hiện một công việc tuyệt vời. Trong bài đăng này, chúng tôi sẽ xem xét phiên bản mới bao gồm nhiều tính năng tuyệt vời chắc chắn sẽ hợp lý hóa và cải thiện quy trình phát triển frontend.
1. Sass thay vì ÍT
Cho đến bây giờ Bootstrap đã sử dụng LESS làm công cụ chuẩn bị CSS chính của nó, nhưng đối với phiên bản chính mới, các quy tắc kiểu sẽ được tái cấu trúc cho Sass, phổ biến hơn nhiều đối với các nhà phát triển frontend, có cơ sở đóng góp rất lớn, thường dễ sử dụng hơn và cung cấp nhiều hơn khả năng. Nhờ vào Libsass Sass mạnh mẽ được viết bằng C / C++ Bootstrap 4 sẽ biên dịch nhanh hơn nhiều so với trước đây.
2. Tầng lưới mới cho màn hình nhỏ hơn
Bootstrap có một hệ thống lưới đáp ứng tinh vi cho phép các nhà phát triển nhắm mục tiêu các thiết bị có chế độ xem khác nhau. Bootstrap 3 hiện có 4 lớp lưới cho các cột, .col-xs-XX cho điện thoại di động, .col-sm-XX cho máy tính bảng, .col-md-XX cho máy tính để bàn, và .col-lg-XX cho máy tính để bàn lớn hơn. Bootstrap 4 sẽ tăng cường hệ thống lưới với hệ thống thứ năm sẽ tạo điều kiện cho các nhà phát triển nhắm mục tiêu các thiết bị nhỏ hơn dưới chiều rộng khung nhìn 480px.
Lớp lưới mới đã lấy tên của lớp nhỏ nhất trước đó và đẩy các tên hiện tại của các bậc lưới lên một bậc. Trong Bootstrap 4, các máy tính để bàn lớn sẽ sử dụng .col-xl-XX lớp chọn. Điều quan trọng cần biết là mặc dù tên mới, họ đã không thêm một lớp mới cho màn hình lớn hơn nhưng cho những cái nhỏ hơn.
3. Giới thiệu các đơn vị CSS tương đối
Bootstrap 4 cuối cùng đã bỏ hỗ trợ cho Internet Explorer 8. Đó thực sự là một bước thông minh vì nó cho phép họ thoát khỏi các polyfill phiền phức và chuyển đổi sang các đơn vị CSS tương đối. Thay vì pixel, bản phát hành chính mới sẽ sử dụng REM và EM điều đó làm cho nó có thể thực hiện kiểu chữ đáp ứng trên các trang web Bootstrap. Điều này cũng sẽ tăng khả năng đọc và giúp các trang web dễ truy cập hơn đối với người dùng bị vô hiệu hóa.
Nếu bạn muốn thử cách các đơn vị tương đối hoạt động với Bootstrap 4 mới, hãy xem bản demo này trên Codepen.
4. Thẻ Bootstrap hoàn toàn mới
Nhóm phát triển đã quyết định hợp nhất một số yếu tố trước đây trong giao diện người dùng của Bootstrap, vì vậy họ đã quyết định giới thiệu một thành phần UI mới được gọi là Thẻ. Thẻ sẽ thay thế các giếng, hình thu nhỏ và bảng điều khiển trước đây và sẽ cung cấp cho người dùng quy trình làm việc hợp lý hơn. Đừng lo lắng, thẻ sẽ giữ các yếu tố quen thuộc, chẳng hạn như tiêu đề, tiêu đề và chân trang của giếng, hình thu nhỏ và bảng điều khiển.
Vì thẻ sẽ linh hoạt hơn các thành phần UI hiện tại, chúng sẽ cho phép một không gian lớn hơn để triển khai sáng tạo. Có một số người tiên phong ngoài kia đã thực hiện các thí nghiệm về Codepen với Thẻ Bootstrap. Bạn có thể kiểm tra chúng hoặc tạo thẻ của riêng bạn.
5. Mô-đun khởi động lại mới
Mô-đun Reboot mới thay thế trước đó bình thường hóa đặt lại tập tin. Nó không bỏ rơi nó; ngược lại, nó xây dựng nhiều quy tắc hơn trên nó. Mục tiêu của việc di chuyển là bao gồm tất cả các bộ chọn CSS chung và các kiểu đặt lại trong một tập tin SCSS đơn, dễ sử dụng. Bạn có thể xem mã nguồn ở đây nếu bạn muốn hiểu rõ hơn về cách thức hoạt động của mô-đun mới.
Thật tốt khi biết rằng các kiểu đặt lại mới đặt thông minh thuộc tính CSS kích thước hộp thành hộp viền trên phần tử, do đó được kế thừa bởi mỗi phần tử con trên trang. Quy tắc phong cách mới làm cho bố trí đáp ứng dễ quản lý hơn. Nếu bạn muốn trải nghiệm sự khác biệt giữa các kiểu bố trí hộp nội dung và hộp viền, hãy xem bản demo tiện dụng này được cung cấp bởi CSS-Tricks.com (nó không được tạo cho Bootstrap 4, nó chỉ hiển thị cách định cỡ hộp nói chung hoạt động).
6. Hỗ trợ chọn tham gia Flexbox
Tuy nhiên, Bootstrap 4 cho phép tận dụng Bố cục Flexbox của CSS3 - vì Internet Explorer 9 không hỗ trợ mô-đun flexbox - phiên bản mặc định của Bootstrap 4 sử dụng các thuộc tính CSS nổi và hiển thị để thực hiện bố cục chất lỏng.
Flexbox có bố cục dễ sử dụng, có thể được sử dụng xuất sắc trong thiết kế đáp ứng, vì nó cung cấp một thùng chứa linh hoạt có thể mở rộng hoặc thu nhỏ lại để lấp đầy không gian có sẵn một cách tốt nhất. Chỉ sử dụng tính năng hộp chọn tham gia nếu bạn không cần cung cấp hỗ trợ cho IE9.
7. Tùy chỉnh biến hợp lý
Tất cả các biến Sass được sử dụng trong bản phát hành Bootstrap mới được bao gồm trong một tệp có tên _variables.scss, điều này sẽ hợp lý hóa đáng kể quá trình phát triển. Bạn không phải làm gì khác ngoài việc sao chép cài đặt từ tệp này sang tệp khác được gọi là _custom.scss để thay đổi các giá trị mặc định.
Bạn có thể tùy chỉnh nhiều thứ chẳng hạn như màu sắc, khoảng cách, kiểu liên kết, kiểu chữ, bảng, điểm dừng lưới và vùng chứa, số cột và chiều rộng máng xối, và nhiều thứ khác.
8. Các lớp tiện ích mới cho khoảng cách
Bootstrap 3 đã có nhiều lớp tiện ích thực tế, chẳng hạn như các lớp thay đổi trôi nổi hoặc xóa, nhưng Bootstrap 4 còn bổ sung thêm. Các lớp khoảng cách mới cho phép các nhà phát triển nhanh chóng thay đổi phần đệm và lề trên trang web của họ.
Cú pháp cho các lớp mới khá đơn giản, ví dụ như thêm .lớp m-a-0 liên kết một quy tắc phong cách mà đặt lề thành 0 trên tất cả các mặt của phần tử đã cho (lề-all-0). Trong khi lề sử dụng m- tiền tố, paddings được tạo kiểu với p- tiếp đầu ngữ. Trong các tài liệu phát triển, bạn có thể xem tất cả các lớp tiện ích khoảng cách mới.
9. Chú giải công cụ và Popovers được cung cấp bởi Tether
Trong Bootstrap 4 tooltips và popovers sử dụng thư viện Tether siêu tốc, một công cụ định vị cho phép giữ một phần tử được định vị tuyệt đối ngay bên cạnh một phần tử khác trên cùng trang. Điều này có nghĩa là chú giải công cụ và popovers sẽ được tự động đặt đúng cách trên trang web Bootstrap 4.
Đừng quên rằng Tether là thư viện JavaScript của bên thứ ba, bạn cần đưa riêng nó vào HTML trước tệp bootstrap.js của bạn.
10. Các plugin JavaScript được cấu trúc lại
Nhóm phát triển đã tái cấu trúc từng plugin JavaScript cho bản phát hành mới bằng EcmaScript 6. Với việc sử dụng thông minh các đặc tính mới nhất và các cải tiến mới nhất mà họ dự định cải thiện trải nghiệm frontend.
Bootstrap 4 mới cũng đã trải qua các cải tiến JavaScript khác, chẳng hạn như kiểm tra loại tùy chọn, phương pháp phá bỏ chung, và Hỗ trợ UMD, tất cả sẽ phối hợp với nhau để làm cho khung giao diện phổ biến nhất chạy trơn tru hơn bao giờ hết.
Đọc ngay: 10 lựa chọn thay thế nhẹ cho Bootstrap & Foundation
