Tại sao lớp hiển thị bootstrap 5 được sử dụng?

Question

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ết

Như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?

<body data-bs-no-jquery="true">
body>

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()

5

Thay đổ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()

0

Lư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()

4

Thay 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()

9

Lỗ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

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

6 trong Safari 8 trở lên khiến kích thước phông chữ nhỏ khi in

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

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

7 bổ sung)

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

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

8 thay vì

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

9 trước đó

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ư
```
$('.toast').toast()
```
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
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
```
$('.toast').toast()
```
02 đã được sử dụng. Lớp này hiện được thay thế bằng. ẩn trực quan
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
```
$('.toast').toast()
```
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
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ử
```
$('.toast').toast()
```
07
Đâ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
```
$('.toast').toast()
```
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

Tương tự như điểm trước, các lớp tiện ích sử dụng

$('.toast').toast()

46 cho

$('.toast').toast()

08 và

$('.toast').toast()

48 cho

$('.toast').toast()

09 hiện sử dụng

<body data-bs-no-jquery="true">
body>

50 cho

$('.toast').toast()

40 và

<body data-bs-no-jquery="true">
body>

52 cho

$('.toast').toast()

41 tương ứng. Ví dụ,

<body data-bs-no-jquery="true">
body>

54 bây giờ là

<body data-bs-no-jquery="true">
body>

55

Lớp

<body data-bs-no-jquery="true">
body>

56 được sử dụng cho đầu vào phạm vi hiện là

<body data-bs-no-jquery="true">
body>

57

Máng xối hiện được đặt trong

<body data-bs-no-jquery="true">
body>

58 thay vì

<body data-bs-no-jquery="true">
body>

59 trước đây

```
$('.toast').toast()
```
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)
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ừ
```
$('.toast').toast()
```
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.
Việc thêm
```
$('.toast').toast()
```
57 vào nhãn hiện là bắt buộc
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
```
$('.toast').toast()
```
58

Phần đệm mặc định trong các thành phần huy hiệu hiện được thay đổi từ

$('.toast').toast()

59 thành

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

50

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
```
<body data-bs-no-jquery="true">
body>
```
5
Trong Bootstrap 5, nó có thể được thực hiện một cách đơn giản hơn
```
$('.toast').toast()
```
5

Trạng thái của các nút

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

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ắc

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ừ

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

53 thành

const 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)
})

55

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

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

5

Trở thành trong Bootstrap 5

$('.toast').toast()

4

Lớp

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

56 trong các thành phần bật lên hiện được thay thế bằng

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

57 và lớp

const 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ằng

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

59

Tùy chọn popover
```
$('.toast').toast()
```
40 đã được đổi tên thành
```
$('.toast').toast()
```
41
Thời lượng Toast mặc định được thay đổi thành 5 giây
Giá trị mặc định cho
```
$('.toast').toast()
```
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

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ụ:
```
$('.toast').toast()
```
93) đã bị loại bỏ để sử dụng các lớp tiện ích màu (ví dụ:
```
$('.toast').toast()
```
94)
Loại huy hiệu
```
$('.toast').toast()
```
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ự
Lớp nút
```
$('.toast').toast()
```
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
Bố cục thẻ Masonry
```
$('.toast').toast()
```
99 có sẵn trước đây đã bị loại bỏ vì nó có nhiều tác dụng phụ
Tùy chọn
```
$('.toast').toast()
```
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
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ự (
```
$('.toast').toast()
```
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
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
```
$('.toast').toast()
```
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
Lớp
```
$('.toast').toast()
```
05 đã bị loại bỏ vì nó không được sử dụng nhiều
Lớp
```
$('.toast').toast()
```
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
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
```
$('.toast').toast()
```
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
Đâ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.
```
$('.toast').toast()
```
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
Các biểu tượng xác thực đã bị xóa đối với các phần tử
```
$('.toast').toast()
```
19 với
```
$('.toast').toast()
```
20
Lớp
```
$('.toast').toast()
```
21 đã bị xóa để ưu tiên cho các lớp lưới
Lợi nhuận âm đã bị tắt theo mặc định
Các phần tử
```
$('.toast').toast()
```
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)

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

<body data-bs-no-jquery="true">
body>

59 để sử dụng

$('.toast').toast()

25, vì nó giúp đạt được khả năng phản hồi tốt hơn

Nế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 nhanh

Hỗ 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()

41

Cuối cùng, bạn sẽ cần bao gồm tệp Bootstrap RTL CSS

$('.toast').toast()

9

Và 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()

48

tà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 accordion

Xem 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 Offcanvas

Xem 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ổi

Xem 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
```
$('.toast').toast()
```
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
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à
```
$('.toast').toast()
```
60
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
```
$('.toast').toast()
```
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
Tập lệnh
```
$('.toast').toast()
```
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ộ
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
```
$('.toast').toast()
```
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
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
```
$('.toast').toast()
```
67
Đây là một ví dụ về việc thay đổi dải phân cách thành
```
$('.toast').toast()
```
68
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
```
$('.toast').toast()
```
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
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
```
$('.toast').toast()
```
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ó
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
```
$('.toast').toast()
```
76
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
```
$('.toast').toast()
```
77 và
```
$('.toast').toast()
```
78
Có một biến thể màu trắng mới cho các nút đóng
```
$('.toast').toast()
```
79
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
```
$('.toast').toast()
```
82
Có các thuộc tính
```
$('.toast').toast()
```
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ó
Có một lớp
```
$('.toast').toast()
```
84 mới đặt màu nền của phần thân thành màu trắng
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ụ,
```
$('.toast').toast()
```
89
Các lớp
```
$('.toast').toast()
```
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
Có các lớp tiện ích mới
```
$('.toast').toast()
```
92 từ 1 đến 5
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ế

$('.toast').toast()

99 bằng

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

00 và

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

01 bằng

const 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)
})

04

Một tùy chọn mới
```
const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})
```
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 Popper

Có các tiện ích

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

06 cho kích thước phông chữ, vì RFS hiện được bật theo mặc định

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

Mục đích của khối hiển thị là gì?

hiển thị. chặn . Bạn có thể chỉ định các thuộc tính chiều rộng và chiều cao cho các phần tử đó. Ví dụ về các phần tử ở cấp độ khối theo mặc định là

,

và nhiều phần tử khác. starts on a new line and takes up the available screen width. You can specify the width and height properties for such elements. Examples of elements that are at block-level by default are

,

, and lots more.

Tiện ích Bootstrap 5 là gì?

Các tiện ích Bootstrap được tạo bằng API tiện ích của chúng tôi và có thể được sử dụng để sửa đổi hoặc mở rộng nhóm lớp tiện ích mặc định của chúng tôi thông qua Sass . API tiện ích của chúng tôi dựa trên một loạt các bản đồ và hàm Sass để tạo các họ lớp với nhiều tùy chọn khác nhau.

Lớp Bootstrap 3 nào được sử dụng để hiển thị một phần tử trên màn hình lớn?

có thể nhìn thấy-* (ví dụ:. . visible-lg ) tiện ích lớp để chọn hiển thị hoặc ẩn nội dung tùy thuộc vào kích thước màn hình.

Bootstrap 5 có bao nhiêu lớp?

Lưới của Bootstrap bao gồm sáu tầng của các lớp được xác định trước để xây dựng các bố cục đáp ứng phức tạp.

programming bootstrap