Cách nâng cấp bootstrap 4 lên 5 trong visual studio

Bootstrap 5 đang ở Giai đoạn Alpha và tất cả chúng tôi đều rất vui mừng về tin tức này vì bản cập nhật mới này từ Bootstrap cung cấp rất nhiều tính năng mới cũng như phá vỡ các thay đổi so với phiên bản cũ. Vì vậy, chúng tôi nên hết sức cẩn thận khi cập nhật Trang web hoặc Ứng dụng của bạn lên phiên bản mới

Mục lục

1. Có gì mới trong Bootstrap 5
2. Nâng cấp Bootstrap 4 lên 5

Nếu bạn muốn bỏ qua các tính năng v5 mới, hãy chuyển đến Hướng dẫn nâng cấp

Có gì mới trong Bootstrap 5

Trước khi chúng tôi nói về cách chúng tôi có thể nâng cấp trang web của mình lên phiên bản mới, trước tiên hãy kiểm tra các tính năng mới của Bootstrap v5

1. RIP jQuery

Đúng. Đây là điểm nổi bật đầu tiên của Bootstrap 5. Nó không đi kèm với jQuery theo mặc định. Tuy nhiên, họ không phạm sai lầm bằng cách loại bỏ hoàn toàn nó. Thay vào đó, Bootstrap hiện cung cấp tùy chọn cho người dùng bao gồm jQuery nếu họ muốn

Tất cả các thành phần của chúng hiện được hỗ trợ với Pure Vanilla Javascript. Nhờ các công cụ phát triển front-end hiện đại và hỗ trợ trình duyệt. Đây là những gì người sáng tạo của họ đã nói về việc loại bỏ jQuery như một phần phụ thuộc

Cá nhân tôi mãi mãi biết ơn vì đã trao quyền và hỗ trợ để tôi tiếp tục viết mã front-end. chính JavaScript đã thay đổi mãi mãi. Cảm ơn tất cả những người đóng góp cho jQuery đã tạo điều kiện cho những người như tôi

@mdo & nhóm

2. Biến CSS

Vì họ đã bỏ hỗ trợ cho Internet Explorer, nên thật dễ dàng để họ triển khai Thuộc tính tùy chỉnh CSS mới mà mọi người mong muốn. Khoảng cách giữa SASS và CSS đang giảm đi từng ngày

Không cần cài đặt và biên dịch phức tạp hơn chỉ để lưu trữ một số biến màu. vâng. Đây là cách nó trông giống như

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  ...

3. Tài liệu cải tiến

Đó là nơi chúng tôi dành phần lớn thời gian. Và Bootstrap 5 mới có tài liệu cải tiến. Giải thích thêm và phần Tùy chỉnh mới

4. Bảng màu

v4 được vận chuyển với màu sắc hạn chế. Chúng tôi phải tự tạo màu cho dự án của mình vì màu gốc không phù hợp với hầu hết các trường hợp sử dụng của chúng tôi. Nhưng Bootstrap v5 có rất nhiều màu sắc. thực sự rất nhiều. Hơn 100 biến thể màu hiện có sẵn để lựa chọn trong Bootstrap 5 mới

5. Biểu mẫu cập nhật

Một khu vực được tân trang lại là phần biểu mẫu. Nó hiện có các thành phần kiểu dáng mới và điều khiển biểu mẫu. Hộp kiểm là hộp radio hiện được tùy chỉnh theo mặc định. Không cần thêm lớp

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

1

6. API tiện ích

Kể từ khi Tailwind CSS trở nên phổ biến, Bootstrap 4 cũng cung cấp nhiều tùy chọn hơn để tạo các tiện ích. Họ đã xây dựng API Tiện ích hoàn toàn mới cho phiên bản mới

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

Đúng. nó vẫn dựa trên tính linh hoạt và họ chưa triển khai Lưới CSS, nhưng theo thông báo của họ, họ dự định sẽ làm như vậy trong tương lai. Vì nó sẽ là một sự thay đổi đột phá. Họ rất cẩn thận về điều này

Những người yêu thích lưới CSS phải đợi lâu hơn?

8. Biểu tượng Bootstrap

Ngay cả khi nó không liên quan đến phiên bản mới, nhưng Bootstrap hiện có thư viện Biểu tượng nguồn mở của riêng họ có tên là “Biểu tượng Bootstrap“. hãy chắc là kiểm tra chúng

9. Sắp có

Tại thời điểm viết v5 vẫn đang trong Giai đoạn Alpha. Theo thông báo của họ, sẽ có nhiều hơn nữa. Các tính năng như Hỗ trợ RTL chính thức (cuối cùng. ), Offcanvas và hơn thế nữa đang được chuẩn bị. Hãy nhớ kiểm tra trang Github của họ để biết thêm thông tin

---

Nâng cấp Bootstrap 4 lên 5

Chúng tôi sẽ liệt kê những thay đổi chính trong bootstrap v5 và sau đó chúng tôi sẽ chỉ cho bạn cách bạn có thể sửa đổi và cập nhật nó để làm cho nó tương thích với phiên bản Bootstrap 5 mới

Giảm. đối tượng truyền thông

Đây là một thay đổi đột phá vì Bootstrap 5 không xuất xưởng với đối tượng

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

0. Tuy nhiên, nó có thể dễ dàng chuyển đổi thành bootstrap 5 bằng cách sử dụng các lớp tiện ích. Xem mã dưới đây

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

Hộp kiểm tùy chỉnh và Radio

Trước đây trong Bootstrap 4, có hai tùy chọn cho các hộp kiểm. Mặc định và Tùy chỉnh. Trong v5, họ hợp nhất thành một

  
  Custom checkbox





  
  
    Default checkbox
  

Trình duyệt tệp

Đã cập nhật thành phần đầu vào tệp với cùng một thiết kế tổng thể, nhưng HTML được cải thiện. Tái cấu trúc đánh dấu

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

1 để giải quyết một số lỗi hình ảnh trong khi cho phép dịch và thay đổi văn bản nút thông qua HTML thay vì CSS.
Đã loại bỏ hoàn toàn các thành phần gốc

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

2 và

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

3. Đổi tên

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

4 thành

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

1 (bao gồm cả các biến).

  
  Choose file





  
  
    Choose file...
    Browse
  

Giảm. nhóm hình thức

Lớp nhóm biểu mẫu

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

6 đã bị xóa trong bootstrap 5 để ưu tiên cho các tiện ích ký quỹ. Đây là một trong những lớp bootstrap được sử dụng nhiều nhất. Vì vậy, hãy đảm bảo thay đổi nó theo mã bên dưới

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

1

Giảm. đầu vào-nhóm-chắp thêm và thêm vào trước

Bị rớt 

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

7 và 

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

8. Giờ đây, bạn có thể chỉ cần thêm các nút và

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

9 làm phần tử con trực tiếp của các nhóm đầu vào

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

5

Cột & Bộ bài bị Rớt

Đã xóa các cột thẻ để có lưới Masonry. Đã loại bỏ các bộ bài có lợi cho dạng lưới giúp tăng tính linh hoạt hơn đối với hành vi phản hồi

?

Xem bên dưới. Mã ví dụ cho Bộ bài v4 / Nhóm thẻ v5

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

6

Giảm. jumbotron

Thành phần jumbotron bị loại bỏ để nhường chỗ cho các lớp tiện ích như 

  
  Custom checkbox





  
  
    Default checkbox
  

0 đối với màu nền và 

  
  Custom checkbox





  
  
    Default checkbox
  

1 đối với lớp đệm

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

9

thanh điều hướng cần. thùng đựng hàng

Từ Bootstrap 5, tất cả các thanh điều hướng hiện yêu cầu một vùng chứa bên trong. Điều này đơn giản hóa đáng kể các yêu cầu về khoảng cách và loại bỏ nhu cầu ghi đè CSS mở rộng mà chúng tôi đã thêm cho các vùng chứa đáp ứng trong phiên bản 4

  
  

    
Media heading
    Media Content ...
  




  
  

    
Media heading
    Media Content ...
  

0

Có nhiều thay đổi hơn

Chúng tôi chỉ đánh dấu những Thay đổi Chính sẽ phá vỡ bố cục của bạn. Tuy nhiên, có rất nhiều thay đổi khác mà bạn cần kiểm tra trước khi Nâng cấp hoặc Di chuyển sang Bootstrap 5

?

Sự kết luận

Tôi hy vọng bây giờ bạn có thể dễ dàng chuyển đổi dự án Bootstrap 4 cũ của mình sang Bootstrap 5 với sự trợ giúp này. Nếu có. Hãy chia sẻ nó với các đồng nghiệp của bạn, những người cũng có thể cần sự giúp đỡ. Nếu bạn có bất kỳ đề xuất, nhận xét hoặc bất kỳ lỗi nào, vui lòng cho tôi biết trong phần nhận xét

Tôi có thể nâng cấp bootstrap 4 lên 5 không?

Bootstrap 4 có giống với bootstrap 5 không?

Bootstrap 5 có hỗ trợ bootstrap 4 không?

Bootstrap 5 có được phát hành đầy đủ không?