1. Bootstrap là gì?
Bootstrap là một framework front-end miễn phí giúp người dùng phát triển web nhanh hơn và dễ dàng hơn. Bạn cứ nghĩ nó như một thư viện có sẵn khi cần thì chúng ta gọi ra vậy.
Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho các kiểu chữ, biểu mẫu, nút, bảng, điều hướng, hình ảnh..., cũng như các plugin JavaScript tùy chọn.
Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo các thiết kế website responsive.
Thiết kế web Responsive là gì?
Thiết kế web Responsive là việc tạo ra các website có thể tự động điều chỉnh để giao diện có thể đẹp trên các thiết bị: từ màn hình điện thoại nhỏ tới màn máy tính lớn.
2. Ưu điểm khi sử dụng Boostrap
- Dễ sử dụng: Bất cứ ai chỉ cần có kiến thức cơ bản về HTML và CSS đều có thể sử dụng Bootstrap.
- Tính năng Responsive: CSS Responsive của Bootstrap có thể giúp website điều chỉnh phù hợp với các kích cỡ màn hình khác nhau như điện thoại, máy tính bảng và máy tính.
- Phương pháp ưu tiên thiết bị di động: Trong Bootstrap, các style ưu tiên thiết bị di động (mobile-first) là một phần framework cốt lõi.
- Tương thích trình duyệt: Bootstrap 5 tương thích với tất cả các trình duyệt phổ biến hiện nay: Chrome, Firefox, Edge, Safari và Opera. Lưu ý rằng nếu bạn cần hỗ trợ có thể xem trên IE11 thì hãy sử dụng BS4 hoặc BS3.
3. Sự khác biệt giữa Bootstrap 5 với Bootstrap 3 & 4
Như đã nói từ đầu, Bootstrap 5 là phiên bản mới nhất của Bootstrap với các thành phần mới, stylesheet nhanh hơn và phản hồi linh hoạt hơn. Bootstrap 5 hỗ trợ các phiên bản ổn định, mới nhất của tất cả trình duyệt thông dụng hiện nay. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ.
Điểm khác biệt chính, dễ nhận thấy nhất giữa Bootstrap 5 và Bootstrap 3 & 4 là việc Bootstrap 5 đã chuyển sang JavaScript, không phải jQuery như ở các phiên bản trước.
Lưu ý: Bootstrap 3 và Bootstrap 4 vẫn được nhà phát triển hỗ trợ sửa những lỗi quan trọng và có thay đổi trong tài liệu hướng dẫn. Vì thế, bạn hoàn toàn có thể yên tâm khi sử dụng các phiên bản cũ. Tuy nhiên, những tính năng mới sẽ không xuất hiện trên chúng.
Nếu muốn trải nghiệm những tính năng mới nhất của Bootstrap, hãy chuyển ngay sang phiên bản 5.
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Đây là trang Bootstrap QuanTriMang</h1>
<p>Thay đổi kích thước trang này để xem hiệu ứng!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Cột 1</h3>
<p>Nội dung đoạn văn bản thứ nhất trong cột...</p>
<p>Những đoạn văn bản về sau, bạn có thể học Bootstrap 5 trên trang web </p>
</div>
<div class="col-sm-4">
<h3>Cột 2</h3>
<p>Nội dung đoạn văn bản thứ nhất trong cột...</p>
<p>Những đoạn văn bản về sau, bạn có thể học Bootstrap 5 trên trang web </p>
</div>
<div class="col-sm-4">
<h3>Cột 3</h3>
<p>Nội dung đoạn văn bản thứ nhất trong cột...</p>
<p>Những đoạn văn bản về sau, bạn có thể học Bootstrap 5 trên trang web </p>
</div>
</div>
</div>
4. Kết luận
Với bài viết trên tôi đã giới thiệu sơ qua về bootstrap và cụ thể là bootstrap 5 phiên bản mới nhất cũng như các ứng dụng của nó trong việc thiết kế website. Trong bài sau tôi lại chia sẽ với các bạn cách để chúng ta nhúng bootstrap vào trong web mà cụ thể là trên blogspot.