Chuyển đổi bootstrap 4 thành 5 trực tuyến
|
Bootstrap đã là một công cụ thiết yếu cho các nhà phát triển web trong nhiều năm và đã duy trì tiêu chuẩn cao. Một trong những ưu điểm quan trọng nhất của Bootstrap là nó tương đối dễ sử dụng và dễ hiểu. Hiệu quả của một thứ, đặc biệt là trong vũ trụ công nghệ này, không có nghĩa là nó tối thượng và hoàn hảo, và do đó miễn nhiễm với sự cải tiến. Mọi thứ đều có thể được cải thiện và đó là lý do tại sao mặc dù Bootstrap 4 xuất sắc, vẫn có Bootstrap 5 được nâng cấp, có chất lượng mã tốt hơn. Một số trong số này là; Show
Một điều đáng chú ý khác ở đầu đống tin tức này là Vanilla JavaScript sẽ được sử dụng từ bây giờ trở đi thay cho jQuery vì Bootstrap đã ngừng hỗ trợ và phê duyệt thêm cho Internet Explorer 10 và 11. Ngoài ra, sự khác biệt đáng chú ý duy nhất giữa Bootstrap 4 và 5 là logo đã thay đổi. Thay đổi là một chút chỉnh sửa chữ B trong logo. Bài viết này tập trung vào các tính năng mới của Bootstrap 5 và cách di chuyển từ phiên bản 4 bằng cách đặc biệt chú ý đến các thay đổi về chức năng. Và một nguyên tắc hoạt động của cả cái mới và cái cũ cần lưu ý là bài viết chỉ đề cập đến phiên bản alpha có sẵn có thể đã thay đổi khi phát hành phiên bản beta. Mã nguồn Bootstrap 5Sau khi tải xuống các tệp zip cho mã nguồn, đây là điều đầu tiên được xem xét khi di chuyển sang Bootstrap 5, nhiều tệp có thể được tải xuống. Nhưng đặc biệt chú ý đến thư mục bụi. Điều này là do thư mục chứa các tệp JavaScript và CSS quan trọng nhất để Bootstrap 5 hoạt động Đánh giá từ những hình ảnh trên, sẽ đúng nếu bạn nhớ rằng có nhiều tệp bên trong zip. Nhưng trên thực tế và để tiết kiệm thời gian của bạn, bạn chỉ cần hai trong số các tệp này để có thể thực hiện chuyển đổi từ phiên bản 4 sang phiên bản 5 của Bootstrap. Hai loại tùy thuộc vào sự lựa chọn của bạn. Đối với phiên bản thông thường/chưa được tối ưu hóa, hãy tải xuống bootstrap. css và bootstrap. tập tin js. Nhưng nếu bạn muốn phiên bản rút gọn, bạn sẽ tải xuống tệp bootstrap. tối thiểu. css và bootstrap. tối thiểu. js Cài đặt Bootstrap 5Cài đặt Bootstrap 5 là một bài tập thú vị. Một lý do cho điều này là nó có thể được thực hiện theo nhiều cách khác nhau và bạn có cơ hội chọn những gì phù hợp với phong cách của mình. Các công cụ phát triển hiện đại như npm hoặc RubyGems có thể hữu ích khi cài đặt Bootstrap 5 của bạn. Bạn cũng có thể chỉ cần tải xuống và cài đặt các tệp hoặc thậm chí thông qua mã nguồn. Bạn quyết định cái nào là tốt nhất cho bạn theo sở thích và nhu cầu của bạn tập tin nguồn. Với sự trợ giúp của Sass và JavaScript, bạn có thể chọn biên dịch mã cho Bootstrap 5. Phiên bản bao gồm nhiều tài liệu kỹ thuật dễ sử dụng như Sass Compiler và Autoprefixer để nâng cao tiền tố nhà cung cấp CSS CSS và JS. Được trang bị các gói CSS và plugin JavaScript đã được biên dịch và rút gọn, Bootstrap 5 có thể được cài đặt dễ dàng và trơn tru bằng cách sử dụng tùy chọn mã được biên dịch này quản lý gói. Một trong những tính năng tốt nhất của Bootstrap là nó cung cấp cho bạn một danh sách các trình quản lý gói tương thích để sử dụng, giúp bạn không phải đau đầu trong quá trình này. Các trình quản lý gói như RubyGems, NuGet, npm, yarn và cComposer rất quan trọng đối với lập trình viên để tạo các điều kiện chính xác để dự án của bạn được thực thi trong. Bạn có thể hoàn thành việc cài đặt Bootstrap 5 từ bất kỳ trong số chúng Bootstrap CDN. Bạn cũng có thể đính kèm Mạng phân phối nội dung vào tệp HTML của mình để sử dụng Bootstrap 5 mới. Điều này phù hợp với những người không muốn làm gì với mã JavaScript và CSS đã được biên dịch sẵn Hỗ trợ trình duyệtNói về hỗ trợ di động, các phiên bản ít được hỗ trợ nhất lần lượt là phiên bản 6 và 7 dành cho Android (trên webview và trình duyệt) và iOS. Một số thuộc tính CSS không hoàn toàn hoạt động với điện thoại di động. Ngoài ra, các phiên bản iOS và Android cũ hơn không thể sử dụng hoặc tương thích với phiên bản Bootstrap mới Hãy nhớ rằng Internet Explorer 10 và 11 đã bị loại bỏ trong Bootstrap 5 được dịch trực tiếp cho lập trình viên sử dụng phiên bản trước của khung Bootstrap, rằng cần phải tùy chỉnh hệ thống hỗ trợ của họ để hỗ trợ phiên bản mới khi di chuyển từ . Google Chrome và Mozilla Firefox là những trình duyệt được hỗ trợ, cùng với Trình duyệt Microsoft Edge mới được công bố. Firefox cũng chứa phiên bản ESR mới nhất. Các loại trình duyệt khác không được hỗ trợ nhưng có thể có các trình duyệt thay thế trong một số trường hợp. Chromium, Chrome và Firefox có thể được sử dụng thay cho Linux. Hỗ trợ chính thức cũng không được cung cấp cho các trình duyệt thay thế sử dụng (trực tiếp hoặc cách khác) WebKit, Blink và Gecko Ngoài tất cả những thứ này, Bootstrap 5 được trang bị đầy đủ các trình xác thực, có thể giúp bạn sửa lỗi trên trình duyệt của mình. Trình xác thực là các chức năng mới thực sự là các bản hack trình duyệt hỗ trợ CSS giúp phân vùng các phiên bản trình duyệt và do đó xử lý các lỗi để cho phép sử dụng tốt hơn Thay đổi toàn cầuThế giới, thông qua công nghệ, đang bận rộn đổi mới và cạnh tranh với chính mình. Cái cũ không ngừng sinh ra cái mới. Sự khác biệt giữa cái cũ và cái mới có lẽ không quá sốc, vì hầu hết có những cải tiến về chức năng của các thành phần cũ của Bootstrap. Tuy nhiên, vẫn có những thay đổi như nhau. Những thay đổi này sẽ được thảo luận về sau bao gồm từ các điều khiển biểu mẫu đến hệ thống lưới và triển vọng mà chúng mang lại là rất lớn, để bắt đầu. Những tính năng này là 1. Kiểm soát biểu mẫu tốt hơnKhi sử dụng Bootstrap 4, cần thêm phần tử bao bọc. form-group để đảm bảo rằng lề kết quả là chính xác những gì bạn muốn. Mặc dù các phần tử 3 giống như các phần tử có lớp 4 có chiều rộng là 100%, cùng với các phần tử biểu mẫu như đầu vào và vùng văn bản. Đây là giao thức cần tuân theo cho Bootstrap 4, để có được đầu ra tối ưu. Nó đọc như vậyVấn đề với lớp 5 là đôi khi nó dễ bị dao động. Phiên bản 5 mới loại bỏ điều này và thay vào đó sử dụng hệ thống lưới. Nó xuất hiện như thế này trong triển vọngĐể thực hiện chức năng tương tự, Bootstrap 5 mới sử dụng phần cuối của điều khiển biểu mẫu đơn giản và hiệu quả hơn. 2. Bảng màu tốt hơnMột trong những hạn chế rõ ràng nhất của Bootstrap 4 là có một bảng màu hạn chế có thể được sử dụng để tùy chỉnh dự án của bạn theo giao diện mong muốn. Những thứ như độ dốc, bóng đổ, độ mờ và những thứ khác được gắn với điều này. Toàn bộ bộ công cụ để thêm chủ đề vào tác phẩm của bạn không phong phú. Nó có thể được thực hiện bằng bản đồ Sass, biến Sass và CSS tùy chỉnh. Bootstrap 5 cũng khác với phiên bản 4 về vấn đề này. Bạn sẽ không cần phải chuyển đổi qua lại từ cơ sở mã của mình sang Sass và CSS. Điều này là do, lần này, bảng màu đã được tích hợp sẵn. Không chỉ vậy, bảng màu đa dạng, cho bạn nhiều lựa chọn Bạn có thể đặt màu lựa chọn của mình, màu này có sẵn dưới dạng biến Sass và bản đồ Sass trong scss/_variables của Bootstrap. tập tin scss Tất cả những màu này đều có sẵn dưới dạng bản đồ Sass, 6biến scss/_. tệp scss chứa bảng màu, tất cả đều xuất hiện dưới dạng bản đồ Sass $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); 3. Hệ thống lưới nâng caoLớp lưới được hoàn thành với sáu giá trị mặc định, đó là. cực nhỏ (xs), nhỏ (sm), vừa (md), lớn (LG), cực lớn (xl), cực lớn (xxl) Các phiên bản trước của giới hạn Bootstrap ở một số khu vực. Các điểm dừng được cải thiện để cho phép nhiều hơn 1400px tĩnh của các phiên bản trước đó cũng nằm trong bố cục 12 cột. Điều này sẽ cho phép những người đang làm việc với màn hình rộng hơn tận dụng lợi thế và làm việc thoải mái hơn. Nếu có nhu cầu nhắm mục tiêu màn hình lớn hơn 1400px, lớp tiện ích sẽ đảm nhiệm việc đó, có thể sử dụng đoạn mã sau
4. lớp máng xốiGiữa các cột làm việc là các miếng đệm được gọi là máng xối. Chúng được tạo bởi phần đệm ngang. Để thêm máng xối tại một điểm ngắt cụ thể, cần đặt phần đệm, cả bên phải và bên trái trên mỗi cột và sử dụng lề âm để kích hoạt điểm bắt đầu và kết thúc mong muốn của mỗi hàng. Phần đệm cụ thể của điểm dừng có thể giúp căn chỉnh và sắp xếp nội dung trong hệ thống lưới. Đây không phải là trường hợp của phiên bản Bootstrap mới vì máng xối đã được thay thế bằng tiện ích 7. Ví dụ, để kiểm soát chiều rộng ngang của máng xối, bạn sẽ thực hiện với lớp 8
Chiều rộng dọc được kiểm soát bằng cách sử dụng 9
5. Các thành phần và tùy chọn bố cụcNhiều tùy chọn bố cục hơn đã được đưa vào phiên bản Bootstrap này. Người ta không thể không nhận thấy điều này 'trùng hợp' như thế nào với quyết định bỏ hỗ trợ cho Internet Explorer 10 và 11. Ví dụ, lớp $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );0 có thể tận dụng các biến cục bộ mới để tạo kiểu dễ dàng hơn bằng cách sử dụng Sass @mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--bs-table-bg: #{$background};
--bs-table-striped-bg: #{$striped-bg};
--bs-table-striped-color: #{color-contrast($striped-bg)};
--bs-table-active-bg: #{$active-bg};
--bs-table-active-color: #{color-contrast($active-bg)};
--bs-table-hover-bg: #{$hover-bg};
--bs-table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}6. Hỗ trợ JavaScriptTừ ba năm trước, nhóm phát triển của Bootstrap đã gợi ý rằng sớm muộn gì họ cũng sẽ loại bỏ jQuery như một phần phụ thuộc. Tuy nhiên, đó không còn là tin đồn hay thậm chí là tin tức ngày nay. jQuery đã bị loại bỏ và hiện được thay thế bằng vanilla JavaScript. Hy vọng cao về điều này. Có nhiều cải tiến và chỉnh sửa đối với cấu trúc và hoạt động hiện có của mã JS. Tuy nhiên, có sự chú ý đặc biệt đến việc cải thiện chất lượng mã từ phiên bản 4 đến 5 Các nút chuyển đổi được hỗ trợ bởi các hộp kiểm và nút radio được loại bỏ và thay thế bằng một lớp chỉ có CSS $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );1. Chuyển đổi plugin hàng loạt đã bị loại bỏ. Và bây giờ không cần thêm thứ tự $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );2 jQuery nữa Hãy để chúng tôi lấy một ví dụ để biết JS mới trông như thế nào trên Bootstrap 5. Nhiệm vụ trước mắt của chúng tôi là thêm một phương thức, sử dụng cả Bootstrap 5 và 4 Thư viện jQuery trở nên sống động ở đây khi bạn cố gắng viết phần phụ thuộc vào html của mình. Kiểm tra Để hoàn thiện chức năng, cần chèn mã jQuery này $('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})Để tạo hiệu ứng tương tự trong Bootstrap 5, cần thực hiện quy trình sau. Trước tiên, bạn thêm các phụ thuộc vào HTML mà không cần thư viện jQuery. Tiếp theo, bạn thêm đánh dấu phương thức Sau đó, bạn thêm mã này để xác định rằng phương thức được hiển thị vào thời điểm thích hợp. Điều này, khi được thực hiện một cách thích hợp, sẽ hoạt động hoàn toàn mà không cần jQuery 0Trình tạo trang web tĩnh mớiĐể triển khai một trang web đi kèm với các công cụ dễ sử dụng và phát triển hiệu suất tuyệt vời, lựa chọn tốt nhất là xây dựng một trang web tĩnh. Đừng ngủ trên đó. Nghĩ Jekyll, nghĩ Hugo Khung mà Bootstrap 4 cung cấp đồng bộ hóa hoàn hảo với Jekyll bằng Sass. Jekyll yêu cầu cài đặt Ruby trước khi nó có thể hoạt động và nó quá chậm. Tuy nhiên, đối với Bootstrap 5, các nhà phát triển đã đậu trong lô Hugo. Điều này là do nó trái ngược với Jekyll về vấn đề này. nhanh chóng, không cần hỗ trợ bên ngoài và trình tạo trang tĩnh có thể mở rộng. Bạn có thể muốn chuyển sang Bootstrap 5, và tất nhiên, sang Hugo. Bạn cần làm theo các bước sau i. Chạy qua các công cụ và cài đặt các phụ thuộc ii. Chạy dòng lệnh dưới dạng $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );3 iii. mở http. //máy chủ cục bộ. 9001/ trong trình duyệt của bạn Đối với những người không biết cách thức hoạt động của khung Bootstrap hoặc cách vận hành nó và những người không muốn bắt đầu xây dựng chủ đề của họ từ đầu, một số trang web nhất định cung cấp các mẫu để làm việc rất an toàn, thú vị và chắc chắn nên sử dụng. Hai trong số chúng được đánh dấu dưới đây 1. Bản dựng Bootstrap. Với hơn 20.000 người đăng ký và người dùng, Free Bootstrap Builder cung cấp trình biên dịch Sass, chủ đề bootstrap miễn phí, cơ sở dữ liệu đám mây để lưu tệp, trong số những thứ khác. Một điều cần lưu ý là Bootstrap Builder vẫn chưa hoạt động để tạo Bootstrap 5; . 5. 0 2. khởi động. Startup cũng là một trình tạo Bootstrap thú vị với cách sử dụng rất dễ dàng và dễ tiếp cận. Nó đã được thiết kế để sử dụng dễ dàng ngay cả với những người không biết trước về cách thức hoạt động của Bootstrap. Các tính năng chính là những. các yếu tố được mã hóa trước và thiết kế sẵn có thể dễ dàng tùy chỉnh; Thư viện biểu tượng SVGThư viện biểu tượng SVG. Chúc mừng nhóm phát triển. Bootstrap hiện tự hào về thư viện biểu tượng của nó. Được tạo tùy chỉnh và có thể truy cập để xem, các biểu tượng này có thể được khai thác để thực hiện tất cả các chức năng mà bạn có thể tưởng tượng cho chúng. Bootstrap 4 không có biểu tượng nào trong số này. Giờ đây, CSS có thể được sử dụng để tạo kiểu cho các biểu tượng mà không gặp sự cố. Và một phần thưởng nữa là các biểu tượng được tải xuống và mở rộng miễn phí bởi bất kỳ nhà phát triển nào. Chúng có thể được tải xuống qua npm hoặc thậm chí theo cách thủ công. Nếu bạn đang sử dụng thủ công, bạn sẽ cần tải xuống tệp zip Mặt khác, đối với npm, đây là mã 1Bạn có thể ở đó và sau đó chèn biểu tượng bạn chọn bằng svg 2Kỳ vọngTrong các phiên bản tương lai hoặc thậm chí là các phiên bản tiếp theo của Bootstrap 5, có nhiều thay đổi được chờ đợi. Tuy nhiên, đã có nhiều thay đổi rồi. Một số điều mong đợi là Việc sử dụng menu offcanvas thực hiện một số hành động thú vị khi người dùng nhấp vào các biểu tượng nhất định trên menu. Thêm vào đó, sự tích hợp của RTLCSS được mong đợi nhiều. Ngoài ra, trong số những thứ khác, có kỳ vọng cải thiện từ mã nguồn, hệ thống mô-đun Sass, thậm chí cả các thuộc tính tùy chỉnh CSS Không còn nghi ngờ gì nữa, Bootstrap 5 là một bản nâng cấp lớn so với các phiên bản trước đó nhưng có thể còn tốt hơn nữa. Lời khuyên tốt nhất bạn sẽ nhận được từ đây là bạn phải dùng thử trực tiếp. Làm những gì bạn có thể và xem nó có thể biến đổi dự án của bạn như thế nào. Chỉ sau đó, bạn mới có thể đánh giá cao nỗ lực đã đầu tư vào nó và xem nơi nào cần phải làm nhiều hơn nữa Tôi có thể nâng cấp Bootstrap 4 lên 5 không?Có sẵn, không cần thay đổi lớn nào để nâng cấp từ Bootstrap 4 lên Bootstrap 5 . Hầu hết các thay đổi được đảm nhận bởi chủ đề cơ sở, nhưng nếu chủ đề phụ có các tùy chỉnh, một số điều chỉnh đó sẽ cần được thực hiện trực tiếp trên chủ đề phụ.
Làm cách nào để nâng cấp Bootstrap 4 lên 5 Visual Studio?Trong Visual Studio, bạn có thể thử cập nhật Bootstrap bằng cách nhấp chuột phải vào dự án của bạn > Quản lý gói NuGet > Cập nhật > chọn “bootstrap” để cập nhật.
Bootstrap có tương thích ngược không?UA Bootstrap bao gồm các lớp tùy chỉnh sử dụng định dạng *-not. Các lớp này không được bao gồm trong Arizona Bootstrap, nhưng tương thích ngược và có thể được mở rộng bằng cách sử dụng kết hợp các lớp căn chỉnh văn bản có sẵn, cũng đáp ứng bằng cách sử dụng .
Sự khác biệt chính giữa Bootstrap 4 và 5 là gì?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. |
