Bootstrap 5 là một framework lập trình phát triển web được yêu thích nhất hiện nay. Nếu bạn muốn tìm hiểu cách sử dụng Bootstrap 5 cơ bản, hãy cùng Quantrimang.com điểm qua những điều thú vị về framework này!

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 chóng và dễ dàng hơn. Nó 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 với các plugin JavaScript tùy chọn. Với Bootstrap, bạn cũng có khả năng tạo các thiết kế website responsive một cách dễ dàng.

Bootstrap 5

Tại sao sử dụng Bootstrap?

Ứu điểm khi sử dụng Bootstrap là:

• Dễ sử dụng: Bất cứ ai chỉ cần có kiến thức cơ bản về HTML và CSS cũng có thể sử dụng Bootstrap.
• Tính năng Responsive: CSS Responsive của Bootstrap 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ợ trên IE11, hãy sử dụng BS4 hoặc BS3.

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 ổ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 và 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 còn sử dụng 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. Tuy nhiên, các tính năng mới sẽ không xuất hiện trên chúng. 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 chuyển ngay sang phiên bản 5.

Ví dụ về Bootstrap 5

Dưới đây là một ví dụ về mã nguồn Bootstrap 5:

     
Đây là trang Bootstrap QuanTriMang
     
Thay đổi kích thước trang này để xem hiệu ứng!
 

Tải Bootstrap 5

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:

Tải Bootstrap 5

Ngoài ra, bạn cũng có thể sử dụng 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:

Lợi thế của việc sử dụng Bootstrap 5 CDN

Việc sử dụng Bootstrap 5 CDN có những lợi ích sau:

• Thời gian tải nhanh hơn: Nếu 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, 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.
• Tăng tốc độ tải trang: Hầu hết các CDN đả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 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:

2. Bootstrap 5 ưu tiên thiết bị di động

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ẻ sau vào trong phần tử :

• 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 trang web. Có 2 lớp container để bạn có thể lựa chọn và sử dụng:

• Class .container cung cấp một vùng chứa có chiều rộng cố định responsive.

• 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.

2 trang Bootstrap 5 cơ bản

Dưới đây là 2 ví dụ về trang Bootstrap 5 cơ bản:

Ví dụ 1: Trang Bootstrap đầu tiên của QuanTriMang

         
     
Trang Bootstrap đầu tiên của QuanTriMang
     
Phần này nằm trong một class .container
     
Class .container này cung cấp một vùng chứa có chiều rộng cố định responsive.
 
  

Ví dụ 2: Trang Bootstrap đầu tiên của QuanTriMang với vùng chứa chiều rộng full trang

         
     
Trang Bootstrap đầu tiên của QuanTriMang
     
Phần này nằm trong class .container-fluid
     
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
 
  

Cập nhật Bootstrap 5 mới nhất

Bootstrap 5.3.0

Chế độ tối

Đây là một trong số tính năng nổi bật của Bootstrap 5.3.0. Nút bật chế độ tối cho phép người dùng web chuyển đổi nhanh giữa nền sáng và tối phù hợp với điều kiện môi trườ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 bấm bất kỳ hoặc thành phần link.

Ví dụ:

Toggle Dark Mode

Tiện ích chỉnh kích thước font

Tiện ích này cho phép bạn điều chỉnh nhanh kích thước văn bản dựa trên tỉ lệ được xác định trước. Bạn có thể sử dụng chúng với class typography của Bootstrap.

Ví dụ:

This is the largest font size
 
This is a slightly smaller font size
 
This is a medium font size
 
This is a small font size
 
This is the smallest font size

Tiện ích Gutter

Bổ sung tuyệt vời này cho phép bạn thêm gutter vào giữa các cột trong bố cục lưới mà không cần viết CSS tùy biến.

Ví dụ:

     
Column 1
     
Column 2
 

Trên đây là những kiến thức cơ bản nhất của Bootstrap 5 mà 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 QuanTriMang.com nhé!