Bootstrap 5 Bắt đầu
Bootstrap là gì?
- Bootstrap là một framework front-end miễn phí để phát triển web nhanh hơn và dễ dàng hơn
- Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác, 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ế đáp ứng
Thiết kế web đáp ứng là gì?
Thiết kế web đáp ứng là việc tạo ra các trang web tự động điều chỉnh để trông đẹp mắt trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn.
Ví dụ về Bootstrap 5
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to
see the effect!</p>
</div>
<div class="container mt-5">
<div
class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div> Hãy tự mình thử »Phiên bản khởi động
Bootstrap 5 (phát hành 2021) là phiên bản mới nhất của Bootstrap (phát hành 2013); với các thành phần mới, biểu định kiểu nhanh hơn và khả năng phản hồi nhanh hơn.
Bootstrap 5 hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ.
Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang sử dụng JavaScript thuần thay vì jQuery.
Lưu ý: Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu và việc tiếp tục sử dụng chúng là hoàn toàn an toàn. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng.
Tại sao nên sử dụng Bootstrap?
Ưu điểm của Bootstrap:
- Dễ sử dụng: Bất kỳ ai chỉ có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
- Tính năng đáp ứng: CSS đáp ứng của Bootstrap điều chỉnh cho phù hợp với điện thoại, máy tính bảng và máy tính để bàn
- Cách tiếp cận ưu tiên thiết bị di động: Trong Bootstrap, kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi
- Khả năng 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 hiện đại (Chrome, Firefox, Edge, Safari và Opera). Lưu ý rằng nếu bạn cần hỗ trợ cho IE11 trở xuống, bạn phải sử dụng BS4 hoặc BS3.
Lấy Bootstrap 5 ở đâu?
Có hai cách để bắt đầu sử dụng Bootstrap 5 trên trang web của riêng bạn.
Bạn có thể:
- Bao gồm Bootstrap 5 từ CDN
- Tải xuống Bootstrap 5 từ getbootstrap.com
Khởi động 5 CDN
Nếu không muốn tự tải xuống và lưu trữ Bootstrap 5, bạn có thể đưa nó từ CDN (Mạng phân phối nội dung).
jsDelivr cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/ [email protected] /dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/ [email protected] /dist/js/bootstrap.bundle.min.js"></script> Một lợi thế của việc sử dụng CDN Bootstrap 5:
Nhiều người dùng đã tải xuống Bootstrap 5 từ jsDelivr khi truy cập một trang web khác. Do đó, nó sẽ được tải từ bộ đệm khi họ truy cập trang web của bạn, điều này dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết CDN sẽ đảm bảo rằng khi người dùng yêu cầu một tệp từ đó, tệp sẽ được phân phát từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.
JavaScript?
Bootstrap 5 sử dụng JavaScript cho các thành phần khác nhau (như modal, chú giải công cụ, cửa sổ bật lên, v.v.). Tuy nhiên, nếu chỉ sử dụng phần CSS của Bootstrap thì bạn không cần đến chúng.
Đang tải xuống Bootstrap 5
Nếu bạn muốn tự tải xuống và lưu trữ Bootstrap 5, hãy truy cập https://getbootstrap.com/ và làm theo hướng dẫn tại đó.
Tạo trang web đầu tiên của bạn với Bootstrap 5
1. Thêm loại tài liệu HTML5
Bootstrap 5 sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5.
Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang cũng như tiêu đề và bộ ký tự chính xác:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>2. Bootstrap 5 ưu tiên thiết bị di động
Bootstrap 5 được thiết kế để đáp ứng các thiết bị di động. Phong cách ưu tiên thiết bị di động là một phần của khung cốt lõi.
Để đảm bảo hiển thị chính xác và thu phóng bằng cách chạm, hãy thêm thẻ <meta> sau vào bên trong phần tử <head> :
<meta name="viewport" content="width=device-width, initial-scale=1"> Phần width=device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Phần initial-scale=1 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.
3. Thùng chứa
Bootstrap 5 cũng yêu cầu phần tử chứa để bao bọc nội dung trang web.
Có hai lớp container để lựa chọn:
- Lớp
.containercung cấp một thùng chứa có chiều rộng cố định đáp ứng - Lớp
.container-fluidcung cấp một thùng chứa có chiều rộng đầy đủ , trải rộng trên toàn bộ chiều rộng của khung nhìn
Hai trang Bootstrap cơ bản 5
Ví dụ sau đây hiển thị mã cho trang Bootstrap 5 cơ bản (với vùng chứa có chiều rộng cố định đáp ứng):
Ví dụ về vùng chứa
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</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>My First
Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width
container.</p>
</div>
</body>
</html> Hãy tự mình thử »Ví dụ sau hiển thị mã cho trang Bootstrap 5 cơ bản (có vùng chứa có chiều rộng đầy đủ):
Ví dụ về chất lỏng chứa
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</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>My First
Bootstrap Page</h1>
<p>This part is inside a .container-fluid
class.</p>
<p>The .container-fluid class provides a full width
container, spanning the entire width of the viewport.</p>
</div>
</body>
</html> Hãy tự mình thử »