Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
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

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

  • 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, tiện ích và mixin cụ thể theo hướng ngang đề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-checklà bây giờ .form-check.
    • .custom-check.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ỡ Đã 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.

  • 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

Cảnh báo

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.

  • Đơ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 điện 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 .

  • Đã 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 &times;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.

  • Đã 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 trình đơn thả xuống hiện được kích hoạt trên nút chuyển đổi thả xuống và sau đó chuyển sang phần tử mẹ.

  • Các 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 và data-bs-popper="none"khi 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

Danh sách nhóm

  • Đã thêm các nullbiến mới cho , font-sizevà vào lớp .font-weightcolor:hover color.nav-link
  • 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).

Offcanvas

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:

    var modal = new bootstrap.Modal('#myModal')
var 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 danh sách 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 thành để ['top', 'right', 'bottom', 'left']có vị trí tốt hơn của các phần tử Popper. Áp dụng cho danh sách 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().