Bootstrap 5 có tốt hơn 4 không

Bootstrap, khung CSS phổ biến nhất, đã có phiên bản mới. Phiên bản 5 mới nhất được phát hành chính thức vào ngày 5 tháng 5 năm 2021 và phiên bản 4 trước đó. 6 đã được hoàn thành vào ngày 18 tháng 1 năm 2018. Phiên bản 5 có rất nhiều tính năng mới cho các nhà phát triển web, hãy xem những gì

Tin tức tóm tắt, những gì đã thay đổi?

Vanilla JavaScript thay vì jQuery

Bootstrap đã sử dụng jQuery kể từ khi phát hành, nhưng phiên bản 5 đã sử dụng vanilla JavaScript. Điều này làm cho các khung JavaScript mới như React và Vue. js hoạt động dễ dàng hơn nhiều với Bootstrap

Hỗ trợ IE 10 và 11 đã bị xóa

Nhóm Bootstrap đã quyết định ngừng hỗ trợ cho Internet Explorer do thị phần nhỏ của nó và vì trình duyệt không hỗ trợ các tiêu chuẩn JavaScript và CSS hiện đại, mới nhất. Do đó, nó có thể cung cấp cho người dùng các tính năng hiện đại như biến CSS, JavaScript nhanh hơn và API nâng cao

Biểu tượng và phông chữ

Biểu tượng là một phần quan trọng trong giao diện người dùng của các trang web và ứng dụng. Trong Bootstrap 4, chúng ta cần sử dụng các tệp bên ngoài, FontAwesome, các biểu tượng phẳng của các biểu tượng của riêng chúng ta. Bootstrap 5 có các biểu tượng dựa trên SVG tích hợp sẵn. Các biểu tượng này được phát triển bởi Figma, được xuất ở định dạng SVG và trông rất tuyệt

Lớp mới, màu mới, hệ thống lưới mới

Bootstrap 5 giữ lại cấu trúc được giới thiệu trong Bootstrap 4 và thêm các lớp mới vào nó. Đây là những tin tức

• Cấp lưới xxl mới (>1400px)
• Các lớp máng xối có thể được sử dụng bằng cách thêm .g*
• Hệ thống lưới mới và điều khiển tùy chỉnh cho biểu mẫu
• Các lớp khoảng cách dọc
• Các cột không còn nhận được một vị trí tương đối cơ bản

Nhiều khung CSS, chẳng hạn như Tailwind, cung cấp nhiều màu sắc mà các nhà phát triển thực sự thích. Bootstrap có 5 bảng màu mở rộng, bạn có thể sử dụng nhiều màu và nhiều sắc thái hơn, chẳng hạn như $100-blue, $200-blue, $300-blue, …, $blue-900. Chúng ta có thể ghi đè lên những màu này bằng bảng màu của riêng mình nếu cảm thấy thích

Bootstrap 5 đã giới thiệu phiên bản thử nghiệm của CSS Grid thay thế hệ thống lưới mặc định. Công dụng của nó thì tùy, nhưng ai thích thì tùy.

Những ngày này nghe từ Bootstrap rất nhiều và tự hỏi nó là gì? . Trang web đã trở thành một phần không thể thiếu của bất kỳ doanh nghiệp nào dù lớn hay nhỏ. Nó cần những gì để xây dựng một?

Bootstrap là gì?

Bootstrap là một framework phát triển front-end miễn phí và mã nguồn mở. Bootstrap giúp xây dựng trang web và web nhanh chóng. Đây là khuôn khổ phổ biến nhất trên thế giới để xây dựng ứng dụng đáp ứng, ưu tiên thiết bị di động trên web. Lý tưởng nhất là Bootstrap tiết kiệm thời gian từ việc viết nhiều mã CSS và cho chúng tôi nhiều thời gian hơn để thiết kế trang web

Bootstrap 4 so với Bootstrap 5

Các phiên bản của Bootstrap

Vào ngày 29 tháng 10 năm 2014, phiên bản đầu tiên của Bootstrap 4 được phát hành và sau đó phiên bản cuối cùng được phát hành vào ngày 19 tháng 1 năm 2018. Nó là phiên bản kế nhiệm của Bootstrap 3. Và Bootstrap 5 được phát hành vào ngày 16 tháng 6 năm 2020. Và Bootstrap 5 là Bootstrap 4 với một số cập nhật và thay đổi mới

Bootstrap 5 = Bootstrap 4 + Bản cập nhật mới với một số thay đổi mới

Hãy để chúng tôi xem xét các bản cập nhật và thay đổi trong những năm qua

Dựa trênBootstrap 4Bootstrap 5Grid SystemNó cung cấp 5 tầng lưới đáp ứng mặc định có tên là xs, sm, md, lg, xl. Nó cung cấp 6 tầng lưới đáp ứng mặc định có tên là xs, sm, md, lg, xl, xxlJavaScript/jQuery Nó phụ thuộc vào jQuery và phải sử dụng jQuery trước khi sử dụng bootstrap. Nó sử dụng Vanilla JavaScript thuần túy và đã loại bỏ jQuery. Hỗ trợ Internet ExplorerNó hỗ trợ IE10 và IE11 nhưng không hỗ trợ IE8 và IE9Nó không hỗ trợ IE10 và IE11ColorNó cung cấp cho chúng tôi hỗ trợ màu hạn chế. Nó đi kèm với một bảng màu mở rộng. Phông chữ và cỡ chữ Nó không cung cấp kích thước phông chữ đáp ứng mặc định. Nó cung cấp kích thước phông chữ Responsive mặc định, cho phép chia tỷ lệ văn bản một cách thích ứng trong tất cả các chế độ xem và thiết bị Thành phần biểu mẫu Mỗi Thành phần biểu mẫu trông khác nhau trên mỗi hệ điều hành và trình duyệt e. g. , nút radio, danh sách thả xuống, công tắc, hộp kiểm, v.v. Tất cả các Thành phần biểu mẫu đều có giao diện nhất quán được hỗ trợ trong tất cả các hệ điều hành và trình duyệt. Máng xốiNó đi kèm với. máng xối với kích thước phông chữ trong px. Mặc định. 30 pxNó đã giới thiệu. g* với cỡ chữ tính bằng rem. Mặc định 2rem và có nhiều quyền kiểm soát hơn về chiều rộng máng xối. Thuộc tính và biến tùy chỉnh CSS Nó không cung cấp bất kỳ thuộc tính tùy chỉnh nào cho các thành phần, tùy chọn bố cục, chẳng hạn như các thành phần bảng. Nó cung cấp lựa chọn Thuộc tính tùy chỉnh CSS cho các thành phần và tùy chọn bố cục. Lớp giãn cách dọckhông có lớp giãn cách dọc. Các lớp dọc cho khoảng cách. API Tiện ích và Trình trợ giúpChúng tôi không thể sửa đổi các lớp Tiện ích trong bootstrap. Trong khi thiết kế dự án, chúng ta có thể tạo tập hợp các lớp và kiểu của riêng mình bằng cách sử dụng API Tiện ích (các lớp tiện ích được tạo bằng các công cụ dựa trên SASS) Định vị Theo mặc định, cột hỗ trợ vị trí. relativeIt không còn hỗ trợ vị trí cho cột. tương đối theo mặc địnhBootstrap IconNó không cung cấp biểu tượng cho thư viện bootstrap. Nó cung cấp cho thư viện biểu tượng của riêng mình. Sử dụng các biểu tượng SVGHỗ trợ JumbotronJumbotron được sử dụng ở đây. Không có Bàn chơi bài Jumbotron Nó cung cấp một bộ bài (Được sử dụng để tạo một lưới bài có chiều cao và chiều rộng bằng nhau). Không còn hỗ trợ Bộ bài dưới dạng lưới trong bootstrap 5 cung cấp khả năng kiểm soát nhạy hơn. form-rowNó cung cấp các lớp form-row với máng xối nhỏ. Không có các lớp biểu mẫu và hỗ trợ bởi các lớp máng xối

Có gì mới trong bootstrap 5?

Nhiều thứ đã thay đổi với phiên bản Bootstrap 5 so với Bootstrap 4 sau khi nâng cấp. Hãy để chúng tôi chỉ ra những điểm khác biệt mà bạn cần tập trung vào khi di chuyển các dự án cũ hoặc bắt đầu một dự án hoàn toàn mới với Bootstrap 5

1. Vanilla JavaScript được giới thiệu ngoại trừ jQuery

jQuery là khung JavaScript (ứng dụng web bootstrap java) phổ biến nhất mọi thời đại. Và chúng tôi không gọi nó là tốt nhất cho bất cứ thứ gì, và đó là Khung JavaScript tốt nhất vì không có khung nào khác có thể hoàn thành jQuery khi bootstrap được tạo vào năm 2010. Vì vậy, chúng ta có thể nói rằng bootstrap đã được tạo ra, tưởng tượng jQuery là xương sống của nó. Tuy nhiên, một số nhà phát triển không thích sự phụ thuộc bắt buộc này vào jQuery. Họ muốn sử dụng bootstrap với các khung JavaScript (ứng dụng web bootstrap java) hiện đại như vue. js và phản ứng. Mặc dù bootstrap 5 loại bỏ sự phụ thuộc vào jQuery, nhưng sự phụ thuộc vào JavaScript trong bootstrap 5. Các thành phần như dropdown, slider popover, v.v. vẫn cần poppers và mô-đun JavaScript gốc của nó. Bạn có thể thêm jQuery nếu dự án của bạn yêu cầu, nếu không, sẽ không cần thêm jQuery

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

Ngoài các biến SASS của bootstrap5 đã được giới thiệu trong các thuộc tính CSS tùy chỉnh, điều này cuối cùng dẫn đến việc sử dụng lại mã được cải thiện và làm sạch mã bootstrap, giờ đây các biến CSS được sử dụng và truy cập bên trong JavaScript, để chúng tôi có thể thực hiện các thay đổi trên CSS. Do đó, chúng tôi không hoàn toàn phụ thuộc vào các biến SASS cho điều này. Đây là một trong những tính năng quan trọng của bootstrap5. Trong bootstrap5, chúng tôi có thể tùy chỉnh các thuộc tính CSS và trong Bootstrap 4, chúng tôi chỉ phụ thuộc vào các biến gốc cho màu sắc và phông chữ. e. g. , trong Bootstrap5, thành phần sẽ sử dụng các biến cục bộ để tạo kiểu cho phần tử. Chúng tôi phải thêm bs- vào tất cả các thuộc tính tùy chỉnh của mình để tránh mọi xung đột CSS

cho e. g
 

.styleDiv{Background-color: var(--bs-blue);font:2rem var(--bs-font-sans-serif);}

3. Bảng màu

Bootstrap 5 đã cho chúng ta một bảng màu lớn hơn. Nhiều khung CSS cung cấp cho chúng tôi các bộ bảng màu phong phú và khá phổ biến đối với các nhà phát triển. Nó có nhiều sắc thái, như $blue-100, $blue-200, $blue-300,…. , $blue-900. Nó cung cấp cho chúng tôi nhiều tùy chọn hơn để tạo kiểu cho dự án của chúng tôi và mang lại cho chúng tôi giao diện đẹp

Bảng màu mở rộng cho phép các nhà phát triển tự do làm cho ứng dụng trông đẹp mắt mà không cần thay đổi cơ sở mã. Nó có hơn 100 tính năng bảng màu. Ngoài ra, Bootstrap 5 đã cải thiện độ tương phản màu và bất kỳ ai cũng có thể dễ dàng ghi đè màu bằng bảng màu của mình bằng Trình tạo sắc thái màu

4. Điều khiển biểu mẫu được cập nhật

Trong bootstrap 5, không cần lớp tùy chỉnh. Theo mặc định, nó đi kèm với nút radio và hộp kiểm. Bootstrap 4 bao gồm nhãn điều khiển tùy chỉnh, đầu vào điều khiển tùy chỉnh và điều khiển tùy chỉnh, nhưng với phiên bản bootstrap mới nhất, chúng tôi không cần bất kỳ thứ nào trong số này. Bootstrap 5 bao gồm các Điều khiển biểu mẫu được thiết kế tùy chỉnh. Do thiết kế tùy chỉnh của nó, các điều khiển biểu mẫu sẽ cung cấp giao diện nhất quán hơn trên các trình duyệt

 
    
    // radio button with custom class Bootstrap 4 
    

        
        Custom radio
    

    //Bootstrap 5 radio button
    

      
      Radio
    
    
 

5. Kích thước phông chữ đáp ứng (RFS)

RFS đưa ra ý tưởng về cách thức hoạt động của nó. Khi khung nhìn trở nên nhỏ hơn, kích thước phông chữ cũng cần phải nhỏ hơn, tương ứng. Khó triển khai tính năng này với phiên bản bootstrap cũ. Chúng ta phải viết CSS cho truy vấn phương tiện và kích thước phông chữ theo văn bản. Do đó nó là tẻ nhạt. Nhiệm vụ tẻ nhạt này được thực hiện dễ dàng với bootstrap 5 bằng cách cung cấp kích thước phông chữ Responsive

6. Hỗ trợ Internet 10 và 11

Bootstrap 5 ngừng hỗ trợ Internet Explorer, giống như Internet Explorer, đang mất dần thị phần. Và chính Microsoft đang quảng cáo cho trình duyệt Edge. Hỗ trợ của Microsoft dành cho IE 10 đã kết thúc vào năm 2020 và trong một vài năm nữa, ngay cả IE 11 cũng sẽ bị tuyên bố là lỗi thời. Internet Explorer không hỗ trợ các tiêu chuẩn JavaScript và CSS mới nhất, vì vậy chúng tôi phải biên dịch mã từ ES6 sang ES5, điều này sẽ làm tăng quy mô của dự án. Đây là một số lý do khiến Bootstrap 5 bỏ hỗ trợ cho IE

Có nên chuyển sang bootstrap5 không?

Sử dụng các tính năng của Bootstrap thật dễ dàng và thoải mái khi xây dựng trang web của chúng tôi. Nó giúp chúng tôi tiết kiệm thời gian khi ứng dụng được xây dựng. Hiện tại, chúng tôi có phiên bản Bootstrap 5 alpha. Bạn có thể sử dụng các tính năng của phiên bản alpha của Bootstrap 5 để xây dựng các trang web đơn giản hoặc đợi phiên bản ổn định của nó, như trong Bootstrap 4

Kết nối với chúng tôi để có các dịch vụ phát triển bootstrap

Theo dõi bản tin email của chúng tôi

Bài viết phổ biến

Hình ảnh

Triển khai Google reCAPTCHA v3

Hình ảnh

Đọc các tính năng định tuyến cho máy chủ luôn bật

Hình ảnh

Hạch toán giá vốn và doanh thu trong EBS 11i, R12 và Oracle Fusion

Hình ảnh

Lợi ích của việc nâng cấp Oracle E-Business Suite lên Phiên bản 12 mới nhất. 2. 11

Hình ảnh

Tạo Trang chủ Lightning, Trang ứng dụng và Trang bản ghi

thẻ

Giới thiệu về tác giả

Pratiksha Shinde

Kỹ sư liên kết cao cấp, Cloud ADM - Microsoft

Pratikasha là một Kỹ sư liên kết cao cấp, người làm việc với tư cách là nhà phát triển giao diện người dùng trong tất cả các công nghệ giao diện người dùng. Cô ấy có 3 năm kinh nghiệm trong việc phát triển và phân phối Front-end. Cô đã thiết kế và phát triển giao diện người dùng cho nhiều dự án khách hàng với SharePoint, React JS và làm việc cho các dự án nội bộ (jCorpNet)

Bootstrap 4 hay Bootstrap 5 cái nào tốt hơn?

Bootstrap 4 hỗ trợ cả IE 10 và 11. Bootstrap 5 không hỗ trợ IE 10 và 11 . Các nút radio, hộp kiểm có giao diện khác nhau trong các hệ điều hành và trình duyệt khác nhau. Biểu mẫu sử dụng bất kỳ trình duyệt mặc định nào cung cấp.

Phiên bản Bootstrap nào là tốt nhất?

Phiên bản Bootstrap .

B3. Tìm hiểu Bootstrap 3 » Bootstrap 3 là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu

B 4. Tìm hiểu Bootstrap 4 ».

B5. Tìm hiểu Bootstrap 5 »

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

Bootstrap 4 và 5 gần như giống nhau ngoại trừ một số tính năng mới được thêm vào Bootstrap 5 . Trước khi học Bootstrap, hãy nắm vững kiến ​​thức cơ bản về CSS vì Bootstrap là một công cụ sử dụng CSS (Cascading Style Sheets) đằng sau hậu trường. Nói cách khác, nó là khuôn khổ của CSS.

Sử dụng Bootstrap 5 có tốt không?

Ưu điểm của Bootstrap. Dễ sử dụng . Bất kỳ ai chỉ có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap. tính năng đáp ứng. CSS đáp ứng của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn. Cách tiếp cận đầu tiên trên thiết bị di động. Trong Bootstrap, các kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi.