Sự khác biệt chính giữa bootstrap 3 và bootstrap 4 là gì?
|
Trong bài viết này, chúng ta sẽ thảo luận về Sự khác biệt giữa Bootstrap 3 và Bootstrap 4. Hiện tại, Bootstrap 4 là phiên bản mới nhất của Bootstrap. Bootstrap phiên bản mới đã đưa ra một số thay đổi quan trọng, thêm các thành phần mới, loại bỏ các thành phần khác Show
Có lẽ Bootstrap là lựa chọn hàng đầu của các lập trình viên front-end. Như chúng ta đã biết Bootstrap là một khung nguồn mở đáng tin cậy để phát triển một trang web và ứng dụng hiện đại một cách nhanh chóng. Khung HTML, CSS và JS phổ biến nhất để phát triển các trang web đáp ứng Bootstrap cung cấp cấu trúc cơ bản của HTML và CSS với các lớp được xác định trước, giúp bạn xây dựng chức năng nhanh chóng và dễ dàng với khả năng đáp ứng của thiết bị. Do đó, Nó tiết kiệm rất nhiều lần. Ví dụ: không cần phải bắt đầu phát triển từ đầu Sự khác biệt chính giữa Bootstrap 3 so với Bootstrap 41. Thay đổi toàn cầuĐã chuyển từ LESS sang SASS cho các tệp CSS nguồn. Bởi vì SASS mạnh hơn LESS. Ví dụ: SASS có chức năng như toán tử logic, vòng lặp, truy vấn phương tiện lồng nhau, mixin, mở rộng lớp và nhiều chức năng khác. Do đó, SASS mang lại sự thoải mái tốt hơn SASS giúp bạn sắp xếp hợp lý các bảng định kiểu lớn và giúp dễ dàng chia sẻ thiết kế trong dự án. Bạn cũng có thể đọc về hướng dẫn chính thức của SASS Bootstrap 4 được chuyển từ Kích thước phông chữ chung tăng từ 14px lên 16px Global ComponentBootstrap 3Bootstrap 4Tệp CSS nguồnLESSSCSSPrimary CSS UnitpxremMedia Queries UnitpxpxGlobal Font Size14px16pxDefault font-familyHelvetica Neue, Helvetica, Arial, sans-serifSử dụng phông chữ hệ thống, ưu tiên thứ 2 với dự phòng cho Helvetica Neue, Arial và sans-serif 2. Hệ thống lướiBootstrap 4 hiện diện lên đến 5 hệ thống lưới (______3, Bootstrap 4 đã loại bỏ GridBootstrap 3Bootstrap 4Grid Hệ thống lưới bậc 4 (xs, sm, md, lg)hệ thống lưới 5 (*, sm, md, lg, xl)Các cột bù đắpSử dụng lớp Bootstrap 3 Kích thước lướiBảng sau đây cho thấy các tùy chọn lưới Bootstrap 3 khác nhau hoạt động như thế nào với các kích thước khung nhìn khác nhau Thiết bị siêu nhỏ Điện thoại (<768px)Thiết bị nhỏ Máy tính bảng (≥768px)Thiết bị trung bình Máy tính để bàn (≥992px)Thiết bị lớn Máy tính để bàn (≥1200px)Chiều rộng vùng chứa Không có (tự động)750px970px1170px Tiền tố lớp Bootstrap 4 Kích thước lướiBảng sau đây cho thấy các tùy chọn lưới Bootstrap 4 khác nhau hoạt động như thế nào với các kích thước khung nhìn khác nhau Cực nhỏ 3. dẫn đườngViết lại thành phần điều hướng Bootstrap 4 bằng flexbox. Do đó, nó đã được đơn giản hóa rất nhiều trong Bootstrap 4. Hơn nữa, đã giới thiệu một vài lớp bổ sung như Điều hướngBootstrap 3Bootstrap 4Điều hướng nội tuyếnKhông có lớp Đã thêm các lớp Vì vậy, bạn có thể sử dụng các lớp Đã xóa các lớp
Sử dụng các tiện ích căn chỉnh flexbox sm3 để thêm biểu mẫu trong thanh điều hướng. Đã xóa lớp sm3. Sử dụng lớp sm5. Navbar FixedÁp dụng lớp sm6 và sm7 để cố định thanh điều hướng lên trên cùng hoặc dưới cùng. Áp dụng lớp sm8 và sm9 để sửa thanh điều hướng ở trên cùng hoặc dưới cùng. Hỗ trợ đóng dấu. Không được hỗ trợ. 4. Hình ảnh và đối tượng phương tiệnTrong Bootstrap 4, các lớp hình ảnh được đổi tên. Các đối tượng phương tiện được sử dụng flexbox để bạn có thể sử dụng các lớp flexbox khác Hình ảnhBootstrap 3Bootstrap 4Hình ảnh đáp ứngSử dụng lớp Sử dụng các lớp Hơn nữa, bạn có thể sử dụng các lớp lg5, lg6, lg7, lg8, lg9, xl0 và xl1Chỉ sử dụng lớp Các đối tượng phương tiện được kích hoạt flexbox để bạn có thể sử dụng các lớp flexbox khác nhau 5. Những cái bànBạn có thể tiếp tục sử dụng lớp ________ 73 trên phần tử cha ________ 74 của bảng để tạo các bảng đáp ứng. Bootstrap 4 đã thêm một lớp TablesBootstrap 3Bootstrap 4Responsive TablesThêm lớp Không có Ví dụ, Bootstrap 3 sử dụng lớp Cả hai phiên bản đều sử dụng 5 từ khóa theo ngữ cảnh ( Đã thêm Ví dụ, Bootstrap 4 sử dụng lớp 6. nútNút Bootstrap 3 Kiểu nút Bootstrap 4 ________ 48 Đổi tên lớp Các lớp rem03 được sử dụng cho thiết bị cực nhỏ. Bỏ hoàn toàn lớp rem03. Xem xét lớp rem05 tương đối nhỏ hơn trong v4. Outline Buttons Không được hỗ trợ. Giới thiệu các lớp rem06 để thêm kiểu nút viền cùng với màu viền7. Nhóm nútThành phần nhóm nút đã được viết lại bằng flexbox. Đã xóa khoảng cách giữa các nhóm nút trong thanh công cụ nút. Tuy nhiên, bạn có thể sử dụng các tiện ích lề để giãn cách Nhóm nút Bootstrap 3 Bootstrap 4 Nhóm nút cực nhỏ Lớp 8. Các hình thứcKhông có bất kỳ thay đổi đáng kể nào trong các thành phần biểu mẫu ngoại trừ một số lớp được đổi tên. Các phần tử biểu mẫu đặt lại kiểu di chuyển vào tệp Biểu mẫu Bootstrap 3 Bootstrap 4 Biểu mẫu ngang Để tạo biểu mẫu ngang Lớp Bỏ yêu cầu lớp học Đã thêm lớp rem17_______118 rem19rem20Đổi tên Ví dụ:
Cả hai lớp này được sử dụng để tăng và giảm kích thước của điều khiển đầu vào rem31____132Nhãn biểu mẫu rem33rem34Kích thước nhãn biểu mẫuKhông có bất kỳ loại cụ thể nào. Có sẵn rem35 và rem36 để tăng hoặc giảm kích thước của nhãn. Nhãn kiểm soátSử dụng Lớp rem34 and rem40 when using grids for form layout.Static TextThe rem41 class used to set plain static text.The rem42 class used to set plain static text.Help TextThe rem43 class used to display help text.The rem44 class used to display help text.9. Nhóm đầu vàoCác thành phần nhóm đầu vào hiện dành riêng cho vị trí của chúng so với Đầu vào Nhóm đầu vàoBootstrap 3Bootstrap 4Lớp_______145 và Bootstrap 4 đã loại bỏ lớp Giới thiệu hai lớp mới Hơn nữa, Bootstrap 4 cũng giới thiệu lớp 10. Liệt kê các nhómViết lại thành phần này bằng flexbox List GroupsBootstrap 3Bootstrap 4Linked ItemsAdd 11. thả xuốngCác thành phần thả xuống được xây dựng lại với các kiểu và đánh dấu mới. Danh sách thả xuống có thể được tạo bằng phần tử DropdownsBootstrap 3Bootstrap 4Cấu trúc thả xuốngTạo danh sách thả xuống bằng cách sử dụng phần tử danh sách Danh sách thả xuống có thể được tạo bằng phần tử Lớp rem64 được sử dụng để thêm các tiêu đề bên trong menu thả xuống (phần tử rem60). Lớp ________ 164 được sử dụng để thêm các tiêu đề bên trong menu thả xuống (phần tử ______ 74). Các mục menu bị vô hiệu hóa Lớp rem68 được sử dụng cho phần tử rem60. Lớp rem68 được sử dụng cho phần tử rem57. Bộ chia vật phẩm Lớp rem72 được sử dụng cho phần tử rem60. Lớp rem74 được sử dụng cho phần tử xl412. kiểu chữTất cả các kiểu Kiểu chữ Bootstrap 3 Bootstrap 4 Tiêu đề trang Lớp Rớt lớp Tất cả các phong cách của nó có thể được áp dụng thông qua các tiện ích Mô tả ListsLớprem80 dùng để hiển thị danh sách theo chiều ngangBỏ lớp Sử dụng rem86. Giới thiệu lớp rem87 để áp dụng các kiểu trên phần tử rem86. Blockquote AlignmentSử dụng lớp rem89 để đặt blockquote ở bên phảiRớt lớp Sử dụng các tiện ích văn bản để căn chỉnh các đoạn trích dẫn Ví dụ 13. Bảng điều khiển, hình thu nhỏ và giếngCác thành phần bảng, giếng và hình thu nhỏ bị loại bỏ hoàn toàn và thêm thành phần thẻ mới. Hơn nữa, các thành phần này đã được xây dựng với flexbox CardsBootstrap 3Bootstrap 4Bảng điều khiển, giếng và hình thu nhỏ
Lớp
14. phân trangThành phần này được viết lại bằng flexbox Phân trangBootstrap 3Bootstrap 4Phân trang Chỉ yêu cầu lớp Yêu cầu lớp Lớp Ví dụ: lớp px27 và px28 để căn chỉnh máy nhắn tin. Đã xóa trong Bootstrap 415. Các thành phần khácSau đây là một vài thành phần khác thể hiện sự khác biệt giữa Bootstrap 3 và Bootstrap 4 Thành phầnBootstrap 3Bootstrap 4Breadcrumbs Sử dụng lớp Không sử dụng bất kỳ lớp nào trên con cháu của Sử dụng cùng lớp Giới thiệu lớp px36 cho các jumbotron toàn chiều rộng. Giới thiệu lớp px36 cho các jumbotron toàn chiều rộng. Biểu tượng GlyphiconsĐược hỗ trợ. Không được hỗ trợ. Mở rộng nội dungLớp px38 để mở rộng nội dung. Lớp px39 để mở rộng nội dung. Nhãn và huy hiệuBạn có thể sử dụng lớp px40 để tạo huy hiệuTương tự, bạn cũng có thể sử dụng lớp phù hiệu có thể sử dụng với lớp px43. Sử dụng lớp px44. Thanh tiến trìnhTạo thanh tiến trình bằng phần tử Lớp Ví dụ, Đã thay thế lớp Ví dụ, Suy nghĩ cuối cùngLiên tục Bootstrap có nhiều thay đổi và cải tiến để tạo ra một framework đẹp mắt, tương thích với mọi thiết bị. Hơn nữa, nhiều cải tiến mới trong hệ thống lưới, kiểu chữ, kiểu dáng và bố cục của các thành phần. Như vậy, bạn cần hiểu hết những thay đổi có trong Bootstrap 3 đến Bootstrap 4. Điều mà chúng ta đã thảo luận trong bài viết này, nó chắc chắn sẽ cải thiện kỹ năng phát triển và trải nghiệm người dùng của bạn Chúng tôi hy vọng bạn thấy bài viết này hữu ích. Hãy cho chúng tôi biết câu hỏi hoặc phản hồi của bạn nếu có thông qua phần bình luận bên dưới. Bạn có thể đăng ký nhận bản tin của chúng tôi và được thông báo khi chúng tôi xuất bản bài viết mới. Ngoài ra, bạn có thể khám phá tại đây các bài viết thú vị khác 2 điểm khác biệt quan trọng nhất giữa Bootstrap 3 Bootstrap 4 là gì?Bootstrap 3 có hệ thống lưới 4 tầng bao gồm xs, sm, md và lg. Bootstrap 4 có hệ thống lưới 5 tầng bao gồm xs, sm, md, lg và xl. 2. Đơn vị CSS trong Bootstrap 3 là px .
Tôi có nên nâng cấp Bootstrap 3 lên 4 không?Bạn nên biết rằng vẫn có hỗ trợ để tiếp tục sử dụng Bootstrap 3, nhưng do một số thay đổi phát sinh trong cấu trúc của Bootstrap 4 so với phiên bản trước, tốt hơn là bạn nên . .
Thành phần nào sau đây bị bỏ trong Bootstrap 4 từ Bootstrap 3?Hệ thống lưới
. Bootstrap 4 đã loại bỏ xs vì đây là điểm dừng thấp nhất. Tuy nhiên, Bootstrap 4 đã giới thiệu col-* bao gồm tất cả các thiết bị bắt đầu từ điểm dừng thấp hơn.
Sự khác biệt giữa Bootstrap 4 và Bootstrap 5 là gì?Đây là một khung nguồn mở từ cuối năm 2011 được sử dụng để thiết kế các trang web đáp ứng với cách tiếp cận ưu tiên thiết bị di động nhanh hơn và dễ dàng hơn. Bootstrap có sẵn cho HTML, CSS và JS.
. Sự khác biệt giữa Bootstrap 4 và Bootstrap 5 |
