Bootstrap là lựa chọn hàng đầu của các lập trình viên front-end. Đây là một khung một khung CSS, HTML và JavaScript. mạnh mẽ giúp chúng ta có thể dễ dàng phát triển một trang web hiện đại với các tính năng như khả năng đáp ứng di động.
Vào năm 2013, Bootstrap 3 đã được ra mắt và sau đó vào tháng 8 năm 2017 đã thấy phiên bản Bootstrap 4 được phát hành. Và đây cũng là hai phiên bản boostrap vẫn được nhiều người dùng nhất trên thế giới hiện nay. Vậy có khi nào bạn tự hỏi hoặc gặp câu hỏi rằng giữa hai phiên bản thứ 3 và thứ 4 này có gì khác nhau và chúng ta nên sử dụng phiên bản nào chưa? Nếu có thì bài viết này là bài viết mà bạn không thể bỏ qua.
Tại sao nên sử dụng Boostrap?
Không phải tự nhiên Bootstrap lại trở thành một trong những framework được sử dụng nhiều nhất trên thế giới để giúp các lập trình viên tạo ra các website. Nếu bạn thắc mắc đó là gì thì dưới đây là một số lí do tiêu biểu – thứ đã tạo nên “ chuẩn boostrap”.
- Do Bootstrapđược thiết kế dưới dạng các mô-đun nên nó dễ dàng tích hợp với hầu hết các mã nguồn mở phổ biến trên thị trường hiện nay như WordPress, Joomla,
- Bên cạnh đó Boostrap cũng rất dễ dàng sử dụngchỉ cần bạn có kiến thức cơ bản về HTML, CSS hay nhiều hơn là JavaScript thì bạn đã có thể sử dụng boostrap khá chuyên nghiệp.
- Ngoài ra, BS còn có tình năng Responsive rất mạnh mẽ giúp website của bạn có khả năng tự động điều chỉnh kích thước website phù hợp với kích thước màn hình của thiết bị như điện thoại, máy tính bảng,…
- Cuối cùng nó có khả năng tương thích nhiều trình duyệt phổ biến trên thị trường như: chrome, firefox, MS edge,…
Sự khác biệt giữa Boostrap 3 và Boostrap 4?
Về cơ bản là bootstrap 3 và bootstrap 4 khá tương tự nhau nhưng biên phản thứ 4 lại có một số loại chức năng và phương thức không giống nhau trong Bootstrap 3. Và dưới đây là một trong những điểm đáng chú ý nhất mà bạn cần lưu ý.
Mã nguồn CSS
Một trong những thay đổi lớn nhất trong cả hai phiên bản là các tệp nguồn CSS. Bootstrap 3 sử dụng LESS . và Bootstrap 4 sử dụng SCSS.
Do SCSS mạnh hơn LESS nên bạn cũng đã hiểu được phần nào tại sao BS4 lại mạnh hơn BS3 rồi đó.
Grid
Nếu chúng ta nhìn vào Bootstrap 4 Ở đó chúng ta có thể thấy hệ thống 5 Lưới (xs, sm, md, lg, xl) và ngược lại với bootstrap 4 trong bootstrap 3, chúng ta chỉ có thể thấy hệ thống 4 Lưới (xs, sm, md, lg).
Trong bootstrap 4, hệ thống XL Grid mới được cập nhật .
Hình ảnh
Hình ảnh cũng thay đổi trong phiên bản bootstrap 4. Trong phiên bản cũ chúng ta có thể thấy một lớp có tên “.img-responsive” được đổi tên trong phiên bản bootstrap 4 thành “.img-fluid” và, “.img-thumbnail”, cũng bị xóa khỏi phiên bản thứ 4 này.
Dropdown Structure
Dropdown Structure cũng đã được thay đổi giữa hai phiên bản này.
Trong bootstrap 3, trình đơn thả xuống sẽ tạo bằng cách sử dụng các thẻ <ul> và <li>. Nhưng trong bootstrap 4 , cấu trúc này đã được thay đổi thành <ul> hoặc <div>.
Boostrap 3
<div class=”dropdown”> <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”true”> Dropdown <span class=”caret”></span> </button> <ul class=”dropdown-menu” aria-labelledby=”dropdownMenu1″> <li><a href=”#”>Action</a></li> <li><a href=”#”>Another action</a></li> <li><a href=”#”>Something else here</a></li> <li role=”separator” class=”divider”></li> <li><a href=”#”>Separated link</a></li> </ul> </div>
Boostrap 4
<div class=”dropdown”> <button class=”btn btn-secondary dropdown-toggle” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”> Dropdown button </button> <div class=”dropdown-menu” aria-labelledby=”dropdownMenuButton”> <a class=”dropdown-item” href=”#”>Action</a> <a class=”dropdown-item” href=”#”>Another action</a> <a class=”dropdown-item” href=”#”>Something else here</a> </div> </div>
Tables
Trong cấu trúc bảng, chúng ta có thể thấy một sự thay đổi lớn. Nếu bạn có thể sử dụng cấu trúc bảng bootstrap 3 thì bạn phải thêm lớp .table-responsive trong bảng cha <div> của bảng . Nhưng nếu bạn đang sử dụng bootstrap 4 thì bạn phải thêm lớp này vào thẻ <table>.
Qua những điểm khác biệt giữa hai phiên bản boostrap ta có thể thấy Boostrap 4 có những cập nhật đáng kể và có thể thay thế được cho Boostrap 3. Tuy vậy dù Bootstrap 4 hỗ trợ các bản phát hành ổn định và mới nhất của tất cả các trình duyệt và nền tảng chính nhưng Internet Explorer 9 trở xuống lại không được hỗ trợ.
Tổng kết
Bootstrap 4 là phiên bản mới nhất của framework front end hàng đầu thế giới hiện nay với các thành phần mới, biểu định kiểu nhanh hơn và phản ứng nhanh hơn.
Nếu bạn cần hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản Bootstrap ổn định nhất và nó vẫn được hỗ trợ cho các lỗi nghiêm trọng và thay đổi tài liệu. Tuy nhiên, các tính năng mới sẽ không được thêm vào nó.
Nếu bạn muốn học mới Boostrap và muốn các website của mình mang xu hướng hiện đại hơn, và có tốc độ nhanh hơn thì bạn đừng chần chừ gì mà hãy chọn Boostrap 4.
Tài liệu tham khảo: www.designhub4u.com