Bootstrap 5 là framework phát triển web phổ biến nhất hiện nay. Học Bootstrap 5 dễ dàng hơn bạn nghĩ. Hãy cùng tôi khám phá cách sử dụng Bootstrap 5 cơ bản nhé!
Contents
Bootstrap là gì?
Bootstrap là một framework front-end miễn phí giúp bạn xây dựng website nhanh chóng và dễ dàng hơn bao giờ hết. Bootstrap cung cấp các mẫu thiết kế dựa trên HTML và CSS cho các phần tử như kiểu chữ, biểu mẫu, nút, bảng, thanh điều hướng, hình ảnh… và các plugin JavaScript tùy chọn. Ngoài ra, Bootstrap còn hỗ trợ tạo thiết kế web responsive.
Bạn đang xem: Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
Tại sao sử dụng Bootstrap?
Sử dụng Bootstrap có nhiều lợi ích như sau:
- Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể sử dụng Bootstrap.
- Responsive: CSS responsive của Bootstrap giúp website thích nghi với nhiều kích thước màn hình khác nhau như điện thoại, máy tính bảng và máy tính.
- Thiết kế ưu tiên thiết bị di động: Bootstrap sử dụng phương pháp ưu tiên thiết bị di động (mobile-first) là một phần cốt lõi của framework.
- Tương thích trình duyệt: Bootstrap 5 tương thích với hầu hết các trình duyệt phổ biến như Chrome, Firefox, Edge, Safari và Opera. Lưu ý rằng nếu bạn cần hỗ trợ trên IE11, hãy sử dụng Bootstrap 4 hoặc 3.
Sự khác biệt giữa Bootstrap 5 và Bootstrap 3 & 4
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 trình duyệt mới nhất và ổn định nhất, trừ Internet Explorer 11 và thấp hơn.
Điểm khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang sử dụng JavaScript thay vì 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ợ và cung cấp bản vá lỗi quan trọng. Bạn vẫn có thể sử dụng các phiên bản này mà không gặp vấn đề. Tuy nhiên, các tính năng mới sẽ chỉ có trong Bootstrap 5.
Nếu bạn muốn trải nghiệm những tính năng mới nhất của Bootstrap, hãy nhanh chóng chuyển sang phiên bản 5.
Ví dụ về Bootstrap 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 QuanTriMang.com</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 QuanTriMang.com</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 QuanTriMang.com</p>
</div>
</div>
</div>
Tải và sử dụng Bootstrap 5
Bạn có thể tải Bootstrap 5 từ trang chủ của framework: https://getbootstrap.com/ hoặc bấm vào nút dưới đây để tải ngay:
Xem thêm : 10 kỹ năng mềm cần thiết mà lập trình viên cần biết
Ngoài ra, bạn cũng có thể sử dụng Bootstrap 5 trực tiếp từ một CDN (Content Delivery Network). jsDelivr là một dịch vụ CDN cung cấp hỗ trợ cho CSS và JavaScript của Bootstrap. Bạn chỉ cần thêm đoạn mã sau vào file HTML:
<!-- CSS mới nhất và đã được rút gọn -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript mới nhất được biên dịch -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Lợi ích của việc sử dụng Bootstrap 5 CDN:
Khi sử dụng Bootstrap 5 từ một CDN, có một số lợi ích bạn có thể nhận được. Các tệp tin sẽ được lưu trong bộ nhớ cache của trình duyệt của người dùng khi họ truy cập trang web của bạn, giúp giảm thời gian tải trang. Giao diện của trang web cũng sẽ được tải nhanh hơn do các tệp tin được truy cập từ máy chủ gần với người dùng.
JavaScript trong Bootstrap
Bootstrap 5 sử dụng JavaScript cho nhiều thành phần khác nhau như modals, tooltips, cửa sổ bật lên,… Tuy nhiên, nếu bạn chỉ sử dụng phần CSS của Bootstrap, bạn không cần phải sử dụng JavaScript này.
Xây dựng trang web đầu tiên với Bootstrap 5
1. Loại tài liệu HTML5
Bootstrap 5 yêu cầu loại tài liệu là HTML5. Bạn luôn nên đầu tư loại tài liệu này cho trang web của mình bằng cách thêm các thuộc tính cần thiết vào thẻ <head>
:
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Ví dụ về Bootstrap 5 trên QuanTriMang</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 ưu tiên thiết bị di động
Bootstrap 5 được thiết kế để tạo trang web responsive trên các thiết bị di động. Để đảm bảo website hiển thị và thao tác cử chỉ cảm ứng phù hợp, hãy thêm đoạn mã <meta>
sau vào phần tử <head>
:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Phần
width=device-width
sẽ đặt chiều rộng của trang theo chiều rộng của màn hình thiết bị (thay đổi tùy theo từng thiết bị). - Phần
initial-scale=1
sẽ đặt mức zoom ban đầu khi trang được tải lần đầu bởi trình duyệt.
3. Các Container
Bootstrap 5 yêu cầu một phần tử chứa để bao bọc nội dung của trang web. Có 2 lớp container để bạn có thể sử dụng:
-
Lớp
.container
cung cấp một vùng chứa có chiều rộng responsive cố định.
-
Lớp
.container-fluid
cung cấp một vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của khung nhìn.
2 trang Bootstrap 5 cơ bản
Dưới đây là ví dụ về hai trang Bootstrap 5 cơ bản, mỗi trang sẽ sử dụng một loại container khác nhau:
Ví dụ 1: Trang Bootstrap 5 với container có chiều rộng responsive cố định.
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Ví dụ 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 Bootstrap đầu tiên của QuanTriMang</h1>
<p>Phần này nằm trong một class .container</p>
<p>Class .container này cung cấp một vùng chứa có chiều rộng responsive cố định.</p>
</div>
</body>
</html>
Ví dụ 2: Trang Bootstrap 5 với container có chiều rộng toàn bộ trình duyệt.
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Ví dụ 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 Bootstrap đầu tiên của QuanTriMang</h1>
<p>Phần này nằm trong class .container-fluid</p>
<p>Class .container-fluid cung cấp một vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của khung nhìn.</p>
</div>
</body>
</html>
Cập nhật Bootstrap 5 mới nhất
Bootstrap 5.3.0
Chế độ tối
Xem thêm : Tìm hiểu về toán học và lập trình
Chế độ tối là một tính năng nổi bật của Bootstrap 5.3.0. Người dùng có thể bật chế độ tối để thay đổi giao diện của trang web phù hợp với môi trường sử dụng.
Để sử dụng tính năng này, bạn chỉ cần thêm thuộc tính data-bs-toggle="dark-mode"
vào nút hoặc liên kết bất kỳ.
Ví dụ:
<button type="button" class="btn btn-primary" data-bs-toggle="dark-mode"> Chế độ tối </button>
Tiện ích chỉnh kích thước font
Tiện ích này cho phép bạn thay đổi kích thước văn bản dễ dàng dựa trên một tỉ lệ đã được xác định trước. Bạn có thể sử dụng các lớp typography của Bootstrap để làm điều này.
Ví dụ:
<p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p>
Tiện ích Gutter
Tiện ích Gutter giúp bạn thêm khoảng cách giữa các cột trong hệ thống lưới mà không cần viết CSS tùy chỉnh.
Ví dụ:
<div class="row gx-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
Nắm vững những kiến thức cơ bản trên đây cho Bootstrap 5, bạn đã sẵn sàng tham gia vào quá trình học và sử dụng Bootstrap 5 trên QuanTriMang.com.
Nguồn: https://laptrinhc.edu.vn
Danh mục: Tài liệu IT