Buzz
Bootstrap 5 là một framework lập trình mang lại trải nghiệm tốt hơn cho người dùng. Điều này làm cho nó trở thành lựa chọn hàng đầu hiện nay. Hãy tìm hiểu cách sử dụng Bootstrap thế hệ 5 và những khác biệt so với thế hệ 3, 4 trong bài viết dưới đây của Mytour để có thêm thông tin chi tiết nhé!
Bootstrap là gì?
Những tính năng mới của Bootstrap 5
Hiện tại, Bootstrap 5.0 là phiên bản mới nhất với nhiều tính năng và tiện ích hoàn thiện. Đi kèm với sự cập nhật đó, Bootstrap 5.0 mang đến nhiều điểm mới. Dưới đây là những điểm mới của Bootstrap 5 mà chúng tôi muốn chia sẻ với bạn:
Logo mới
Điểm thay đổi đầu tiên rõ rệt của Bootstrap 5 là việc thay đổi logo từ hình vuông sang cặp dấu ngoặc nhọn. Điều này không chỉ mang tính chất thẩm mỹ mà còn phù hợp với các đặc trưng của CSS. Mặc dù logo đã thay đổi, giá trị cốt lõi của Bootstrap 5 vẫn giữ nguyên, miễn phí và mã nguồn mở.
Loại bỏ JQuery
Cập nhật API toàn diện
Một trong những điểm đột phá của Bootstrap phiên bản 5 là cải tiến API tiện ích. Những thay đổi này rõ rệt qua hệ thống lưới được nâng cấp, phân lớp xxl được mở rộng. Ngoài ra, tùy chọn bố cục được thay thế bằng lưới mới và Bootstrap thế hệ 5 sẽ bổ sung các lớp mới để điều chỉnh khoảng cách theo chiều dọc. Không những thế, giá trị vị trí và tương đối không còn mặc định, người dùng có thể tùy chỉnh.
Một số thay đổi mới trong tiện ích ở Bootstrap 5 là khả năng đổi tên font-weight thành .ffw. Ngoài ra, lập trình viên có thể sử dụng .rounded-1, .rounded-2 và .rounded-3 với các kích cỡ khác nhau cho bán kính của border-radius. Đặc biệt, Bootstrap phiên bản 5.0 cho phép lập trình viên sử dụng thêm .overflow-visible và .overflow-scroll.
Tối ưu hóa CSS được cải tiến
Hướng dẫn chi tiết về cách sử dụng Bootstrap 5
Thêm tài liệu HTML 5 mới
Đầu tiên, người dùng cần tải xuống tài liệu HTML 5 với thuộc tính CSS. Tài liệu này sẽ luôn nằm ở đầu trang và có các thuộc tính ngôn ngữ và bộ ký tự charset.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ về Bootstrap 5 trên Mytour</title>
<meta charset=”utf-8″>
</head>
</html>
Sử dụng trên thiết bị di động
Bootstrap 5 được thiết kế để tương thích với thiết bị di động, vì vậy khi phát triển web, điều này rất quan trọng. Vì thế, hãy đảm bảo thêm thẻ <meta> vào trong phần tử <head> như sau:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Thiết lập Container
2 trang cơ bản của Bootstrap 5
Thông thường, Bootstrap thế hệ 5 cung cấp hai lựa chọn trang cơ bản là vùng chứa có chiều rộng cố định và chiều rộng toàn trang. Dưới đây là ví dụ về mỗi mã trang Bootstrap 5.0 để bạn tham khảo. Đây là hai trang web cơ bản được tối ưu cho thiết bị di động và toàn màn hình để bạn dễ dàng theo dõi. Về mặt cơ bản, đây là hai trang web đáp ứng với chiều rộng cố định:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ về Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div class=”container”>
<h1>Trang đầu tiên của Bootstrap trên Mytour</h1>
<p>Phần này nằm trong một class .container</p>
<p>Class .cung cấp một vùng chứa có chiều rộng cố định responsive.</p>
</div>
</body>
</html>
Tiếp theo, mã nguồn Bootstrap thế hệ mới với phần tử container có chiều rộng toàn màn hình sẽ có cấu trúc như sau:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ về Bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div class=”container-fluid”>
<h1>Trang đầu tiên sử dụng Bootstrap của Mytour</h1>
<p>Phần này nằm trong lớp .container-fluid</p>
<p>Lớp .container-fluid cung cấp một vùng chứa có độ rộng lớn, kéo dài toàn bộ chiều rộng của khung nhìn</p>
</div>
</body>
</html>
Trả lời các câu hỏi thường gặp
Như vậy, chúng tôi đã chia sẻ những thông tin cần thiết về Bootstrap 5 để bạn tham khảo. Tóm lại, đây là phiên bản Bootstrap mới nhất với nhiều điểm nổi bật hơn so với phiên bản trước. Đây cũng là lý do mà nó được lựa chọn sử dụng nhiều hơn. Dưới đây là các câu trả lời cho những câu hỏi thường gặp về Bootstrap để bạn có thể hiểu rõ hơn!
Bootstrap 5 có những khác biệt gì so với Bootstrap 3, 4
Trong phần chia sẻ phía trên, chúng tôi đã giới thiệu về Bootstrap là phiên bản mới nhất với các thành phần mới như stylesheet nhanh giúp tăng tốc độ phản hồi một cách linh hoạt hơn. Bên cạnh đó, Bootstrap 5 còn hỗ trợ những phiên bản ổn định của các trình duyệt phổ biến. So với Bootstrap thế hệ 3, 4, sự khác biệt rõ nhất là sự chuyển từ JQuery sang JavaScript.
Lưu ý rằng, Bootstrap 3, 4 vẫn được hỗ trợ để sửa lỗi quan trọng và có thể được tùy chỉnh trong tài liệu. Vì vậy, người dùng có thể yên tâm sử dụng các phiên bản cũ mặc dù không trải nghiệm được các tính năng mới của Bootstrap 5. Để tận hưởng những tính năng mới này, hãy tải xuống và làm theo hướng dẫn bên trên nhé!
Tại sao lại nên sử dụng Bootstrap?
Bootstrap và HTML khác nhau như thế nào?
Có cần thiết phải biết JavaScript khi sử dụng Bootstrap không?
Trong thực tế, bạn có thể sử dụng Bootstrap mà không cần hiểu biết về JavaScript. Tuy nhiên, đôi khi bạn có thể gặp khó khăn trong việc tùy chỉnh yếu tố hoặc tạo phần tử cho website. Để tận dụng hết các tính năng của Bootstrap, người dùng nên có kiến thức cơ bản về JavaScript. Ngoài ra, họ cũng nên tìm hiểu về các nguyên lý thiết kế web để sử dụng Bootstrap 5 hiệu quả.
Cam kết
Hãy theo dõi fanpage Mytour và kênh Mytour của chúng tôi để cập nhật những thông tin mới nhất, hữu ích nhất nhé!
