Bootstrap là một trong những thư viện CSS phổ biến nhất. Nó cho phép các nhà phát triển dễ dàng sử dụng các kiểu và thành phần đẹp mắt và tạo các trang web đáp ứng. Sử dụng Bootstrap có thể tiết kiệm thời gian cho nhà phát triển, đặc biệt là với các thành phần được sử dụng trong hầu hết mọi dự án
Bootstrap 5 [phiên bản chính hiện tại, được phát hành vào tháng 5 năm 2021] đã mang đến vô số thay đổi và cải tiến, bao gồm việc bổ sung các thành phần mới, lớp mới, kiểu dáng mới cho các thành phần cũ, hỗ trợ trình duyệt được cập nhật, loại bỏ một số thành phần cũ,
Trong bài viết này, chúng tôi sẽ đề cập đến những gì đã thay đổi trong Bootstrap 5, những gì đã bị loại bỏ và thú vị nhất là có gì mới
Khi nào nên sử dụng Bootstrap [và khi nào thì không]
Bootstrap tự nhận mình là “khuôn khổ phổ biến nhất thế giới để xây dựng các trang web ưu tiên thiết bị di động, đáp ứng nhanh” và với 152 nghìn sao trên GitHub, tôi không nghĩ tuyên bố đó là quá xa vời. Đặc biệt đối với người mới bắt đầu, Bootstrap là một cách tuyệt vời để bắt đầu tạo các trang web hiện đại và sạch sẽ. Nó giúp bạn dễ dàng nhận ra các thiết kế phức tạp, ưu tiên thiết bị di động và cung cấp nhiều thành phần mà bạn có thể sẽ cần trong nhiều dự án
Bootstrap có đường cong học tập thấp và phù hợp với các trang web tĩnh không yêu cầu bước xây dựng, vì bạn chỉ có thể tham khảo thư viện từ CDN của Bootstrap. Điều này trái ngược với một số khung CSS phổ biến khác có thể được tối ưu hóa để sử dụng với trình chạy gói hoặc trình chạy tác vụ
Tuy nhiên, bạn cũng nên lưu ý rằng Bootstrap không phải là viên đạn bạc. Đối với những người không quen biết, Bootstrap giúp dễ dàng tạo đánh dấu lộn xộn và phức tạp. Nó cũng là một thư viện tương đối nặng tính theo kilobyte [mặc dù điều này đang được cải thiện qua mỗi lần phát hành], vì vậy nó có thể không phải là lựa chọn tốt nhất nếu bạn chỉ sử dụng một hoặc hai tính năng của nó. Như với bất kỳ sự trừu tượng hóa nào, nó sẽ giúp ích rất nhiều nếu bạn nắm bắt tốt về công nghệ cơ bản và có thể đưa ra quyết định sáng suốt về thời điểm sử dụng nó
Nâng cấp từ Bootstrap 4 lên 5
Nâng cấp từ Bootstrap 4 lên 5 nhìn chung khá dễ dàng. Hầu hết các thành phần, lớp và lớp tiện ích của chúng đã có sẵn trong Bootstrap 4 vẫn có sẵn trong Bootstrap 5. Điều chính bạn nên tập trung vào khi di chuyển là liệu các lớp hoặc thành phần bạn đang sử dụng có phù hợp hay không. Nếu chúng bị loại bỏ, sẽ có những cách thay thế hoặc cách để đạt được kết quả tương tự bằng cách sử dụng các lớp tiện ích. Điều thứ hai bạn nên tập trung vào là chuyển từ thuộc tính
$['.toast'].toast[]
0 sang $['.toast'].toast[]
1 trong các thành phần yêu cầu JavaScript như một phần chức năng của chúng. [Chúng tôi sẽ đề cập đến điều này nhiều hơn trong phần tiếp theo. ]Nếu bạn sử dụng các tệp Sass của Bootstrap, có một số biến và mixin đã được đổi tên. Bootstrap 5 có một phần mở rộng và chi tiết về tùy chỉnh, cũng như chi tiết về các biến Sass và mixin cho từng thành phần trong các trang tài liệu tương ứng của chúng
Có gì thay đổi
Bootstrap 5 mang đến những thay đổi cốt lõi cho Bootstrap dưới dạng thư viện, với sự thay đổi về các phụ thuộc bắt buộc, hỗ trợ trình duyệt, v.v. Nó cũng mang lại những thay đổi cho các thành phần và lớp mà chúng tôi luôn sử dụng trong các phiên bản trước
jQuery không còn phụ thuộc
Là một thay đổi lớn so với các phiên bản trước, jQuery không còn phụ thuộc vào Bootstrap nữa. Bây giờ, bạn có thể sử dụng Bootstrap một cách đầy đủ mà không cần nó, nhưng bạn vẫn cần Popper. js. Thay đổi này giúp sử dụng Bootstrap dễ dàng hơn trong các dự án không yêu cầu hoặc sử dụng jQuery — chẳng hạn như khi sử dụng Bootstrap với React
Bạn vẫn có thể sử dụng jQuery với Bootstrap nếu nó là một phần của trang web của bạn. Nếu Bootstrap phát hiện jQuery trong đối tượng
$['.toast'].toast[]
2, nó sẽ tự động thêm tất cả các thành phần vào hệ thống plugin của jQuery. Vì vậy, nếu bạn đang chuyển từ v4 sang v5, bạn không cần phải lo lắng về sự thay đổi này và bạn vẫn có thể sử dụng jQuery với Bootstrap khi cần thiếtNhưng nếu bạn sử dụng jQuery trong trang web của mình, nhưng bạn không muốn Bootstrap sử dụng jQuery thì sao?
Bootstrap hoạt động như thế nào khi không có jQuery?
$['.toast'].toast[]
Trong Bootstrap 5, bạn có thể sử dụng cùng mã đó để tạo phần tử Toast nếu trang web của bạn đã sử dụng jQuery. Nếu không có jQuery, bạn sẽ cần sử dụng mã như sau để tạo phần tử Toast
const toastElList = [...document.querySelectorAll['.toast']]
const toastList = toastElList.map[[toastEl] => {
return new bootstrap.Toast[toastEl]
}]
Điều này chỉ sử dụng Vanilla JavaScript để truy vấn tài liệu cho các phần tử có lớp
$['.toast'].toast[]
4, sau đó khởi tạo thành phần Toast trên phần tử bằng cách sử dụng $['.toast'].toast[]
5Thay đổi hỗ trợ trình duyệt
Cho đến v4, Bootstrap được sử dụng để hỗ trợ Internet Explorer [IE] 10 và 11. Kể từ Bootstrap 5, hỗ trợ cho IE đã bị loại bỏ hoàn toàn. Vì vậy, nếu bạn cần hỗ trợ IE trong trang web của mình, có lẽ bạn nên cẩn thận khi chuyển sang v5
Những thay đổi khác trong hỗ trợ trình duyệt bao gồm
- Hỗ trợ Firefox và Chrome hiện bắt đầu từ phiên bản 60
- Hỗ trợ Safari và iOS hiện bắt đầu từ phiên bản 12
- Hỗ trợ Trình duyệt Android và WebView hiện bắt đầu từ phiên bản 6
Thay đổi thuộc tính dữ liệu
Bootstrap 5 đã thay đổi cách đặt tên của các thuộc tính dữ liệu thường được sử dụng bởi các thành phần sử dụng JavaScript như một phần chức năng của chúng. Trước đây, hầu hết các thành phần dựa trên một số chức năng JavaScript sẽ có thuộc tính dữ liệu bắt đầu bằng
$['.toast'].toast[]
6. Ví dụ: để tạo thành phần Tooltip trong Bootstrap 4$['.toast'].toast[]
0Lưu ý cách sử dụng của
$['.toast'].toast[]
7 và $['.toast'].toast[]
8. Trong Bootstrap 5, các thuộc tính dữ liệu cho các thành phần này hiện bắt đầu bằng $['.toast'].toast[]
9 để dễ dàng đặt tên cho các thuộc tính Bootstrap. Ví dụ: để tạo thành phần Tooltip trong Bootstrap 5$['.toast'].toast[]
4Thay vì sử dụng
$['.toast'].toast[]
7 và $['.toast'].toast[]
8, chúng tôi sử dụng const toastElList = [...document.querySelectorAll['.toast']]
const toastList = toastElList.map[[toastEl] => {
return new bootstrap.Toast[toastEl]
}]
2 và const toastElList = [...document.querySelectorAll['.toast']]
const toastList = toastElList.map[[toastEl] => {
return new bootstrap.Toast[toastEl]
}]
3. Nếu bạn sử dụng JavaScript để tạo các thành phần trong Bootstrap, có thể không cần thực hiện bất kỳ thay đổi nào. Tuy nhiên, nếu các thành phần của bạn chỉ dựa vào các thuộc tính dữ liệu để hoạt động, thì bạn cần thay đổi tất cả các thuộc tính dữ liệu bắt đầu bằng const toastElList = [...document.querySelectorAll['.toast']]
const toastList = toastElList.map[[toastEl] => {
return new bootstrap.Toast[toastEl]
}]
4 thành bắt đầu bằng $['.toast'].toast[]
9Lỗi cố định
Trong tài liệu của Bootstrap 4 bên dưới Trình duyệt và thiết bị, có một danh sách các lỗi xảy ra trên một số trình duyệt. Những lỗi này không còn được liệt kê trong cùng một danh sách cho Bootstrap 5. Danh sách bao gồm những điều sau đây
- Kiểu di chuột đã được áp dụng cho các phần tử trong các sự kiện chạm trên iOS, điều này không được mong muốn vì nó được coi là một hành vi không mong muốn
- Sử dụng
6 trong Safari 8 trở lên khiến kích thước phông chữ nhỏ khi inconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
- Bán kính đường viền đã bị ghi đè bởi phản hồi xác thực [nhưng có thể khắc phục bằng cách thêm một lớp
7 bổ sung]const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Danh sách các lỗi và sự cố trong tài liệu của Bootstrap 4 cũng nêu chi tiết các lỗi xảy ra trên các phiên bản trình duyệt không còn được hỗ trợ
Những thay đổi khác
Có nhiều thay đổi khác nhỏ hoặc không gây ra thay đổi mạnh mẽ, đáng chú ý. Những thay đổi này là
Bootstrap 5 hiện sử dụng Popper v2. Đảm bảo nâng cấp phiên bản Popper của bạn. Popper v1 sẽ không hoạt động nữa, vì Bootstrap 5 yêu cầu
8 thay vìconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
9 trước đóconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Bootstrap 5 hiện có thể được sử dụng làm mô-đun trong trình duyệt bằng phiên bản Bootstrap
Vì Libsass và Node Sass [được sử dụng trong Bootstrap 4] hiện không được dùng nữa, Bootstrap 5 sử dụng Dart Sass để biên dịch các tệp Sass nguồn thành CSS
Đã có sự thay đổi trong một số giá trị biến Sass, chẳng hạn như
00 đã thay đổi từ 1050 thành 1060,$['.toast'].toast[]
01 từ 1060 thành 1070, v.v. Vì lý do đó, bạn nên kiểm tra các biến Sass của từng thành phần hoặc lớp tiện ích trên tài liệu của Bootstrap 5$['.toast'].toast[]
Trước đây, để ẩn một phần tử nhưng giữ cho các công nghệ hỗ trợ có thể phát hiện ra phần tử đó, lớp
02 đã được sử dụng. Lớp này hiện được thay thế bằng. ẩn trực quan$['.toast'].toast[]
Trước đây, để ẩn một phần tử tương tác nhưng giữ cho các công nghệ hỗ trợ có thể phát hiện ra phần tử đó, bạn cần sử dụng cả hai lớp
02 và$['.toast'].toast[]
04. Trong Bootstrap 5, bạn chỉ cần dùng$['.toast'].toast[]
05 mà không cần dùng$['.toast'].toast[]
06$['.toast'].toast[]
Các đoạn trích dẫn có nguồn được đặt tên hiện được bao bọc bởi phần tử
07$['.toast'].toast[]
Đây là một ví dụ về cách Blockquotes hiện có trong Bootstrap 5
Xem Bút
Bootstrap 5 Blockquotes của SitePoint [@SitePoint]
trên CodePen.Trong các phiên bản trước, các kiểu bảng được kế thừa. Điều này có nghĩa là nếu một bảng được lồng bên trong một bảng khác, thì bảng được lồng sẽ kế thừa bảng cha. Trong Bootstrap 5, các kiểu bảng độc lập với nhau ngay cả khi chúng được lồng vào nhau
bây giờ hỗ trợ bảng. Điều này có nghĩa là bây giờ bạn có thể thay đổi màu đường viền của bảng bằng các tiện ích màu đường viền
Đây là một ví dụ về việc sử dụng các tiện ích viền với các bảng trong Bootstrap 5
Xem Bút
Bootstrap 5 Bảng có viền theo SitePoint [@SitePoint]
trên CodePen.Kiểu dáng mặc định của breadcrumbs đã được thay đổi, loại bỏ bán kính đường viền, phần đệm và nền màu xám mặc định trong các phiên bản trước
Đây là một ví dụ về phong cách của Breadcrumbs trong Bootstrap 5
Xem Bút
Bootstrap 5 Breadcrumbs của SitePoint [@SitePoint]
trên CodePen.Việc đặt tên cho các lớp sử dụng
08 và$['.toast'].toast[]
09 để chỉ vị trí sử dụng$['.toast'].toast[]
40 và$['.toast'].toast[]
41 đã được thay đổi. Ví dụ:$['.toast'].toast[]
42 và$['.toast'].toast[]
43 trong được thay thế bằng$['.toast'].toast[]
44 và$['.toast'].toast[]
45 tương ứng$['.toast'].toast[]
Tương tự như điểm trước, các lớp tiện ích sử dụng
46 cho$['.toast'].toast[]
08 và$['.toast'].toast[]
48 cho$['.toast'].toast[]
09 hiện sử dụng$['.toast'].toast[]
50 cho
40 và$['.toast'].toast[]
52 cho
41 tương ứng. Ví dụ,$['.toast'].toast[]
54 bây giờ là
55Lớp
56 được sử dụng cho đầu vào phạm vi hiện là
57Máng xối hiện được đặt trong
58 thay vì
59 trước đây
50 đã được đổi tên thành$['.toast'].toast[]
51 như một phần của các lớp máng xối mới được thêm vào [thêm về điều đó trong các phần sau]$['.toast'].toast[]
Các liên kết hiện được gạch dưới theo mặc định, ngay cả khi không được di chuột
Tên lớp phần tử biểu mẫu tùy chỉnh đã thay đổi từ
52 thành một phần của lớp thành phần biểu mẫu. Ví dụ:$['.toast'].toast[]
53 được thay thế bằng$['.toast'].toast[]
54,$['.toast'].toast[]
55 được thay thế bằng$['.toast'].toast[]
56, v.v.$['.toast'].toast[]
Việc thêm
57 vào nhãn hiện là bắt buộc$['.toast'].toast[]
Cảnh báo, mẩu bánh mì, thẻ, danh sách thả xuống, nhóm danh sách, phương thức, cửa sổ bật lên và chú giải công cụ hiện sử dụng cùng một giá trị đệm bằng cách sử dụng biến
58$['.toast'].toast[]
Phần đệm mặc định trong các thành phần huy hiệu hiện được thay đổi từ
59 thành$['.toast'].toast[]
50const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Trình bao bọc cho các nút chuyển đổi được sử dụng với các hộp kiểm và nút radio. Đánh dấu bây giờ cũng được đơn giản hóa. Trong Bootstrap 4, hộp kiểm nút chuyển đổi đã đạt được với đánh dấu sau
5Trong Bootstrap 5, nó có thể được thực hiện một cách đơn giản hơn
5$['.toast'].toast[]
Trạng thái của các nút
51 vàconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
52 giờ đây đã tăng độ tương phản về màu sắcconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Biểu tượng chevron băng chuyền hiện sử dụng SVG từ Biểu tượng Bootstrap
Lớp nút đóng hiện được đổi tên từ
53 thànhconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
54 và sử dụng biểu tượng SVG thay vìconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
55const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Dải phân cách thả xuống hiện tối hơn để có độ tương phản tốt hơn
Nội dung thanh điều hướng bây giờ sẽ được bao bọc trong phần tử vùng chứa. Ví dụ trong Bootstrap 4
5const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Trở thành trong Bootstrap 5
4$['.toast'].toast[]
Lớp
56 trong các thành phần bật lên hiện được thay thế bằngconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
57 và lớpconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
56 trong các thành phần Chú giải công cụ hiện được thay thế bằngconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
59const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Tùy chọn popover
40 đã được đổi tên thành$['.toast'].toast[]
41$['.toast'].toast[]
Thời lượng Toast mặc định được thay đổi thành 5 giây
Giá trị mặc định cho
42 trong các thành phần tooltip, dropdown và popover đã được thay đổi thành mảng$['.toast'].toast[]
43$['.toast'].toast[]
44 đã được đổi tên thành$['.toast'].toast[]
45$['.toast'].toast[]
46 đã được đổi tên thành$['.toast'].toast[]
47 và$['.toast'].toast[]
48 thành$['.toast'].toast[]
49$['.toast'].toast[]
90 và$['.toast'].toast[]
91 hiện đã được thay thế bằng một loạt các lớp làm tròn$['.toast'].toast[]
92 từ 0 đến 3$['.toast'].toast[]
Những gì đã bị đánh rơi
Thay đổi có thể phải trả giá. Khi một phiên bản mới ra mắt mang đến những thay đổi và cải tiến, nó cũng loại bỏ một số tính năng cũ mà nó đã hỗ trợ trước đó. Với bản phát hành mới này, một số thành phần, lớp tiện ích hoặc các tính năng khác của Bootstrap đã bị loại bỏ
Hầu hết các mục bị loại bỏ khỏi Bootstrap 5 đều bị loại bỏ vì có thể đạt được điều tương tự bằng cách sử dụng các lớp tiện ích thay vì biến chúng thành một thành phần độc lập. Ngoài ra, một số vật phẩm đã bị rơi đã được chứng minh là không được sử dụng hoặc không cần thiết
Đây là danh sách những gì đã bị loại bỏ khỏi Bootstrap 5
Như đã đề cập trong phần trước, hỗ trợ cho IE đã bị loại bỏ hoàn toàn
Các lớp màu huy hiệu [ví dụ:
93] đã bị loại bỏ để sử dụng các lớp tiện ích màu [ví dụ:$['.toast'].toast[]
94]$['.toast'].toast[]
Loại huy hiệu
95, mang lại cho huy hiệu một kiểu dáng viên thuốc, đã bị loại bỏ để sử dụng$['.toast'].toast[]
96, đạt được kết quả tương tự$['.toast'].toast[]
Lớp nút
97 đã bị xóa, vì có thể đạt được kết quả tương tự bằng cách sử dụng các lớp tiện ích hiển thị như$['.toast'].toast[]
98$['.toast'].toast[]
Bố cục thẻ Masonry
99 có sẵn trước đây đã bị loại bỏ vì nó có nhiều tác dụng phụ$['.toast'].toast[]
Tùy chọn
00 cho các thành phần thả xuống đã bị xóa, thay vào đó là cấu hình của Popper$['.toast'].toast[]
Thành phần Jumbotron đã bị loại bỏ, vì có thể đạt được kết quả tương tự bằng cách sử dụng các lớp tiện ích
Một số lớp tiện ích theo thứ tự [
01] đã bị loại bỏ, vì trước đây chúng nằm trong khoảng từ 1 đến 12. Bây giờ chúng nằm trong khoảng từ 1 đến 5$['.toast'].toast[]
Thành phần phương tiện đã bị loại bỏ, vì có thể đạt được kết quả tương tự với các lớp tiện ích
Các lớp
02 và$['.toast'].toast[]
03 đã bị loại bỏ, vì các lớp biến thể$['.toast'].toast[]
04 có thể được áp dụng cho tất cả các thành phần của bảng$['.toast'].toast[]
Lớp
05 đã bị loại bỏ vì nó không được sử dụng nhiều$['.toast'].toast[]
Lớp
06 đã bị loại bỏ, do các vấn đề về khả năng đáp ứng, cũng như lớp$['.toast'].toast[]
07, vì phương thức của nó đã cũ và không nên được sử dụng. Và các lớp$['.toast'].toast[]
08 không thêm trạng thái di chuột hoặc tiêu điểm vào liên kết nữa. Các lớp$['.toast'].toast[]
08 đó nên được thay thế bằng các lớp$['.toast'].toast[]
10$['.toast'].toast[]
Các nhóm đầu vào có nhiều đầu vào hoặc thành phần không cần sử dụng
11 và$['.toast'].toast[]
12 nữa. Tất cả các phần tử nên có trong nhóm đều có thể được thêm trực tiếp dưới dạng phần tử con của$['.toast'].toast[]
13$['.toast'].toast[]
Đây là một ví dụ về việc sử dụng các nhóm đầu vào có nhiều đầu vào
Xem Bút
Nhóm đầu vào Bootstrap 5 theo SitePoint [@SitePoint]
trên CodePen.
14,$['.toast'].toast[]
15 và$['.toast'].toast[]
16 đều đã bị loại bỏ để nhường chỗ cho các lớp bố cục$['.toast'].toast[]
17 không còn thuộc tính$['.toast'].toast[]
18 đã đặt nữa. Hiển thị của phần tử sẽ phụ thuộc vào việc bản thân phần tử đó là phần tử khối hay phần tử nội tuyến$['.toast'].toast[]
Các biểu tượng xác thực đã bị xóa đối với các phần tử
19 với$['.toast'].toast[]
20$['.toast'].toast[]
Lớp
21 đã bị xóa để ưu tiên cho các lớp lưới$['.toast'].toast[]
Lợi nhuận âm đã bị tắt theo mặc định
Các phần tử
22 hiện đã bị xóa để áp dụng kiểu dáng cho tất cả các phần tử con của các tỷ lệ, vốn là các bản nhúng Responsive trước đây [thêm về điều đó trong phần tiếp theo]$['.toast'].toast[]
Có gì mới
Cuối cùng, Bootstrap mang đến rất nhiều bổ sung thú vị cho thư viện của nó trong phiên bản 5. Một số thay đổi này bao gồm các tính năng mới, khái niệm mới được hỗ trợ, thành phần mới, lớp tiện ích mới, v.v.
Kích thước phông chữ đáp ứng hiện được bật theo mặc định
Responsive Font Sizes [RFS] có trong các phiên bản trước của Bootstrap, nhưng nó đã bị tắt theo mặc định. Bootstrap 5 bật RFS theo mặc định, làm cho phông chữ trong Bootstrap phản hồi nhanh hơn. RFS là một dự án phụ do Bootstrap tạo ra để mở rộng quy mô ban đầu và thay đổi kích thước kích thước phông chữ một cách đáp ứng. Giờ đây, nó có khả năng làm điều tương tự đối với các thuộc tính như lề, phần đệm, bóng hộp, v.v.
Những gì nó làm về cơ bản là tính toán các giá trị phù hợp nhất dựa trên kích thước của trình duyệt và các tính toán này được dịch sang các hàm
$['.toast'].toast[]
23 khi nó được biên dịch. Việc sử dụng RFS cũng loại bỏ cách sử dụng trước đây của
59 để sử dụng $['.toast'].toast[]
25, vì nó giúp đạt được khả năng phản hồi tốt hơnNếu bạn đang sử dụng các tệp Sass cho Bootstrap, giờ đây bạn có thể sử dụng các mixin do RFS tạo, bao gồm
$['.toast'].toast[]
26, $['.toast'].toast[]
27, $['.toast'].toast[]
28, v.v., cho phép bạn đảm bảo các thành phần và kiểu của mình phản hồi nhanhHỗ trợ từ phải sang trái
Bootstrap 5 thêm hỗ trợ chặt chẽ sang trái [RTL] bằng RTLCSS. Vì Bootstrap được sử dụng trên toàn thế giới, đây là một bước tiến lớn và quan trọng để cung cấp hỗ trợ RTL ngay lập tức. Vì lý do đó, Bootstrap 5 đã bỏ cách đặt tên cụ thể cho chỉ đường [ví dụ: sử dụng
$['.toast'].toast[]
08 và $['.toast'].toast[]
09] để thay thế cho $['.toast'].toast[]
40 và $['.toast'].toast[]
41. Điều này làm cho Bootstrap đủ linh hoạt để hoạt động với cả trang web từ trái sang phải [LTR] và RTL. Ví dụ: $['.toast'].toast[]
42 hiện là $['.toast'].toast[]
44, $['.toast'].toast[]
35 hiện là $['.toast'].toast[]
36, v.v.Để Bootstrap nhận dạng và áp dụng kiểu dáng RTL trên trang web của bạn, bạn cần đặt
$['.toast'].toast[]
37 của $['.toast'].toast[]
38 thành $['.toast'].toast[]
39 và thêm thuộc tính $['.toast'].toast[]
40 với ngôn ngữ RTL của trang web. Ví dụ, $['.toast'].toast[]
41Cuối cùng, bạn sẽ cần bao gồm tệp Bootstrap RTL CSS
$['.toast'].toast[]
9Và cùng với đó, trang web của bạn sẽ hỗ trợ RTL
Điểm dừng mới
Bootstrap 5 mang đến sự hỗ trợ cho thiết bị nhắm mục tiêu điểm dừng mới
$['.toast'].toast[]
42 có chiều rộng lớn hơn hoặc bằng $['.toast'].toast[]
43. Trước đây, điểm dừng cao nhất là $['.toast'].toast[]
44, nhắm mục tiêu các thiết bị có chiều rộng lớn hơn hoặc bằng $['.toast'].toast[]
45. Thay đổi này cho phép các thiết bị có màn hình lớn hơn có khả năng phản hồi tốt hơn vì điểm ngắt $['.toast'].toast[]
44 là không đủViệc sử dụng điểm dừng mới tương tự như tất cả các điểm dừng khác. Ví dụ: để áp dụng phần đệm cho chiều rộng thiết bị lớn hơn hoặc bằng
$['.toast'].toast[]
43, bạn có thể thực hiện việc đó bằng cách sử dụng lớp $['.toast'].toast[]
48tài liệu cải tiến
Mặc dù đây không phải là một phần của thư viện, nhưng thật tốt khi lưu ý sự cải tiến trong tài liệu của Bootstrap. Tài liệu trong Bootstrap 5 có tổ chức nội dung tốt hơn, vì các thành phần có nhiều chi tiết mở rộng hơn hiện có các phần riêng. Ví dụ: thành phần Biểu mẫu trong Bootstrap 4 chỉ là một trang với tất cả các thành phần được nhồi nhét bên trong nó. Trong Bootstrap 5, tài liệu của thành phần Biểu mẫu là một phần riêng, với các phần phụ cho các thành phần con khác nhau bao gồm Điều khiển biểu mẫu, Chọn, Nhóm đầu vào, v.v.
Ngoài ra, việc điều hướng trong tài liệu giờ đây dễ dàng hơn thông qua thanh bên, đặc biệt đối với các màn hình nhỏ hơn. Trong Bootstrap 4, không thể nhìn thấy thanh bên của bảng nội dung trên các thiết bị nhỏ hơn, khiến việc tìm phần được yêu cầu trên trang trở nên khó khăn hơn. Trong Bootstrap 5, mục lục luôn hiển thị trên mọi kích thước màn hình
Hơn nữa, trong Bootstrap 5, bạn có thể tìm thấy tất cả các biến, mixin và hàm Sass cho từng thành phần trên trang của nó. Trước đây, chỉ có một trang Chủ đề có một số chi tiết về cách thay đổi các biến chủ đề trong Bootstrap. Giờ đây, có một phần tùy chỉnh riêng có thêm chi tiết về cách tùy chỉnh chủ đề của Bootstrap
thành phần mới
Bootstrap 5 đưa một số thành phần mới vào thư viện. Một số thành phần này là một phần của các thành phần khác và hiện là các thành phần độc lập
đàn phong cầm
Trước đây, Accordion là một phần của thành phần Có thể thu gọn, chứ không phải là thành phần của chính nó. Trong Bootstrap 5, Accordion là một thành phần mới. Với đàn accordion xuất hiện một lớp mới,
$['.toast'].toast[]
49, chứa bên trong nó một danh sách các vật phẩm đàn accordion. Ngoài ra, Accordions có một phong cách mới so với phong cách trước đó trong Bootstrap 4. Đây là một ví dụ về thành phần đàn accordionXem Bút
Bootstrap 5 Accordion của SitePoint [@SitePoint]
trên CodePen.
Bootstrap 5 cũng thêm một số lớp để thay đổi kiểu dáng của Accordion. Ví dụ:
$['.toast'].toast[]
50 loại bỏ một số kiểu dáng của đàn accordion mặc định như màu nền hoặc đường viền. Bạn cũng có thể làm cho mục đàn accordion luôn mở bằng cách xóa thuộc tính $['.toast'].toast[]
51 khỏi thành phần $['.toast'].toast[]
52 của mục đóvải bố
Một thành phần mới khác là Offcanvas, cho phép bạn tạo thanh bên phủ. Đó là thanh bên thường được sử dụng trên các trang web để hiển thị menu trên các thiết bị nhỏ hơn. Bạn có thể đặt nó ở bất kỳ mặt nào của trang bằng cách sử dụng ________ 053 cho bên trái trong LTR, ________ 054 cho đầu trang,
$['.toast'].toast[]
55 cho bên phải trong LTR và $['.toast'].toast[]
56 cho cuối trang. Bạn cũng có thể chỉ định liệu Offcanvas có phông nền hay không. Đây là một ví dụ về việc sử dụng thành phần OffcanvasXem Bút
Bootstrap 5 Offcanvas của SitePoint [@SitePoint]
trên CodePen.
Nhãn nổi
Nhãn nổi là một phần thành phần mới của các thành phần Biểu mẫu. Nó cho phép bạn tạo một đầu vào có nhãn trông giống như một trình giữ chỗ lúc đầu, sau đó khi đầu vào nhận được tiêu điểm, nhãn sẽ nổi lên đầu của đầu vào phía trên giá trị. Nó cũng hoạt động trên các phần tử
$['.toast'].toast[]
19 và phần tử $['.toast'].toast[]
58. Đây là một ví dụ về việc sử dụng nhãn nổiXem Bút
Bootstrap 5 Nhãn nổi theo SitePoint [@SitePoint]
trên CodePen.
bổ sung khác
Ngoài các thành phần mới, còn có các lớp mới cho các thành phần hiện có, các lớp tiện ích mới, các lớp trợ giúp mới, v.v. Đây là danh sách tất cả các bổ sung mới khác trong Bootstrap 5
Lớp
59 đã được thêm vào, cho phép các cột lấy chiều rộng tự nhiên của chúng$['.toast'].toast[]
Một lớp tiện ích mới đã được thêm vào để biện minh cho nội dung có tên là
60$['.toast'].toast[]
Trước đây, các rãnh giữa các cột đã đạt được bằng cách sử dụng các tiện ích khoảng cách. Giờ đây, bạn có thể đặt rãnh giữa các cột bằng tiện ích bố cục Gutter mới. Để đặt máng xối ngang, hãy sử dụng
61. Để đặt máng xối dọc, hãy sử dụng$['.toast'].toast[]
62. Để đặt máng xối theo cả chiều ngang và chiều dọc, hãy sử dụng$['.toast'].toast[]
63$['.toast'].toast[]
Tập lệnh
40 đã được thêm vào gói Bootstrap khi được cài đặt với npm hoặc Yarn. Tập lệnh$['.toast'].toast[]
40 biên dịch các tệp CSS và JavaScript, xây dựng tài liệu, sau đó khởi động máy chủ cục bộ$['.toast'].toast[]
Các lớp tiện ích căn chỉnh dọc hiện có thể được sử dụng với các bảng
Một lớp mới
66 đã được thêm vào, cho phép đặt chú thích của bảng ở trên cùng thay vì ở dưới cùng$['.toast'].toast[]
Hiện có tùy chọn thay đổi dải phân cách trong Breadcrumb bằng cách sử dụng biến CSS
67$['.toast'].toast[]
Đây là một ví dụ về việc thay đổi dải phân cách thành
68$['.toast'].toast[]
Xem Bút
Bộ chia Bootstrap 5 Breadcrumbs theo SitePoint [@SitePoint]
trên CodePen.Có một biến thể màu tối mới cho băng chuyền sử dụng lớp
69 và một biến thể màu tối mới cho danh sách thả xuống sử dụng$['.toast'].toast[]
70$['.toast'].toast[]
Có một tùy chọn tự động đóng mới trong Dropdown có thể thay đổi hành vi mặc định khi menu Dropdown đóng. Theo mặc định, menu thả xuống đóng khi nhấp vào bên ngoài danh sách thả xuống hoặc một trong các mục thả xuống. Bạn có thể thay đổi điều đó bằng cách đặt thuộc tính dữ liệu
71 thành$['.toast'].toast[]
72, điều này làm cho trình đơn thả xuống đóng lại khi nhấp vào một trong các mục thả xuống chứ không phải khi nhấp vào bên ngoài. Bạn cũng có thể đặt nó thành$['.toast'].toast[]
73, điều này sẽ làm cho trình đơn thả xuống chỉ đóng khi nhấp vào bên ngoài trình đơn thả xuống. Cuối cùng, bạn có thể đặt nó thành$['.toast'].toast[]
74 để nó chỉ đóng khi nhấp lại vào nút thả xuống. Nếu bạn đang khởi tạo danh sách thả xuống bằng JavaScript, bạn có thể sử dụng tùy chọn$['.toast'].toast[]
75 thay vì thuộc tính dữ liệu. Đây là một ví dụ về việc sử dụng nó$['.toast'].toast[]
Xem Bút
Bootstrap 5 Dropdown autoClose by SitePoint [@SitePoint]
trên CodePen.Hiện tại, kiểu dáng được cải thiện cho đầu vào tệp trong biểu mẫu
Một đầu vào màu mới đã được thêm vào, sử dụng lớp
76$['.toast'].toast[]
Một loại đầu vào datalists mới đã được thêm vào, mô phỏng trường chọn kiểu chữ. Đây là một ví dụ
Xem Bút
Đầu vào Biểu mẫu Bootstrap 5 của SitePoint [@SitePoint]
trên CodePen.Các sắc thái và sắc thái màu mới đã được thêm vào trong các biến Sass
Có hai kích thước tiêu đề hiển thị mới
77 và$['.toast'].toast[]
78$['.toast'].toast[]
Có một biến thể màu trắng mới cho các nút đóng
79$['.toast'].toast[]
Danh sách thả xuống hiện có thể có ________ 080 được bao bọc trong _______ 081 phần tử
Các mục trong nhóm Danh sách hiện có thể được đánh số bằng cách sử dụng lớp mới
82$['.toast'].toast[]
Có các thuộc tính
83 cho các liên kết trong thành phần Phân trang, giúp cải thiện phong cách của nó$['.toast'].toast[]
Có một lớp
84 mới đặt màu nền của phần thân thành màu trắng$['.toast'].toast[]
Có các lớp mới để thiết lập các thuộc tính ________ 085, ________ 108, _______ 109 hoặc ________ 088 của một phần tử. Ví dụ,
89$['.toast'].toast[]
Các lớp
90 và$['.toast'].toast[]
91 mới đã được thêm vào để dễ dàng căn giữa các phần tử tuyệt đối theo chiều ngang và chiều dọc tương ứng$['.toast'].toast[]
Có các lớp tiện ích mới
92 từ 1 đến 5$['.toast'].toast[]
Có một tiện ích hiển thị mới ________ 093 và tiện ích khoảng cách mới _______ 094
Có các tiện ích chiều cao dòng mới ________ 095, ________ 096, ________ 097 và ________ 098
Có những trình trợ giúp tỷ lệ mới thay thế những trình trợ giúp nhúng đáp ứng trước đây. Tên lớp được đổi tên bằng cách thay thế
99 bằng$['.toast'].toast[]
00 vàconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
01 bằngconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
02. Ví dụ, những gì trước đây làconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
03 bây giờ làconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
04const toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Một tùy chọn mới
05 đã được thêm vào Dropdowns, Popovers và Tooltips. Tùy chọn này có thể được sử dụng để thay đổi cấu hình của Popperconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Có các tiện ích
06 cho kích thước phông chữ, vì RFS hiện được bật theo mặc địnhconst toastElList = [...document.querySelectorAll['.toast']] const toastList = toastElList.map[[toastEl] => { return new bootstrap.Toast[toastEl] }]
Phần kết luận
Bootstrap là một trong những thư viện CSS hàng đầu trong hầu hết thập kỷ qua. Nó cho phép các nhà phát triển dễ dàng xây dựng các trang web đáp ứng và mang lại trải nghiệm người dùng tốt. Với những bổ sung và thay đổi của Bootstrap 5, quá trình này sẽ còn dễ dàng hơn và sẽ cho phép cải thiện thiết kế của trang web cũng như mang lại trải nghiệm tốt cho người dùng. Nếu bạn đang sử dụng Bootstrap 4 và đang nghĩ đến việc chuyển sang Bootstrap 5, thì việc chuyển đổi rất dễ dàng và có thể bạn sẽ không cần thực hiện nhiều thay đổi
Chia sẻ bài viết này
Shahed Nasser
Tôi là một nhà phát triển toàn diện đam mê học hỏi điều gì đó mới mỗi ngày, sau đó chia sẻ kiến thức của mình với cộng đồng