Cùng xem Bootstrap 5 alpha sẽ có những thay đổi gì ?

Bootstrap chính là một nền tảng framework hoàn toàn miễn phí, là một trong những mã nguồn mở được nhiều lập trình viên sử dụng để xây dựng dựa trên ngôn ngữ HTML, CSS và Javascript hiện nay. Với Bootstrap 5, nhà phát triển đã dần loại bỏ những gì lỗi thời, đặc biệt Bootstrap không còn phụ thuộc vào jQuery và chúng tôi đã giảm hỗ trợ cho Internet Explorer. Bootstrap 5 đang tập trung vào việc xây dựng các công cụ thân thiện hơn trong tương lai, tối ưu các biến CSS, JavaScript nhanh hơn, ít phụ thuộc hơn và API tốt hơn chắc chắn cảm thấy phù hợp.

Hiện nay mới chỉ là bản alpha, bây giờ chúng ta hãy xem Bootstrap 5 alpha sẽ có những thay đổi gì với một số điểm nổi bật dưới đây !

Diện mạo mới

Xây dựng trên các cải tiến cho trang chủ tài liệu của trong v4.5.0 với giao diện được cập nhật cho phần còn lại của tài liệu. Các trang tài liệu không còn đầy đủ chiều rộng để cải thiện khả năng đọc và làm cho trang web ít giống như ứng dụng hơn và giống nội dung hơn. Ngoài ra, B5 đã nâng cấp thanh bên của mình để sử dụng các phần có thể mở rộng (được hỗ trợ bởi plugin Collapse của chúng tôi) để điều hướng nhanh hơn.

Ngoài ra, cũng có Logo thương hiệu mới

Cùng xem Bootstrap 5 alpha sẽ có những thay đổi gì ?

jQuery và JavaScript

Như trên mình có giới thiệu là B5 lần này giảm jQuery. Đấy chính là thay đổi lớn nhất đối với khuôn khổ trong nhiều năm và có nghĩa là các dự án được xây dựng trên Bootstrap 5 sẽ nhẹ hơn đáng kể về kích thước tệp và tải trang.

Ngoài việc giảm jQuery, B5 thực hiện một số thay đổi và cải tiến khác cho JavaScript của chúng tôi trong v5 tập trung vào chất lượng mã và thu hẹp khoảng cách giữa v4 và v5. Một trong những thay đổi lớn hơn khác là bỏ phần lớn plugin Button của chúng tôi cho một cách tiếp cận HTML và CSS chỉ để chuyển đổi trạng thái. Bây giờ các nút chuyển đổi được cung cấp bởi các hộp kiểm và các nút radio và đáng tin cậy hơn nhiều.

Tùy biến CSS

Như đã đề cập, B5 đã bắt đầu sử dụng các thuộc tính tùy chỉnh CSS trong Bootstrap 5 nhờ giảm hỗ trợ cho Internet Explorer. Trong v4 bao gồm một số biến gốc cho màu sắc và phông chữ, và bây giờ B5 đã thêm chúng cho một số thành phần và tùy chọn bố cục.

Lấy ví dụ với .table

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

Cập nhật FORM

B5 đã hợp nhất tất cả các kiểu biểu mẫu thành một phần Biểu mẫu mới (bao gồm thành phần nhóm đầu vào) để cung cấp cho họ sự nhấn mạnh mà họ xứng đáng.

Cùng xem Bootstrap 5 alpha sẽ có những thay đổi gì ?
Cùng xem Bootstrap 5 alpha sẽ có những thay đổi gì ? 6

Cùng với các trang tài liệu mới, B5 đã thiết kế lại và hủy bỏ tất cả các điều khiển biểu mẫu của mình. Trong v4, chúng tôi đã giới thiệu một bộ điều khiển biểu mẫu tùy chỉnh phong phú — kiểm tra, radio, thiết bị chuyển mạch, tệp và hơn thế nữa — nhưng chúng ngoài bất kỳ mặc định nào mà mỗi trình duyệt cung cấp. Với v5, chúng tôi đã hoàn toàn tùy chỉnh.

Nếu bạn đã quen thuộc với đánh dấu biểu mẫu của v4, điều này sẽ không quá xa đối với bạn. Với một bộ điều khiển biểu mẫu duy nhất và tập trung vào việc thiết kế lại các yếu tố hiện có so với tạo ra các yếu tố mới thông qua các yếu tố giả, chúng tôi có giao diện nhất quán hơn nhiều.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Tiện ích API

B5 đã triển khai một API tiện ích hoàn toàn mới vào Bootstrap 5.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

Đội ngũ phát triển đã tạo một ngôn ngữ và cú pháp trong Sass để người dùng có thể tạo các tiện ích riêng cho chính mình một cách nhanh chóng đồng thời có thể sửa đổi hoặc xóa những tiện ích được cung cấp mặc định.

Hệ thống Gird nâng cao

  • B5 đã thêm một tầng lưới mới! .xxl
  • .gutter bị thay thế bằng utilities .g* giống như utilities margin/padding
  • Tùy chọn bố trí biểu mẫu đã được thay thế bằng hệ thống lưới mới.
  • Thêm các class cho cột
  • Cột không còn theo mặc định .position: relative

Đây là ví dụ

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Ngoài ra sắp ra mắt: RTL, offcanvas, và nhiều hơn nữa.

Xem thêm tại Bootstrap 5 alpha! | Bootstrap Blog (getbootstrap.com)