in English

Chuyển sang v5

Theo dõi và xem xét các thay đổi đối với tệp nguồn Bootstrap, tài liệu và thành phần để giúp bạn di chuyển từ v4 sang v5.

Trên trang này

v5.2.0

Thiết kế được làm mới

Bootstrap v5.2.0 có bản cập nhật thiết kế tinh tế cho một số thành phần và thuộc tính trong toàn bộ dự án, đáng chú ý nhất là thông qua các giá trị tinh chỉnh border-radiustrên các nút và điều khiển biểu mẫu . Tài liệu của chúng tôi cũng đã được cập nhật với trang chủ mới, bố cục tài liệu đơn giản hơn không còn thu gọn các phần của thanh bên và các ví dụ nổi bật hơn về Biểu tượng Bootstrap .

Các biến CSS khác

Chúng tôi đã cập nhật tất cả các thành phần của mình để sử dụng các biến CSS. Trong khi Sass vẫn làm nền tảng cho mọi thứ, mỗi thành phần đã được cập nhật để bao gồm các biến CSS trên các lớp cơ sở thành phần (ví dụ .btn:), cho phép tùy chỉnh Bootstrap theo thời gian thực hơn. Trong các bản phát hành tiếp theo, chúng tôi sẽ tiếp tục mở rộng việc sử dụng các biến CSS vào bố cục, biểu mẫu, trình trợ giúp và tiện ích của chúng tôi. Đọc thêm về các biến CSS trong từng thành phần trên các trang tài liệu tương ứng của chúng.

Việc sử dụng biến CSS của chúng tôi sẽ không hoàn chỉnh cho đến khi Bootstrap 6. Mặc dù chúng tôi muốn triển khai đầy đủ những biến này trên toàn diện, nhưng chúng có nguy cơ gây ra các thay đổi vi phạm. Ví dụ: cài đặt $alert-border-width: var(--bs-border-width)trong mã nguồn của chúng tôi sẽ phá vỡ Sass tiềm năng trong mã của riêng bạn nếu bạn đang làm $alert-border-width * 2vì lý do nào đó.

Do đó, bất cứ khi nào có thể, chúng tôi sẽ tiếp tục thúc đẩy nhiều biến CSS hơn, nhưng xin lưu ý rằng việc triển khai của chúng tôi có thể bị hạn chế một chút trong phiên bản v5.

Mới`_maps.scss`

Bootstrap v5.2.0 đã giới thiệu một tệp Sass mới với _maps.scss. Nó lấy ra một số bản đồ Sass _variables.scssđể khắc phục sự cố trong đó các bản cập nhật cho bản đồ gốc không được áp dụng cho các bản đồ phụ mở rộng chúng. Ví dụ: các bản cập nhật $theme-colorskhông được áp dụng cho các bản đồ chủ đề khác dựa vào đó $theme-colors, phá vỡ quy trình công việc tùy chỉnh chính. Tóm lại, Sass có một hạn chế là khi một biến hoặc bản đồ mặc định đã được sử dụng , nó không thể được cập nhật. Có một thiếu sót tương tự với các biến CSS khi chúng được sử dụng để soạn các biến CSS khác.

Đây là lý do tại sao các tùy chỉnh biến trong Bootstrap phải đến sau @import "functions", nhưng trước @import "variables"và phần còn lại của ngăn xếp nhập của chúng tôi. Điều tương tự cũng áp dụng cho bản đồ Sass — bạn phải ghi đè các giá trị mặc định trước khi chúng được sử dụng. Các bản đồ sau đã được chuyển sang bản mới _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Các bản dựng CSS Bootstrap tùy chỉnh của bạn bây giờ sẽ trông giống như thế này với một lần nhập bản đồ riêng biệt.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Các tiện ích mới

font-weightCác tiện ích mở rộng để bao gồm .fw-semiboldcho các phông chữ bán đậm.
border-radiusCác tiện ích được mở rộng để bao gồm hai kích thước mới .rounded-4và .rounded-5để có nhiều tùy chọn hơn.

Các thay đổi bổ sung

Giới thiệu tùy chọn mới $enable-container-classes. - Bây giờ khi chọn tham gia bố cục Lưới CSS thử nghiệm, .container-*các lớp sẽ vẫn được biên dịch, trừ khi tùy chọn này được đặt thành false. Các thùng chứa giờ đây cũng giữ các giá trị máng xối của chúng.
Thành phần Offcanvas hiện có các biến thể đáp ứng . Lớp ban đầu .offcanvasvẫn không thay đổi — nó ẩn nội dung trên tất cả các chế độ xem. Để làm cho nó phản hồi, hãy thay đổi .offcanvaslớp đó thành bất kỳ .offcanvas-{sm|md|lg|xl|xxl}lớp nào.
Bộ chia bảng dày hơn hiện được chọn tham gia. - Chúng tôi đã loại bỏ đường viền dày hơn và khó ghi đè hơn giữa các nhóm bảng và chuyển nó sang một lớp tùy chọn mà bạn có thể áp dụng , .table-group-divider. Xem tài liệu bảng để làm ví dụ.
Scrollspy đã được viết lại để sử dụng API Intersection Observer , có nghĩa là bạn không còn cần trình bao bọc mẹ tương đối,offsetcấu hìnhTìm kiếm các triển khai Scrollspy của bạn để chính xác và nhất quán hơn trong đánh dấu điều hướng của chúng.
Cửa sổ bật lên và chú giải công cụ hiện sử dụng các biến CSS. Một số biến CSS đã được cập nhật từ các đối tác Sass của chúng để giảm số lượng biến. Do đó, ba biến đã không được chấp nhận trong bản phát hành này $popover-arrow-color:, $popover-arrow-outer-colorvà $tooltip-arrow-color.
Đã thêm .text-bg-{color}người trợ giúp mới. Thay vì đặt các tiện ích .text-*và riêng lẻ, bây giờ bạn có thể sử dụng các trình trợ giúp để đặt một nền trước tương phản ..bg-*.text-bg-*background-colorcolor
Đã thêm .form-check-reversecông cụ sửa đổi để lật thứ tự nhãn và hộp kiểm / radio liên quan.
Đã thêm hỗ trợ cột sọc vào bảng thông qua .table-striped-columnslớp mới.

Để có danh sách đầy đủ các thay đổi, hãy xem dự án v5.2.0 trên GitHub .

v5.1.0

Đã thêm hỗ trợ thử nghiệm cho bố cục Lưới CSS . - Đây là một công việc đang được tiến hành và chưa sẵn sàng để sử dụng trong sản xuất, nhưng bạn có thể chọn tham gia tính năng mới thông qua Sass. Để kích hoạt nó, hãy tắt lưới mặc định, bằng cách thiết lập $enable-grid-classes: falsevà bật CSS Grid bằng cách cài đặt $enable-cssgrid: true.
Đã cập nhật thanh điều hướng để hỗ trợ offcanvas. - Thêm ngăn kéo offcanvas trong bất kỳ thanh điều hướng nào với các .navbar-expand-*lớp đáp ứng và một số đánh dấu offcanvas.
Đã thêm thành phần trình giữ chỗ mới . - Thành phần mới nhất của chúng tôi, một cách để cung cấp các khối tạm thời thay cho nội dung thực để giúp chỉ ra rằng một thứ gì đó vẫn đang tải trong trang web hoặc ứng dụng của bạn.
Plugin thu gọn hiện hỗ trợ tính năng thu gọn theo chiều ngang . - Thêm .collapse-horizontalvào của bạn .collapseđể thu gọn widththay vì height. Tránh sơn lại trình duyệt bằng cách đặt min-heighthoặc height.
Đã thêm trình trợ giúp quy tắc theo chiều dọc và ngăn xếp mới. - Nhanh chóng áp dụng nhiều thuộc tính flexbox để nhanh chóng tạo bố cục tùy chỉnh với ngăn xếp . Chọn từ các ngăn xếp ngang ( .hstack) và dọc ( .vstack). Thêm các dải phân cách dọc tương tự như <hr>các phần tử bằng trình trợ giúp mới.vr .
Đã thêm các :rootbiến CSS toàn cầu mới. - Đã thêm một số biến CSS mới vào :rootcấp độ để kiểm soát <body>các kiểu. Nhiều hơn nữa đang được thực hiện, bao gồm trên các tiện ích và thành phần của chúng tôi, nhưng bây giờ hãy đọc các biến CSS trong phần Tùy chỉnh .
Các tiện ích màu và nền đã được đại tu để sử dụng các biến CSS, đồng thời thêm các tiện ích về độ mờ văn bản và độ mờ nền mới . - .text-* và .bg-*các tiện ích hiện được xây dựng với các biến CSS và rgba()giá trị màu, cho phép bạn dễ dàng tùy chỉnh bất kỳ tiện ích nào với các tiện ích độ mờ mới.
Đã thêm các ví dụ về đoạn mã mới dựa trên để hiển thị cách tùy chỉnh các thành phần của chúng tôi. - Kéo sẵn sàng để sử dụng các thành phần tùy chỉnh và các mẫu thiết kế phổ biến khác với các ví dụ Đoạn mã mới của chúng tôi . Bao gồm chân trang , danh sách thả xuống , nhóm danh sách và phương thức .
Đã xóa các kiểu định vị không sử dụng khỏi cửa sổ bật lên và chú giải công cụ vì chúng chỉ được xử lý bởi Popper. $tooltip-marginđã không được dùng nữa và được đặt thành nulltrong quá trình này.

Muốn biết thêm thông tin? Đọc bài đăng trên blog v5.1.0.

Này đó! Các thay đổi đối với bản phát hành chính đầu tiên của Bootstrap 5, v5.0.0, được ghi lại bên dưới. Chúng không phản ánh những thay đổi bổ sung được hiển thị ở trên.

Sự phụ thuộc

Đã bỏ jQuery.
Đã nâng cấp từ Popper v1.x lên Popper v2.x.
Đã thay thế Libsass bằng Dart Sass vì trình biên dịch Sass của chúng tôi cung cấp Libsass không được dùng nữa.
Đã chuyển từ Jekyll sang Hugo để xây dựng tài liệu của chúng tôi

Hỗ trợ trình duyệt

Đã bỏ Internet Explorer 10 và 11
Đã bỏ Microsoft Edge <16 (Cạnh kế thừa)
Đã bỏ Firefox <60
Đã bỏ Safari <12
Đã bỏ iOS Safari <12
Chrome bị rớt <60

Tài liệu thay đổi

Trang chủ, bố cục tài liệu và chân trang được thiết kế lại.
Đã thêm hướng dẫn Bưu kiện mới .
Đã thêm phần Tùy chỉnh mới , thay thế trang Chủ đề của v4 , với các chi tiết mới về Sass, tùy chọn cấu hình toàn cục, lược đồ màu, biến CSS, v.v.
Đã sắp xếp lại tất cả tài liệu biểu mẫu thành phần Biểu mẫu mới , chia nhỏ nội dung thành các trang tập trung hơn.
Tương tự, đã cập nhật phần Bố cục , để xác định nội dung lưới rõ ràng hơn.
Đã đổi tên trang thành phần "Điều hướng" thành "Điều hướng và tab".
Đã đổi tên trang "Séc" thành "Séc và radio".
Đã thiết kế lại thanh điều hướng và thêm một subnav mới để giúp việc truy cập các phiên bản tài liệu và trang web của chúng tôi dễ dàng hơn.
Ctrl + /Đã thêm phím tắt mới cho trường tìm kiếm:.

Sass

Chúng tôi đã bỏ hợp nhất bản đồ Sass mặc định để giúp việc loại bỏ các giá trị thừa dễ dàng hơn. Hãy nhớ rằng bây giờ bạn phải xác định tất cả các giá trị trong bản đồ Sass như thế nào $theme-colors. Kiểm tra cách đối phó với bản đồ Sass .
Phá vỡĐã đổi tên color-yiq()hàm và các biến có liên quan color-contrast()vì nó không còn liên quan đến không gian màu YIQ. Xem # 30168.
- $yiq-contrasted-thresholdđược đổi tên thành $min-contrast-ratio.
- $yiq-text-darkvà $yiq-text-lightlần lượt được đổi tên thành $color-contrast-darkvà $color-contrast-light.
Phá vỡCác tham số hỗn hợp truy vấn phương tiện đã thay đổi để có cách tiếp cận hợp lý hơn.
- media-breakpoint-down()sử dụng chính điểm ngắt thay vì điểm ngắt tiếp theo (ví dụ: media-breakpoint-down(lg)thay vì media-breakpoint-down(md)nhắm mục tiêu các khung nhìn nhỏ hơn lg).
- Tương tự, tham số thứ hai trong media-breakpoint-between()cũng sử dụng chính điểm ngắt thay vì điểm ngắt tiếp theo (ví dụ: media-between(sm, lg)thay vì các media-breakpoint-between(sm, md)khung nhìn mục tiêu giữa smvà lg).
Phá vỡĐã xóa kiểu in và $enable-print-stylesbiến. Các lớp hiển thị in vẫn còn xung quanh. Xem # 28339 .
Phá vỡĐã bỏ color(), theme-color()và gray()các hàm có lợi cho các biến. Xem # 29083 .
Phá vỡtheme-color-level()Chức năng được đổi tên thành color-level()và bây giờ chấp nhận bất kỳ màu nào bạn muốn thay vì chỉ các $theme-colormàu. Xem # 29083 Xem ra: color-level() sau đó đã bị bỏ vào v5.0.0-alpha3.
Phá vỡĐã đổi tên thành $enable-prefers-reduced-motion-media-queryvà $enable-pointer-cursor-for-buttonscho ngắn $enable-reduced-motiongọn $enable-button-pointers.
Phá vỡĐã xóa bg-gradient-variant()mixin. Sử dụng .bg-gradientlớp để thêm gradient vào các phần tử thay vì các .bg-gradient-*lớp đã tạo.
Phá vỡ Đã xóa các mixin không dùng nữa trước đây:
- hover, và hover-focus_plain-hover-focushover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(cũng bỏ lớp tiện ích liên quan, .text-hide)
- visibility()
- form-control-focus()
Phá vỡscale-color()Chức năng được đổi tên shift-color()để tránh va chạm với chức năng chia tỷ lệ màu riêng của Sass.
box-shadowmixin bây giờ cho phép nullcác giá trị và giảm nonetừ nhiều đối số. Xem # 30394 .
border-radius()Mixin bây giờ có một giá trị mặc định .

Hệ màu

Hệ thống màu đã làm việc với color-level()và $theme-color-intervalbị loại bỏ để chuyển sang một hệ thống màu mới. Tất cả lighten()và darken()các chức năng trong cơ sở mã của chúng tôi được thay thế bằng tint-color()và shade-color(). Các chức năng này sẽ trộn màu với trắng hoặc đen thay vì thay đổi độ đậm nhạt của nó theo một lượng cố định. Màu shift-color()sẽ pha màu hoặc tô một màu tùy thuộc vào thông số trọng lượng của nó là tích cực hay tiêu cực. Xem # 30622 để biết thêm chi tiết.
Đã thêm các sắc thái và sắc thái mới cho mọi màu, cung cấp chín màu riêng biệt cho từng màu cơ bản, dưới dạng các biến Sass mới.
Cải thiện độ tương phản màu sắc. Tỷ lệ tương phản màu tăng từ 3: 1 đến 4,5: 1 và cập nhật các màu xanh lam, xanh lục, lục lam và hồng để đảm bảo độ tương phản WCAG 2.1 AA. Cũng đã thay đổi màu tương phản màu của chúng tôi từ $gray-900thành $black.
Để hỗ trợ hệ thống màu của chúng tôi, chúng tôi đã thêm các chức năng tint-color()và tùy chỉnh mới shade-color()để trộn màu một cách thích hợp.

Cập nhật lưới

Điểm dừng mới! Đã thêm xxlđiểm ngắt mới cho 1400pxvà lên. Không có thay đổi đối với tất cả các điểm ngắt khác.
Cải tiến máng xối. Gutters hiện được đặt bằng rems và hẹp hơn v4 ( 1.5remhoặc khoảng 24px, giảm từ 30px). Điều này điều chỉnh các máng xối của hệ thống lưới của chúng tôi với các tiện ích giãn cách của chúng tôi.
- Đã thêm lớp máng xối mới ( .g-*, .gx-*và .gy-*) để kiểm soát máng xối ngang / dọc, máng xối ngang và máng xối dọc.
- Phá vỡĐược đổi tên .no-guttersđể .g-0phù hợp với các tiện ích máng xối mới.
Các cột không còn được position: relativeáp dụng nữa, vì vậy bạn có thể phải thêm .position-relativevào một số phần tử để khôi phục hành vi đó.
Phá vỡĐã bỏ một số .order-*lớp thường không được sử dụng. Bây giờ chúng tôi chỉ cung cấp .order-1cho .order-5các hộp.
Phá vỡBỏ .mediathành phần vì nó có thể dễ dàng sao chép với các tiện ích. Xem # 28265 và trang tiện ích linh hoạt để làm ví dụ .
Phá vỡ bootstrap-grid.cssbây giờ chỉ áp dụng box-sizing: border-boxcho cột thay vì đặt lại kích thước hộp chung. Bằng cách này, các kiểu lưới của chúng tôi có thể được sử dụng ở nhiều nơi hơn mà không bị nhiễu.
$enable-grid-classeskhông còn vô hiệu hóa việc tạo các lớp vùng chứa nữa. Xem # 29146.
Đã cập nhật make-colmixin thành mặc định thành các cột bằng nhau mà không có kích thước được chỉ định.

Nội dung, Khởi động lại, v.v.

RFS hiện được bật theo mặc định. Các tiêu đề sử dụngfont-size()mixin sẽ tự động điều chỉnhfont-sizetheo tỷ lệ với khung nhìn. Tính năng này trước đây đã được chọn tham gia với v4.
Phá vỡĐã đại tu kiểu chữ hiển thị của chúng tôi để thay thế các $display-*biến của chúng tôi và bằng một $display-font-sizesbản đồ Sass. Đồng thời loại bỏ các $display-*-weightbiến riêng lẻ cho một s đơn lẻ $display-font-weightvà được điều chỉnh font-size.
Đã thêm hai .display-*kích thước tiêu đề mới, .display-5và .display-6.
Các liên kết được gạch dưới theo mặc định (không chỉ khi di chuột), trừ khi chúng là một phần của các thành phần cụ thể.
Các bảng được thiết kế lại để làm mới kiểu của chúng và xây dựng lại chúng bằng các biến CSS để kiểm soát nhiều hơn việc tạo kiểu.
Phá vỡCác bảng lồng nhau không kế thừa các kiểu nữa.
Phá vỡ .thead-lightvà .thead-darkđược loại bỏ để ủng hộ các .table-*lớp biến thể có thể được sử dụng cho tất cả các phần tử bảng ( thead,, tbodyvà tfoot) .trthtd
Phá vỡMixin table-row-variant()được đổi tên thành table-variant()và chỉ chấp nhận 2 tham số: $color(tên màu) và $value(mã màu). Màu đường viền và màu nhấn được tính toán tự động dựa trên các biến hệ số của bảng.
Tách các biến đệm ô trong bảng thành -yvà -x.
Phá vỡBỏ .pre-scrollablelớp. Xem # 29135
Phá vỡ .text-*tiện ích không thêm trạng thái di chuột và tiêu điểm vào liên kết nữa. .link-*các lớp trợ giúp có thể được sử dụng thay thế. Xem # 29267
Phá vỡBỏ .text-justifylớp. Xem # 29793
Phá vỡ <hr>các phần tử hiện sử dụng heightthay vì borderđể hỗ trợ sizethuộc tính tốt hơn. Điều này cũng cho phép sử dụng các tiện ích đệm để tạo các dải phân cách dày hơn (ví dụ <hr class="py-1">:).
padding-leftĐặt lại mặc định theo chiều ngang <ul>và <ol>các phần tử từ mặc định của trình duyệt 40pxthành 2rem.
Đã thêm $enable-smooth-scroll, áp dụng scroll-behavior: smoothtrên toàn cầu — ngoại trừ người dùng yêu cầu giảm chuyển động thông qua prefers-reduced-motiontruy vấn phương tiện. Xem # 31877

RTL

Tất cả các biến cụ thể theo hướng ngang, tiện ích và mixin đều đã được đổi tên để sử dụng các thuộc tính logic giống như các thuộc tính được tìm thấy trong bố cục flexbox — ví dụ, thay cho startvà .endleftright

Các hình thức

Đã thêm các hình thức nổi mới! Chúng tôi đã quảng cáo ví dụ về Nhãn nổi cho các thành phần biểu mẫu được hỗ trợ đầy đủ. Xem trang Nhãn nổi mới.
Phá vỡ Phần tử biểu mẫu gốc và tùy chỉnh hợp nhất. Hộp kiểm, radio, lựa chọn và các đầu vào khác có các lớp gốc và tùy chỉnh trong v4 đã được hợp nhất. Bây giờ gần như tất cả các phần tử biểu mẫu của chúng tôi là hoàn toàn tùy chỉnh, hầu hết không cần HTML tùy chỉnh.
- .custom-control.custom-checkboxlà bây giờ .form-check.
- .custom-control.custom-custom-radiolà bây giờ .form-check.
- .custom-control.custom-switchlà bây giờ .form-check.form-switch.
- .custom-selectlà bây giờ .form-select.
- .custom-filevà .form-fileđã được thay thế bằng các kiểu tùy chỉnh ở trên cùng .form-control.
- .custom-rangelà bây giờ .form-range.
- Đã bỏ bản địa .form-control-filevà .form-control-range.
Phá vỡĐã đánh rơi .input-group-appendvà .input-group-prepend. Bây giờ bạn có thể chỉ cần thêm các nút và .input-group-textlàm con trực tiếp của các nhóm đầu vào.
Bán kính đường viền Thiếu lâu dài trên nhóm đầu vào có lỗi phản hồi xác thực cuối cùng đã được khắc phục bằng cách thêm một .has-validationlớp bổ sung vào nhóm đầu vào có xác thực.
Phá vỡ Đã loại bỏ các lớp bố cục dành riêng cho biểu mẫu cho hệ thống lưới của chúng tôi. Sử dụng lưới và các tiện ích của chúng tôi thay vì .form-group, .form-rowhoặc .form-inline.
Phá vỡBây giờ yêu cầu nhãn biểu mẫu .form-label.
Phá vỡ .form-textkhông còn thiết lập display, cho phép bạn tạo nội tuyến hoặc khối văn bản trợ giúp như bạn muốn chỉ bằng cách thay đổi phần tử HTML.
Kiểm soát biểu mẫu không còn được sử dụng cố định heightkhi có thể, thay vào đó hoãn lại min-heightđể cải thiện khả năng tùy chỉnh và khả năng tương thích với các thành phần khác.
Các biểu tượng xác thực không còn được áp dụng cho <select>s with multiple.
Sắp xếp lại các tệp Sass nguồn bên dưới scss/forms/, bao gồm cả các kiểu nhóm đầu vào.

Các thành phần

Các giá trị thống nhất paddingcho cảnh báo, đường dẫn, 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ụ sẽ dựa trên $spacerbiến của chúng tôi. Xem # 30564 .

Accordion

Đã thêm thành phần đàn accordion mới .

Cảnh báo

Cảnh báo hiện có các ví dụ với các biểu tượng .
Đã xóa các kiểu tùy chỉnh cho <hr>s trong mỗi cảnh báo vì chúng đã sử dụng currentColor.

danh hiệu

Phá vỡBỏ tất cả .badge-*các lớp màu cho các tiện ích nền (ví dụ: sử dụng .bg-primarythay vì .badge-primary).
Phá vỡĐã bỏ — hãy .badge-pillsử dụng .rounded-pilltiện ích thay thế.
Phá vỡĐã xóa kiểu di chuột và tiêu điểm cho <a>và <button>các phần tử.
Đã tăng phần đệm mặc định cho các huy hiệu từ .25em/ .5emđến .35em/ .65em.

Breadcrumbs

Đơn giản hóa giao diện mặc định của breadcrumbs bằng cách xóa padding, background-colorvà border-radius.
Đã thêm thuộc tính tùy chỉnh CSS mới --bs-breadcrumb-dividerđể dễ dàng tùy chỉnh mà không cần biên dịch lại CSS.

nút

Phá vỡ Nút chuyển đổi , với hộp kiểm hoặc radio, không còn yêu cầu JavaScript và có đánh dấu mới. Chúng tôi không còn yêu cầu một phần tử gói, thêm.btn-checkvào<input>và ghép nối nó với bất kỳ.btnlớp nào trên<label>. Xem # 30650 . Tài liệu cho việc này đã chuyển từ trang Nút của chúng tôi sang phần Biểu mẫu mới.
Phá vỡ Giảm .btn-blockcho các tiện ích. Thay vì sử dụng .btn-blocktrên .btn, hãy bọc các nút của bạn bằng .d-gridvà một .gap-*tiện ích để tạo khoảng trống cho chúng khi cần thiết. Chuyển sang các lớp đáp ứng để kiểm soát chúng nhiều hơn. Đọc tài liệu để biết một số ví dụ.
Đã cập nhật của chúng tôi button-variant()và button-outline-variant()mixin để hỗ trợ các thông số bổ sung.
Đã cập nhật các nút để đảm bảo tăng độ tương phản khi di chuột và trạng thái hoạt động.
Các nút đã tắt hiện có pointer-events: none;.

Thẻ

Phá vỡĐã giảm .card-deckcó lợi cho lưới của chúng tôi. Gói các thẻ của bạn trong các lớp cột và thêm một vùng .row-cols-*chứa mẹ để tạo lại các bộ bài (nhưng có nhiều quyền kiểm soát hơn đối với việc căn chỉnh đáp ứng).
Phá vỡBỏ .card-columnsqua để ủng hộ Masonry. Xem # 28922 .
Phá vỡĐã thay thế .cardđàn accordion dựa trên bằng một thành phần Accordion mới .

Băng chuyền

Đã thêm .carousel-darkbiến thể mới cho văn bản tối, điều khiển và chỉ báo (tuyệt vời cho nền sáng hơn).
Các biểu tượng chevron được thay thế cho các điều khiển băng chuyền bằng SVG mới từ Biểu tượng Bootstrap .

Nút đóng

Phá vỡĐược đổi tên thành .closecho .btn-closemột cái tên ít chung chung hơn.
Các nút đóng hiện sử dụng một background-image(SVG được nhúng) thay vì một ×trong HTML, cho phép tùy chỉnh dễ dàng hơn mà không cần phải chạm vào đánh dấu của bạn.
Đã thêm .btn-close-whitebiến thể mới sử dụng filter: invert(1)để bật các biểu tượng loại bỏ độ tương phản cao hơn trên nền tối hơn.

Sụp đổ

Đã xóa neo cuộn cho đàn accordion.

Trình đơn thả xuống

Đã thêm biến thể mới .dropdown-menu-darkvà các biến liên quan cho danh sách thả xuống tối theo yêu cầu.
Đã thêm biến mới cho $dropdown-padding-x.
Làm tối dải phân cách thả xuống để cải thiện độ tương phản.
Phá vỡTất cả các sự kiện cho danh sách thả xuống hiện được kích hoạt trên nút chuyển đổi thả xuống và sau đó được chuyển đến phần tử mẹ.
Menu thả xuống hiện có một data-bs-popper="static"thuộc tính được đặt khi vị trí của menu thả xuống là tĩnh hoặc menu thả xuống nằm trong thanh điều hướng. Điều này được thêm vào bởi JavaScript của chúng tôi và giúp chúng tôi sử dụng các kiểu vị trí tùy chỉnh mà không can thiệp vào định vị của Popper.
Phá vỡTùy chọn thả flipxuống cho plugin thả xuống có lợi cho cấu hình Popper gốc. Bây giờ bạn có thể vô hiệu hóa hành vi lật bằng cách chuyển một mảng trống cho fallbackPlacementstùy chọn trong công cụ sửa đổi lật .
Hiện có thể nhấp vào menu thả xuống với một autoClosetùy chọn mới để xử lý hành vi tự động đóng . Bạn có thể sử dụng tùy chọn này để chấp nhận nhấp chuột bên trong hoặc bên ngoài trình đơn thả xuống để làm cho nó tương tác.
Danh sách thả xuống hiện hỗ trợ .dropdown-itemđược gói gọn trong <li>s.

Jumbotron

Phá vỡĐã bỏ thành phần jumbotron vì nó có thể được sao chép với các tiện ích. Xem ví dụ Jumbotron mới của chúng tôi để có bản demo.

Danh sách nhóm

Đã thêm công .list-group-numberedcụ sửa đổi mới vào danh sách các nhóm.

Điều hướng và tab

Đã thêm các nullbiến mới cho , font-sizevà vào lớp .font-weightcolor:hover color.nav-link

Navbars

Phá vỡNavbars hiện yêu cầu một vùng chứa bên trong (để đơn giản hóa đáng kể các yêu cầu về khoảng cách và yêu cầu CSS).
Phá vỡLớp .activekhông thể được áp dụng cho .nav-items nữa, nó phải được áp dụng trực tiếp trên .nav-links.

Offcanvas

Đã thêm thành phần offcanvas mới .

Phân trang

Các liên kết phân trang hiện có thể tùy chỉnh margin-leftđược làm tròn động trên tất cả các góc khi được tách ra khỏi nhau.
Đã thêm transitions vào liên kết phân trang.

Popovers

Phá vỡĐã đổi tên thành .arrowtrong .popover-arrowmẫu cửa sổ bật lên mặc định của chúng tôi.
Đã đổi tên whiteListtùy chọn thành allowList.

Con quay

Giờ quay được tôn vinh prefers-reduced-motion: reducebằng cách làm chậm hoạt ảnh. Xem # 31882 .
Cải thiện căn chỉnh theo chiều dọc của trục quay.

Chúc rượu

Giờ đây, bánh mì nướng có thể được định vị với .toast-containersự trợ giúp của các tiện ích định vị .
Đã thay đổi thời lượng bánh mì nướng mặc định thành 5 giây.
Đã xóa overflow: hiddenkhỏi chúc mừng và thay thế bằng chữ border-radiuss phù hợp với các calc()chức năng.

Chú giải công cụ

Phá vỡĐã đổi tên thành .arrowtrong .tooltip-arrowmẫu chú giải công cụ mặc định của chúng tôi.
Phá vỡGiá trị mặc định cho giá trị fallbackPlacementsđược thay đổi thành để ['top', 'right', 'bottom', 'left']có vị trí tốt hơn của các phần tử popper.
Phá vỡĐã đổi tên whiteListtùy chọn thành allowList.

Tiện ích

Phá vỡĐã đổi tên một số tiện ích để sử dụng tên thuộc tính logic thay vì tên hướng với việc bổ sung hỗ trợ RTL:
- Đã đổi tên .left-*và .right-*thành .start-*và .end-*.
- Đã đổi tên .float-leftvà .float-rightthành .float-startvà .float-end.
- Đã đổi tên .border-leftvà .border-rightthành .border-startvà .border-end.
- Đã đổi tên .rounded-leftvà .rounded-rightthành .rounded-startvà .rounded-end.
- Đã đổi tên .ml-*và .mr-*thành .ms-*và .me-*.
- Đã đổi tên .pl-*và .pr-*thành .ps-*và .pe-*.
- Đã đổi tên .text-leftvà .text-rightthành .text-startvà .text-end.
Phá vỡĐã tắt lợi nhuận âm theo mặc định.
Đã thêm .bg-bodylớp mới để nhanh chóng thiết lập <body>nền của các phần tử bổ sung.
Đã thêm các tiện ích vị trí mới cho top, và . Giá trị bao gồm , và cho mỗi thuộc tính.rightbottomleft050%100%
Đã thêm mới .translate-middle-x& .translate-middle-ytiện ích vào các phần tử được định vị tuyệt đối / cố định ở giữa theo chiều ngang hoặc chiều dọc.
Đã thêm các border-widthtiện ích mới .
Phá vỡĐã đổi tên .text-monospacethành .font-monospace.
Phá vỡĐã xóa .text-hidevì đây là một phương pháp cổ xưa để ẩn văn bản không còn được sử dụng nữa.
Đã thêm .fs-*tiện ích cho font-sizecác tiện ích (có bật RFS). Các tiêu đề này sử dụng cùng tỷ lệ với các tiêu đề mặc định của HTML (1-6, lớn đến nhỏ) và có thể được sửa đổi thông qua bản đồ Sass.
Phá vỡ.font-weight-*Các tiện ích được đổi tên .fw-*để ngắn gọn và nhất quán.
Phá vỡ.font-style-*Các tiện ích được đổi tên .fst-*để ngắn gọn và nhất quán.
Đã thêm vào .d-gridcác tiện ích hiển thị và các gaptiện ích mới ( .gap) cho các bố cục CSS Grid và flexbox.
Phá vỡĐã xóa .rounded-smvà rounded-lggiới thiệu một quy mô lớp học .rounded-0mới cho .rounded-3. Xem # 31687 .
Đã thêm các line-heighttiện ích .lh-1mới .lh-sm:, .lh-basevà .lh-lg. Xem tại đây .
Đã di chuyển .d-nonetiện ích trong CSS của chúng tôi để làm cho nó có trọng lượng hơn so với các tiện ích hiển thị khác.
Mở rộng trình .visually-hidden-focusabletrợ giúp cũng hoạt động trên các vùng chứa, bằng cách sử dụng :focus-within.

Người trợ giúp

Phá vỡ Trình trợ giúp nhúng thích ứng đã được đổi tên thành trình trợ giúp tỷ lệ với tên lớp mới và hành vi được cải thiện, cũng như một biến CSS hữu ích.
- Các lớp đã được đổi tên để thay đổi bythành xtỷ lệ khung hình. Ví dụ, .ratio-16by9là bây giờ .ratio-16x9.
- Chúng tôi đã bỏ .embed-responsive-itembộ chọn nhóm phần tử và để thay bằng .ratio > *bộ chọn đơn giản hơn. Không cần thêm lớp nữa và trình trợ giúp tỷ lệ hiện hoạt động với bất kỳ phần tử HTML nào.
- Bản $embed-responsive-aspect-ratiosđồ Sass đã được đổi tên thành $aspect-ratiosvà các giá trị của nó đã được đơn giản hóa để bao gồm tên lớp và tỷ lệ phần trăm dưới dạng key: valuecặp.
- Các biến CSS hiện đã được tạo và bao gồm cho mỗi giá trị trong bản đồ Sass. Sửa đổi --bs-aspect-ratiobiến trên .ratiođể tạo bất kỳ tỷ lệ co tùy chỉnh nào .
Phá vỡ Các lớp “trình đọc màn hình” hiện là các lớp “ẩn trực quan” .
- Đã thay đổi tệp Sass từ scss/helpers/_screenreaders.scssthànhscss/helpers/_visually-hidden.scss
- Đã đổi tên .sr-onlyvà .sr-only-focusablethành .visually-hiddenvà.visually-hidden-focusable
- Đã đổi tên sr-only()và sr-only-focusable()mixin thành visually-hidden()và visually-hidden-focusable().
bootstrap-utilities.cssbây giờ cũng bao gồm những người trợ giúp của chúng tôi. Các trợ giúp không cần phải được nhập vào các bản dựng tùy chỉnh nữa.

JavaScript

Đã loại bỏ sự phụ thuộc của jQuery và viết lại các plugin thành JavaScript thông thường.
Phá vỡCác thuộc tính dữ liệu cho tất cả các plugin JavaScript hiện được đặt ở vị trí chung để giúp phân biệt chức năng Bootstrap với các bên thứ ba và mã của riêng bạn. Ví dụ, chúng tôi sử dụng data-bs-togglethay vì data-toggle.
Tất cả các plugin hiện có thể chấp nhận một bộ chọn CSS làm đối số đầu tiên. Bạn có thể chuyển một phần tử DOM hoặc bất kỳ bộ chọn CSS hợp lệ nào để tạo một phiên bản plugin mới:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigcó thể được chuyển dưới dạng một hàm chấp nhận cấu hình Popper mặc định của Bootstrap làm đối số, để bạn có thể hợp nhất cấu hình mặc định này theo cách của mình. Áp dụng cho menu thả xuống, cửa sổ bật lên và chú giải công cụ.
Giá trị mặc định cho giá trị fallbackPlacementsđược thay đổi để ['top', 'right', 'bottom', 'left']có vị trí tốt hơn của các phần tử Popper. Áp dụng cho menu thả xuống, cửa sổ bật lên và chú giải công cụ.
Đã xóa dấu gạch dưới khỏi các phương thức tĩnh công khai như _getInstance()→ getInstance().