Tôi nên học Bootstrap 4 hay Bootstrap 5?

Nhóm đằng sau khung CSS phổ biến nhất Bootstrap đã phát hành phiên bản mới. Khi viết bài này, bản phát hành ổn định của Bootstrap 5 đã hết (các phiên bản) và có sẵn để sử dụng. Hãy cho chúng tôi xem những tính năng mới được giới thiệu này trong Bootstrap 5 là gì và sự khác biệt giữa Bootstrap 4 so với Bootstrap 5 là gì

Logo mới cho Bootstrap trong Phiên bản 5

Mặc dù có nhiều thay đổi cơ bản chẳng hạn như logo mới cho Bootstrap, chuyển sang Hugo từ Jekyll, trước tiên chúng tôi sẽ đề cập đến những khía cạnh ảnh hưởng đến các dự án phát triển web nhất

Có gì mới trong Bootstrap 5 dành cho nhà phát triển web

Như với bất kỳ thay đổi phiên bản chính nào, nhiều thứ đã thay đổi trong Bootstrap 5 so với Bootstrap 4. Dưới đây là danh sách những điểm khác biệt chính mà bạn cần lưu ý khi cập nhật các dự án cũ được xây dựng bằng Bootstrap 4 hoặc cũ hơn. Nếu bạn đang bắt đầu một dự án mới với Bootstrap 5 hoặc đang sử dụng các mẫu Bootstrap, thì việc ghi nhớ những thay đổi này sẽ giúp bạn đưa ra quyết định về việc chọn Bootstrap 5 thay vì Bootstrap 4

1. Vanilla JavaScript thay vì jQuery

Kể từ khi Bootstrap được giới thiệu, nó đã sử dụng jQuery như một phần phụ thuộc để cung cấp các tính năng động như mở rộng menu, băng chuyền, danh sách thả xuống, v.v. Tuy nhiên, sự phụ thuộc bắt buộc này vào jQuery không được nhiều nhà phát triển muốn sử dụng Bootstrap với các khung JavaScript hiện đại như React và Vue thích. js. Với Bootstrap 5, họ đã loại bỏ sự phụ thuộc này

Lưu ý rằng điều này không có nghĩa là không có sự phụ thuộc JavaScript trong Bootstrap 5. Các hành vi như thả xuống, thanh trượt, cửa sổ bật lên, v.v. trong Bootstrap 5 phụ thuộc vào Popper cũng như mô-đun JavaScript vani của riêng nó. Sẽ không có yêu cầu thêm jQuery. Nếu dự án của bạn phụ thuộc vào jQuery, bạn vẫn có thể thêm nó

2. Hỗ trợ trình duyệt – Đã xóa hỗ trợ IE 10 và 11

Với việc Microsoft chuyển hoàn toàn nỗ lực sang trình duyệt Edge, Internet Explorer đang nhanh chóng mất thị phần. Hơn nữa, Edge đã áp dụng công cụ crom nguồn mở cho phép nó có tất cả các tính năng JavaScript và CSS hiện đại ngang bằng với phiên bản Chrome và Firefox mới nhất. Vì điều này, nhóm Bootstrap đã bỏ hỗ trợ cho Internet Explorer, cho phép nó cung cấp một bộ tính năng hiện đại như biến CSS, JavaScript nhanh hơn và API tốt hơn

Đây là danh sách đầy đủ các trình duyệt mà Bootstrap 5 không còn hỗ trợ

• Đã bỏ Microsoft Edge Legacy
• Bỏ Internet Explorer 10 và 11
• Đã bỏ Firefox <60
• Safari bị rớt < 10
• Đã bỏ iOS Safari <10
• Chrome bị rơi < 60
• Android bị rớt <6

3. Thuộc tính tùy chỉnh CSS

Nhờ bỏ hỗ trợ cho Internet Explorer, Bootstrap 5 hiện hỗ trợ các thuộc tính CSS tùy chỉnh. Trong Bootstrap, 4 biến gốc chỉ có màu và phông chữ. Bootstrap 5 hiện cung cấp các biến CSS trong một số thành phần và tùy chọn bố cục. Ví dụ: thành phần bảng sử dụng các biến cục bộ để tạo các kiểu bảng sọc, có thể di chuột và hoạt động dễ dàng hơn

.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...
}

4. Bảng màu mở rộng

Nhiều khung CSS chẳng hạn như Tailwind cung cấp một bộ bảng màu phong phú đã khá phổ biến với các nhà phát triển. Bootstrap 5 hiện đã mở rộng bảng màu của nó để bao gồm nhiều màu hơn có các sắc thái khác nhau như $blue-100, $blue-200, $blue-300, …. , $blue-900. Điều này cho phép bạn dễ dàng tùy chỉnh giao diện của ứng dụng mà không cần rời khỏi cơ sở mã. Bạn có thể dễ dàng ghi đè các màu này bằng bảng màu của riêng mình bằng trình tạo sắc thái màu

5. Kiểm soát biểu mẫu được cập nhật

Bootstrap 5 bao gồm các điều khiển biểu mẫu được thiết kế tùy chỉnh. Trong Bootstrap 4, các điều khiển biểu mẫu đang sử dụng bất kỳ giá trị mặc định nào mà mỗi trình duyệt cung cấp. Trong Bootstrap 5, các điều khiển biểu mẫu sẽ mang lại giao diện nhất quán hơn nhiều trong tất cả các trình duyệt do thiết kế tùy chỉnh của nó

Tất cả các điều khiển biểu mẫu mới này đều được xây dựng trên các điều khiển biểu mẫu chuẩn, hoàn toàn có ngữ nghĩa và do đó không cần thêm đánh dấu bổ sung cho các điều khiển biểu mẫu và nhãn

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

6. API tiện ích

Một API tiện ích mới đã được tích hợp vào Bootstrap 5. Bạn có thể sử dụng Sass để tạo các tiện ích của riêng mình. Bạn cũng có thể sử dụng API tiện ích của Bootstrap để sửa đổi hoặc xóa các lớp tiện ích mặc định

"width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),

Giờ đây, bạn cũng có thể sử dụng tùy chọn state để tạo các biến thể lớp giả, chẳng hạn như :hover và :focus. Một ví dụ

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Các lớp tiện ích CSS được tạo ở trên

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

7. Hệ thống lưới nâng cao

Mặc dù Bootstrap 5 giữ cấu trúc hệ thống lưới đã được giới thiệu trong Bootstrap 4, nhưng nó tăng cường nó bằng cách thêm các lớp mới. Điều này có nghĩa là sẽ cần ít nỗ lực hơn để di chuyển cấu trúc lưới từ phiên bản cũ sang phiên bản mới hơn

Đây là những gì đã thay đổi trong hệ thống lưới Bootstrap 5

• Tầng lưới xxl mới
• Các lớp máng xối có thể được thêm vào lưới bằng các tiện ích .g*
• Các tùy chọn bố cục biểu mẫu đã được thay thế bằng hệ thống lưới mới
• Các lớp khoảng cách dọc đã được thêm vào
• Các cột không còn 

  
    
    
      Default checkbox
    
  
  
  
    
    
      Default radio
    
  
  
  
    
    Default switch checkbox input
  

  0 theo mặc định

8. Hỗ trợ lưới CSS

Bootstrap 5 đã giới thiệu phiên bản thử nghiệm của CSS Grid dưới dạng chọn tham gia thay thế cho hệ thống lưới mặc định. Việc sử dụng nó là không bắt buộc, tuy nhiên những người yêu thích CSS Grid trên Flexbox sẽ thích nó

9. Thành phần offcanvas mới và Navbar Offcanvas

Một thành phần offcanvas mới đã được thêm vào Bootstrap 5. Thành phần này có thể được sử dụng để tạo các thanh bên mở rộng để điều hướng hoặc cho giỏ hàng hoặc menu offcanvas. Các thành phần offcanvas này có thể được đặt ở bên trái, bên phải hoặc dưới cùng của chế độ xem và có thể được định cấu hình bằng các thuộc tính dữ liệu hoặc API JavaScript

Các lớp

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

1 cũng đã được mở rộng để bao gồm hỗ trợ cho offcanvases bên trong thanh điều hướng. Bạn có thể bọc các thành phần thanh điều hướng của mình bằng HTML offcanvas thích hợp và trỏ nút chuyển đổi thanh điều hướng của bạn vào menu offcanvas để nó hoạt động. Đọc để biết thêm thông tin

10. đàn phong cầm mới

Bootstrap 5 bổ sung hỗ trợ cho thành phần

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

2 hoàn toàn mới. Đàn accordion mới bao gồm Biểu tượng Bootstrap dưới dạng biểu tượng chữ V biểu thị trạng thái và khả năng nhấp chuột. Bạn cũng có thể sử dụng

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

3 để xóa 

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

4 mặc định, một số đường viền và một số góc bo tròn để hiển thị đàn accordions cạnh-cạnh với vùng chứa chính của chúng

11. Nhãn nổi trong Đầu vào biểu mẫu

Hỗ trợ nhãn nổi mới cũng đã được thêm vào trong bootstrap 5. Hành vi này tương tự như hành vi được hiển thị bởi nhiều khung giao diện người dùng thiết kế vật liệu, chẳng hạn như MDB. Các kiểu xác thực biểu mẫu cũng hoạt động như mong đợi với các nhãn nổi hiện tại

12. thành phần giữ chỗ

Một thành phần trình giữ chỗ mới đã được thêm vào cho phép bạn tạo giao diện người dùng trong khi ứng dụng của bạn vẫn đang tải

13. hỗ trợ RTL

Hỗ trợ RTL trong Bootstrap 5

Bootstrap 5 hiện bao gồm hỗ trợ RTL. Hỗ trợ RTL (từ phải sang trái) có nghĩa là bạn có thể xây dựng trang web bằng các ngôn ngữ như tiếng Ả Rập, tiếng Do Thái, tiếng Pashto, tiếng Ba Tư, tiếng Urdu và tiếng Sindhi. Các bài viết bằng các ngôn ngữ này bắt đầu từ bên phải của trang và tiếp tục ở bên trái, yêu cầu cài đặt kiểu cụ thể của riêng nó để phù hợp với thiết kế tổng thể của bạn. Giờ đây, Bootstrap 5 có hỗ trợ RTL trong bản dựng, bạn sẽ có thể sử dụng các phiên bản RTL của tệp Bootstrap CSS để tạo các trang web RTL. Kiểm tra tài liệu và cho RTL

14. Tùy chỉnh & chủ đề dễ dàng hơn

Bootstrap 5 cung cấp một phần Tùy chỉnh mới mở rộng trên trang theo chủ đề của v4 với nhiều nội dung và đoạn mã hơn để xây dựng trên các tệp Sass nguồn của Bootstrap. Dự án khởi động npm cũng được cung cấp để giúp bạn bắt đầu tùy chỉnh Bootstrap nhanh hơn. Thiết lập Bootstrap với Parcel hiện cũng được ghi lại

15. Thuộc tính dữ liệu được đặt tên

Bootstrap sử dụng các thuộc tính HTML để kích hoạt các hành vi JavaScript. Trong Bootstrap 5, tất cả các thuộc tính như vậy đã được đổi tên từ

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

5 thành

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

6. Do đó, tất cả các thuộc tính dữ liệu trong Bootstrap 5 hiện chứa

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

7 dưới dạng trung tố. Bạn sẽ cần tìm tất cả thay thế tất cả các thuộc tính dữ liệu như vậy khi chuyển từ Bootstrap 4 sang 5, tuy nhiên, về sau điều này sẽ giữ cho việc đặt tên thuộc tính dữ liệu của Bootstrap tách biệt với yêu cầu của bất kỳ thư viện nào khác hoặc của riêng bạn

16. thuốc phiện. v2

Chú giải công cụ và cửa sổ bật lên trong Bootstrap được cung cấp bởi Popper. js. Trong Bootstrap 5, v2 của Popper. js đã được thông qua mang lại những thay đổi đột phá nhỏ

• Đã xóa tùy chọn 

  
    
    
      Default checkbox
    
  
  
  
    
    
      Default radio
    
  
  
  
    
    Default switch checkbox input
  

  8 khỏi Chú giải công cụ/Cửa sổ bật lên và Danh sách thả xuống. Điều này hiện có thể đạt được bằng cách sử dụng tham số 

  
    
    
      Default checkbox
    
  
  
  
    
    
      Default radio
    
  
  
  
    
    Default switch checkbox input
  

  9
• Tùy chọn 

  "width": (
        property: width,
        class: w,
        values: (
          25: 25%,
          50: 50%,
          75: 75%,
          100: 100%,
          auto: auto
        )
      ),

  0 đã trở thành 

  "width": (
        property: width,
        class: w,
        values: (
          25: 25%,
          50: 50%,
          75: 75%,
          100: 100%,
          auto: auto
        )
      ),

  1

17. Thư viện biểu tượng SVG

Bootstrap hiện cung cấp thư viện SVG gồm hơn 1.000 biểu tượng dễ dàng tích hợp vào mã của bạn. Bạn có thể thêm các biểu tượng này bằng mã nội tuyến hoặc SVG sprite. Một phiên bản phông chữ web cũng sẽ được giới thiệu với bản phát hành ổn định của thư viện biểu tượng này. Chúng tôi đã sử dụng thư viện biểu tượng này trong các dự án hiện tại của mình (bao gồm cả Bootstrap 4) và nhận thấy nó khá rộng rãi

Biểu tượng Bootstrap

18. Tài liệu & ví dụ tốt hơn

Bạn cũng sẽ nhận thấy giao diện mới đối với trang web tài liệu Bootstrap 5 đã được cải tiến để cải thiện khả năng đọc. Thanh bên trong tài liệu hiện sử dụng các phần có thể mở rộng để điều hướng nhanh hơn. Bạn cũng sẽ tìm thấy các tài liệu Sass được cải thiện sẽ giúp bạn tùy chỉnh trải nghiệm Bootstrap mặc định

Các ví dụ mới đã được thêm vào với một số đoạn mã cho tiêu đề, anh hùng, jumbotron, tính năng và thanh bên

19. Hugo over Jekyll để tạo trang web

Trang web tài liệu của Bootstrap đã sử dụng Hugo thay vì Jekyll để tạo trang web tĩnh của nó. Hugo là trình tạo trang web tĩnh đa nền tảng phổ biến và nhanh chóng được viết bằng Go. Bạn có thể tìm hiểu về trình tạo trang tĩnh hàng đầu tại đây

20. Biểu trưng mới

Cuối cùng, Bootstrap 5 hiện có logo hoàn toàn mới (đính kèm ở đầu bài viết)

Bootstrap 5 so với Bootstrap 4 – Nên sử dụng cái nào?

Dưới đây là một số lý do khiến bạn muốn sử dụng Bootstrap 4 trong các dự án hiện tại của mình

• Dự án của bạn cần hỗ trợ cho IE 10 và IE 11
• Dự án của bạn phụ thuộc vào jQuery và bạn không cần các tính năng mới của Bootstrap 5
• Bạn đang sử dụng Bootstrap 4 và chưa muốn điều chỉnh các thay đổi đột phá mới của Bootstrap 5

Và đây là những lý do khiến bạn muốn chuyển sang Bootstrap 5 trong các dự án mới của mình hoặc cập nhật các dự án cũ hơn

• Bạn đang sử dụng React hoặc Vue. js và muốn sử dụng Bootstrap mà không phụ thuộc vào jQuery
• Bạn muốn sử dụng các tính năng mới của Bootstrap như bảng màu mở rộng, hệ thống lưới nâng cao, tiện ích tùy chỉnh, RTL, v.v.

Riêng tôi, tôi sẽ tiếp tục sử dụng Bootstrap 4 trong các dự án hiện tại của mình. Đối với các dự án web mới, tôi sẽ bắt đầu sử dụng Bootstrap 5 ngay để tận dụng các tính năng mới được giới thiệu. Từ từ, tôi sẽ nâng cấp các dự án hiện tại của mình để chuyển sang phiên bản mới hơn. Bạn có thể đọc hướng dẫn di chuyển chính thức sang v5 trên trang Bootstrap để kiểm tra các lớp khác nhau cần cập nhật và bất kỳ bước di chuyển bổ sung nào

Kiểm tra các mẫu Bootstrap của nhóm chúng tôi cũng như các Bộ giao diện người dùng Bootstrap này

Bootstrap là một trong những khung CSS đáp ứng phổ biến nhất mà các đại lý web và nhà phát triển web ưa thích. Có rất nhiều mẫu, chủ đề và thư viện dựa trên Bootstrap mà bạn có thể tìm thấy, chẳng hạn như các Mẫu Bootstrap tốt nhất này, các mẫu quản trị Bootstrap và Bộ giao diện người dùng Bootstrap

Bootstrap 4 hay 5 tốt hơn?

Tôi có nên học Bootstrap 4 hoặc 5 vào năm 2022 không?

Tôi nên học Bootstrap 4 hay 5 reddit?

Bootstrap 4 có đáng học vào năm 2022 không?