Kích thước gói Bootstrap 5

Thiết kế web đáp ứng là 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

Bootstrap 5 Ví dụ

Trang Bootstrap đầu tiên của tôi

Thay đổi kích thước trang phản hồi này để xem hiệu ứng

Cột 1

Lorem ipsum dolor sit amet, consectetur adipisizing elit

Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris

Cột 2

Lorem ipsum dolor sit amet, consectetur adipisizing elit

Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris

Cột 3

Lorem ipsum dolor sit amet, consectetur adipisizing elit

Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris

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 (phát hành năm 2013);

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 vanilla JavaScript thay vì jQuery

Ghi chú. 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à 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 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 đ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 trên thiết bị di động. Trong Bootstrap, các kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi
• Tính tương thích của trình duyệt web. 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

Bootstrap 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ó vào 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

Một lợi thế của việc sử dụng Bootstrap 5 CDN.
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, 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 một khi người dùng yêu cầu một tệp từ nó, nó sẽ được phục vụ 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ư phương thức, chú giải công cụ, cửa sổ bật lên, v.v.). Tuy nhiên, nếu bạn chỉ sử dụng phần CSS của Bootstrap thì không cần chúng.

Đang tải xuống Bootstrap 5

Nếu bạn muốn tự tải và lưu trữ Bootstrap 5, hãy truy cập https. //getbootstrap. com/, và làm theo hướng dẫn ở đó

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 và tiêu đề và bộ ký tự chính xác

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

Bootstrap 5 được thiết kế để tương thích với các thiết bị di động. Kiểu đầu tiên trê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 cảm ứng, hãy thêm thẻ sau vào bên trong phần tử

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. Hộp đựng

Bootstrap 5 cũng yêu cầu phần tử chứa để bọc nội dung trang

Có hai lớp container để lựa chọn

1. Lớp .container cung cấp vùng chứa chiều rộng cố định đáp ứng
2. Lớp .container-fluid cung cấp một thùng chứa có chiều rộng đầy đủ, bao trùm 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 chiều rộng cố định đáp ứng)

Ví dụ về vùng chứa

 My First Bootstrap Page

Phần này nằm trong một. lớp chứa

Các. lớp container cung cấp một thùng chứa có chiều rộng cố định đáp ứng

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 đầy đủ)

Ví dụ về chất lỏng container

 My First Bootstrap Page

Phần này nằm trong một. lớp chứa chất lỏng

Các. lớp container-fluid cung cấp một thùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của khung nhìn

Bootstrap 5 lớn cỡ nào?

Bootstrap 5 hiện có ổn định không?

Bootstrap 5 có thân thiện với thiết bị di động không?

Bootstrap 5 có cần popper không?