Bootstrap 5 là gì? bắt đầu như thế nào?
Bootstrap 5 (phát hành 2021) là phiên bản mới nhất của Bootstrap với nhiều thành phần mới, stylesheet và khả năng phản hồi nhanh hơn. Hãy theo dõi bài viết để hiểu và biết cách sử dụng Bootstrap 5 trên Sinitc.com nhé!
Bootstrap 5 là gì? Bắt đầu như thế nào?
Bootstrap 5 là gì? Bắt đầu như thế nào?
Bootstrap 5 (phát hành 2021) là phiên bản mới nhất của Bootstrap với nhiều thành phần mới, stylesheet và khả năng phản hồi nhanh hơn. Hãy theo dõi bài viết để hiểu và biết cách sử dụng Bootstrap 5 nhé!
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.
- 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.
Tại sao sử dụng Boostrap?
Ưu điểm khi sử dụng Boostrap là:
- 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.
Phiên bản Bootstrap
Bootstrap 5 (phát hành năm 2021) là phiên bản mới nhất của Bootstrap với nhiều thành phần mới, stylesheet và khả năng phản hồi nhanh hơn.
Bootstrap 5 hỗ trợ các phiên bản phát hành ổn định và mới nhất - của tất cả các trình duyệt cũng như platform 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 Vanilla JavaScript thay vì jQuery.
Lưu ý : Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ sửa lỗi và thay đổi tài liệu quan trọng, bạn vẫn hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được bổ sung vào.
Ví dụ về Bootstrap 5:
<div > <h1>Đây là trang Bootstrap Sinitc.com</h1> <p>Thay đổi kích thước trang này để xem hiệu ứng!</p> </div> <div > <div > <div > <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 Sinitc.com</p> </div> <div > <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 Sinitc.com</p> </div> <div > <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 Sinitc.com</p> </div> </div> </div>
Bạn có thể tải Bootstrap 5 từ trang chủ của hãng: https://getbootstrap.com/ hoặc tải theo nút tải dưới đây:
Ngoài ra nếu không muốn tải Bootstrap, bạn có thể dùng trực tiếp Bootstrap 5 từ một CDN (Content Delivery Network). jsDelivr cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap, bạn chỉ cần khai báo như sau:
<!-- 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 thế của việc sử dụng Bootstrap 5 CDN:
Có thể một số người dùng đã tải xuống Bootstrap 5 từ jsDelivr khi truy cập trang web khác có sử dụng Bootstrap 5 CDN. Do đó, nó sẽ được tải lại từ bộ nhớ cache khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu, các tệp cần thiết sẽ được truy cập tới 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 trong Bootstrap
Bootstrap 5 sử dụng JavaScript cho các thành phần khác nhau (như modals, tooltips, các 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 sẽ không cần chúng.
Cách tạo trang web đầu tiê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 là HTML5.
Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang, tiêu đề và charset chính xác:
<!DOCTYPE html> <html lang="en"> <head> <title>Ví dụ về Bootstrap 5 trên Sinitc.com</title> <meta charset="utf-8"> </head> </html>
Bootstrap 5 được thiết kế để responsive web trên các thiết bị di động. Để đảm bảo hiển thị và thao tác touch zoom phù hợp, hãy thêm thẻ <meta> sau vào trong phần tử <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Phần
width=device-widthsẽ đặ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=1sẽ đặ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 trang web. Có 2 lớp container để bạn có thể lựa chọn và sử dụng bao gồm:
- Class
.containercung cấp một vùng chứa có chiều rộng cố định responsive.
Classs .container trên Bootstrap 5
- Class
.container-fluidcung 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.
Classs .container-fluid trên Bootstrap 5
2 trang Bootstrap 5 cơ bản
Ví dụ sau là mã trang Bootstrap 5 cơ bản, với vùng chứa có chiều rộng cố định responsive:
<!DOCTYPE html>
<html lang="en">
<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 Sinitc.com</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 cố định responsive.</p>
</div>
</body>
</html>
Ví dụ sau là mã trang Bootstrap 5 cơ bản, với vùng chứa có chiều rộng full trang:
<!DOCTYPE html> <html lang="en"> <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 > <h1>Trang Bootstrap đầu tiên của Sinitc.com</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 xem</p> </div> </body> </html>
Trên đây là những kiến thức cơ bản nhất của Bootstrap 5 mà các bạn có thể nắm được. Hãy tiếp tục theo dõi các bài viết sau để hiểu và biết cách sử dụng Bootstrap 5 trên Sinitc.com nhé!
Chủ đề Tương tự
- Tags:
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!
S - Tech
Điện máy
Khoa học
Cuộc sống
Ô tô, Xe máy
Tiện ích
Công nghệ
Video
