Hướng dẫn can i upgrade bootstrap 3 to 5? - tôi có thể nâng cấp bootstrap 3 lên 5 không?

Phụ thuộc

• Thả jQuery.
• Được nâng cấp từ Popper v1.x lên Popper v2.x.
• Thay thế Libsass bằng Sass Dart vì trình biên dịch SASS của chúng tôi đã đưa ra Libsass.
• Di cư 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
• Microsoft Edge giảm <16 (Legacy Edge)
• Firefox rơi xuống <60
• Safari rơi xuống <12
• Đã bỏ iOS Safari <12
• Giảm chrome <60

Thay đổi tài liệu

• Trang chủ được thiết kế lại, bố cục tài liệu và chân trang.
• Đã 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 theo chủ đề V4, với các chi tiết mới về SASS, tùy chọn cấu hình toàn cầu, bảng màu, biến CSS, v.v.
• Tổ chức lại tất cả các tài liệu biểu mẫu thành phần Mẫu mới, chia 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.
• Được đổi tên thành trang thành phần của NAV NAVS thành NAV NAV & Tab.
• Được đổi tên thành trang séc trên trang web trên các kiểm tra và radio.
• Được thiết kế lại cho thanh điều hướng và thêm một Subnav mới để giúp dễ dàng hơn các phiên bản trang web và tài liệu của chúng tôi.
• Đã thêm phím tắt bàn phím mới cho trường tìm kiếm: Ctrl + /.

Sass

• Chúng tôi đã bỏ rơi các hợp nhất bản đồ SASS mặc định để giúp loại bỏ các giá trị dự phòng 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 các bản đồ SASS như $theme-colors. Kiểm tra làm thế nào để đối phó với bản đồ SASS.

  Nội dung chính Show

  • Phụ thuộc
  • Hỗ trợ trình duyệt
  • Thay đổi tài liệu
  • Hệ thống màu
  • Cập nhật lưới
  • Nội dung, khởi động lại, vv
  • Các hình thức
  • Các thành phần
  • Cảnh báo
  • danh hiệu
  • Băng chuyền
  • Đóng nút
  • Sụp đổ
  • Thả xuống
  • Danh sách nhóm
  • NAVS và tab
  • Bánh mì nướng
  • Chú giải công cụ
  • Tiện ích
  • Người trợ giúp
  • Tôi có thể nâng cấp bootstrap 3 lên 4 không?
  • Tôi có thể nâng cấp Bootstrap 4 lên 5 không?
  • Làm cách nào để cập nhật Bootstrap lên phiên bản mới nhất?
  • Tại sao tôi nên nâng cấp lên Bootstrap 5?

• Phá vỡ được đổi tên thành hàm color-yiq() và các biến liên quan thành color-contrast() vì nó không còn liên quan đến không gian màu YiQ. Xem #30168. Renamed color-yiq() function and related variables to color-contrast() as it’s no longer related to YIQ colorspace. See #30168.

  • $yiq-contrasted-threshold được đổi tên thành $min-contrast-ratio.
  • $yiq-text-dark và $yiq-text-light được đổi tên tương ứng thành $color-contrast-dark và $color-contrast-light.

• Breaking Media truy vấn các tham số Mixins đã thay đổi cho một cách tiếp cận hợp lý hơn. Media query mixins parameters have changed for a more logical approach.

  • $theme-colors0 sử dụng chính điểm dừng thay vì điểm dừng tiếp theo (ví dụ: $theme-colors1 thay vì $theme-colors2 nhắm mục tiêu Viewports nhỏ hơn $theme-colors3).
  • Tương tự, tham số thứ hai trong $theme-colors4 cũng sử dụng điểm dừng thay vì điểm dừng tiếp theo (ví dụ: $theme-colors5 thay vì $theme-colors6 nhắm mục tiêu chế độ xem giữa $theme-colors7 và $theme-colors3).

• Breaking đã loại bỏ các kiểu in và biến $theme-colors9. Các lớp hiển thị in vẫn còn xung quanh. Xem #28339. Removed print styles and $theme-colors9 variable. Print display classes are still around. See #28339.

• Phá vỡ giảm color-yiq()0, color-yiq()1 và color-yiq()2 Các hàm có lợi cho các biến. Xem #29083. Dropped color-yiq()0, color-yiq()1, and color-yiq()2 functions in favor of variables. See #29083.

• Phá vỡ được đổi tên thành hàm color-yiq()3 thành color-yiq()4 và bây giờ chấp nhận bất kỳ màu nào bạn muốn thay vì chỉ color-yiq()5 màu. Xem #29083 Xem ra: color-yiq()4 sau đó đã bị loại bỏ trong color-yiq()7. Renamed color-yiq()3 function to color-yiq()4 and now accepts any color you want instead of only color-yiq()5 colors. See #29083 Watch out: color-yiq()4 was later on dropped in color-yiq()7.

• Phá vỡ được đổi tên thành color-yiq()8 và color-yiq()9 thành color-contrast()0 và color-contrast()1 cho sự ngắn gọn. Renamed color-yiq()8 and color-yiq()9 to color-contrast()0 and color-contrast()1 for brevity.

• Phá vỡ loại bỏ hỗn hợp color-contrast()2. Sử dụng lớp color-contrast()3 để thêm độ dốc vào các phần tử thay vì các lớp color-contrast()4 được tạo. Removed the color-contrast()2 mixin. Use the color-contrast()3 class to add gradients to elements instead of the generated color-contrast()4 classes.

• BreakingRemated mixin không dùng nữa: Removed previously deprecated mixins:

  • color-contrast()5, color-contrast()6, color-contrast()7 và color-contrast()8
  • color-contrast()9
  • $yiq-contrasted-threshold0
  • $yiq-contrasted-threshold1
  • $yiq-contrasted-threshold2
  • $yiq-contrasted-threshold3 (cũng bỏ lớp tiện ích liên quan, $yiq-contrasted-threshold4)
  • $yiq-contrasted-threshold5
  • $yiq-contrasted-threshold6

• Phá vỡ được đổi tên thành hàm $yiq-contrasted-threshold7 thành $yiq-contrasted-threshold8 để tránh va chạm với chức năng tỷ lệ màu của SASS. Renamed $yiq-contrasted-threshold7 function to $yiq-contrasted-threshold8 to avoid collision with Sass’s own color scaling function.

• $yiq-contrasted-threshold9 Mixin hiện cho phép các giá trị $min-contrast-ratio0 và giảm $min-contrast-ratio1 từ nhiều đối số. Xem #30394.

• Mixin $min-contrast-ratio2 hiện có giá trị mặc định.

Hệ thống màu

• Hệ thống màu hoạt động với color-yiq()4 và $min-contrast-ratio4 đã được loại bỏ để ủng hộ một hệ thống màu mới. Tất cả các hàm $min-contrast-ratio5 và $min-contrast-ratio6 trong cơ sở mã của chúng tôi được thay thế bằng $min-contrast-ratio7 và $min-contrast-ratio8. Các chức năng này sẽ trộn màu với màu trắng hoặc đen thay vì thay đổi độ sáng của nó bằng một lượng cố định. $yiq-contrasted-threshold8 sẽ có màu hoặc bóng một màu tùy thuộc vào việc tham số trọng lượng của nó là dương hay âm. Xem #30622 để biết thêm chi tiết.

• Đã thêm các màu và sắc thái mới cho mỗi màu, cung cấp chín màu riêng biệt cho mỗi màu cơ bản, như 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 va chạm từ 3: 1 đến 4,5: 1 và các màu xanh lam, xanh lá cây, màu lục lam và màu hồng được cập nhật để đảm bảo tương phản WCAG 2.1 AA. Cũng thay đổi màu sắc tương phản màu của chúng tôi từ $yiq-text-dark0 thành $yiq-text-dark1.

• Để 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 mới tùy chỉnh $min-contrast-ratio7 và $min-contrast-ratio8 để trộn màu của chúng tôi một cách thích hợp.

Cập nhật lưới

• Điểm dừng mới! Đã thêm điểm dừng $yiq-text-dark4 mới cho $yiq-text-dark5 trở lên. Không có thay đổi cho tất cả các điểm dừng khác. Added new $yiq-text-dark4 breakpoint for $yiq-text-dark5 and up. No changes to all other breakpoints.

• Cải thiện máng xối. Máng xối hiện được đặt trong REMS và hẹp hơn V4 ($yiq-text-dark6, hoặc khoảng $yiq-text-dark7, giảm từ $yiq-text-dark8). Điều này phù hợp với hệ thống lưới của chúng tôi, máng xối với các tiện ích khoảng cách của chúng tôi. Gutters are now set in rems, and are narrower than v4 ($yiq-text-dark6, or about $yiq-text-dark7, down from $yiq-text-dark8). This aligns our grid system’s gutters with our spacing utilities.

  • Đã thêm lớp máng xối mới ($yiq-text-dark9, $yiq-text-light0 và $yiq-text-light1) để 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 thành $yiq-text-light2 thành $yiq-text-light3 để phù hợp với các tiện ích máng xối mới. Renamed $yiq-text-light2 to $yiq-text-light3 to match new gutter utilities.

• Các cột không còn được áp dụng $yiq-text-light4, vì vậy bạn có thể phải thêm $yiq-text-light5 vào một số yếu tố để khôi phục hành vi đó.

• Phá vỡ đã giảm một số lớp $yiq-text-light6 thường không được sử dụng. Bây giờ chúng tôi chỉ cung cấp $yiq-text-light7 cho $yiq-text-light8 ra khỏi hộp. Dropped several $yiq-text-light6 classes that often went unused. We now only provide $yiq-text-light7 to $yiq-text-light8 out of the box.

• Phá vỡ làm rơi thành phần $yiq-text-light9 vì nó có thể dễ dàng nhân rộng với các tiện ích. Xem ví dụ #28265 và các tiện ích Flex để biết một ví dụ. Dropped the $yiq-text-light9 component as it can be easily replicated with utilities. See #28265 and the flex utilities page for an example.

• Breaking $color-contrast-dark0 Bây giờ chỉ áp dụng $color-contrast-dark1 cho cột thay vì đặt lại quy mô hộp toàn cầu. 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 cần can thiệp. $color-contrast-dark0 now only applies $color-contrast-dark1 to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.

• $color-contrast-dark2 không còn vô hiệu hóa việc tạo các lớp container nữa. Xem #29146.

• Đã cập nhật mixin $color-contrast-dark3 lên mặc định vào 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, vv

• RFS hiện được bật theo mặc định. Các tiêu đề sử dụng mixin $color-contrast-dark4 sẽ tự động điều chỉnh $color-contrast-dark5 của họ để mở rộng quy mô với chế độ xem. Tính năng này trước đây đã chọn tham gia với V4. Headings using the $color-contrast-dark4 mixin will automatically adjust their $color-contrast-dark5 to scale with the viewport. This feature was previously opt-in with v4.

• Phá vỡ đại tu kiểu chữ hiển thị của chúng tôi để thay thế các biến $color-contrast-dark6 của chúng tôi và với bản đồ sass $color-contrast-dark7. Cũng đã loại bỏ các biến $color-contrast-dark8 riêng lẻ cho một $color-contrast-dark9 và điều chỉnh ____855s. Overhauled our display typography to replace our $color-contrast-dark6 variables and with a $color-contrast-dark7 Sass map. Also removed the individual $color-contrast-dark8 variables for a single $color-contrast-dark9 and adjusted $color-contrast-dark5s.

• Đã thêm hai kích thước tiêu đề $color-contrast-light1 mới, $color-contrast-light2 và $color-contrast-light3.

• Các liên kết được gạch chân theo mặc định (không chỉ trên máy bay lơ lửng), trừ khi chúng là một phần của các thành phần cụ thể. (not just on hover), unless they’re part of specific components.

• 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 về kiểu dáng. to refresh their styles and rebuild them with CSS variables for more control over styling.

• Phá vỡ các bảng lồng không được kế thừa các kiểu nữa. Nested tables do not inherit styles anymore.

• Phá vỡ $color-contrast-light4 và $color-contrast-light5 được bỏ theo hướng có lợi cho các lớp biến thể $color-contrast-light6 có thể được sử dụng cho tất cả các yếu tố bảng ($color-contrast-light7, $color-contrast-light8, $color-contrast-light9, $theme-colors00, $theme-colors01 và $theme-colors02). $color-contrast-light4 and $color-contrast-light5 are dropped in favor of the $color-contrast-light6 variant classes which can be used for all table elements ($color-contrast-light7, $color-contrast-light8, $color-contrast-light9, $theme-colors00, $theme-colors01 and $theme-colors02).

• Phá vỡ hỗn hợp $theme-colors03 được đổi tên thành $theme-colors04 và chỉ chấp nhận 2 tham số: $theme-colors05 (tên màu) và $theme-colors06 (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 yếu tố bảng. The $theme-colors03 mixin is renamed to $theme-colors04 and accepts only 2 parameters: $theme-colors05 (color name) and $theme-colors06 (color code). The border color and accent colors are automatically calculated based on the table factor variables.

• Các biến đệm tế bào phân chia thành $theme-colors07 và $theme-colors08.

• Phá vỡ lớp $theme-colors09. Xem #29135 Dropped $theme-colors09 class. See #29135

• Phá vỡ các tiện ích $theme-colors10 không thêm trạng thái lơ lửng và tập trung vào các liên kết nữa. $theme-colors11 Các lớp trợ giúp có thể được sử dụng thay thế. Xem #29267 $theme-colors10 utilities do not add hover and focus states to links anymore. $theme-colors11 helper classes can be used instead. See #29267

• Phá vỡ lớp $theme-colors12. Xem #29793 Dropped $theme-colors12 class. See #29793

• Đặt lại mặc định ngang $theme-colors13 trên các phần tử $theme-colors14 và $theme-colors15 từ trình duyệt mặc định $theme-colors16 đến $theme-colors17.

• Đã thêm $theme-colors18, áp dụng $theme-colors19 trên toàn cầu, ngoại trừ người dùng yêu cầu giảm chuyển động thông qua truy vấn truyền thông $theme-colors20. Xem #31877

RTL

• Tất cả các biến số, tiện ích và hỗn hợp hướng theo hướng ngang đều được đổi tên để sử dụng các thuộc tính logic như các biến được tìm thấy trong bố cục flexbox

Các hình thức

• Đã thêm các hình thức nổi mới! Chúng tôi đã quảng bá 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. We’ve promoted the Floating labels example to fully supported form components. See the new Floating labels page.

• BreakingConsolidated Bản địa và các yếu tố hình thức tùy chỉnh. 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 yếu tố hình thức của chúng tôi hoàn toàn tùy chỉnh, hầu hết không cần HTML tùy chỉnh. Consolidated native and custom form elements. Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.

  • $theme-colors25 bây giờ là $theme-colors26.
  • $theme-colors27 bây giờ là $theme-colors28.
  • $theme-colors29 bây giờ là $theme-colors30.
  • $theme-colors31 và $theme-colors32 đã được thay thế bằng các kiểu tùy chỉnh trên đỉnh $theme-colors33.
  • $theme-colors34 bây giờ là $theme-colors35.
  • Thả bản địa $theme-colors36 và $theme-colors37.

• Phá vỡ giảm $theme-colors38 và $theme-colors39. Bây giờ bạn có thể chỉ cần thêm các nút và $theme-colors40 dưới dạng trẻ em trực tiếp của các nhóm đầu vào. Dropped $theme-colors38 and $theme-colors39. You can now just add buttons and $theme-colors40 as direct children of the input groups.

• Bán kính biên giới bị thiếu lâu dài trên nhóm đầu vào với lỗi phản hồi xác thực cuối cùng đã được sửa bằng cách thêm một lớp $theme-colors41 bổ sung vào các nhóm đầu vào có xác thực.

• BreakingDroped 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à tiện ích của chúng tôi thay vì $theme-colors42, $theme-colors43 hoặc $theme-colors44. Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of $theme-colors42, $theme-colors43, or $theme-colors44.

• Breaking Mẫu nhãn bây giờ yêu cầu $theme-colors45. Form labels now require $theme-colors45.

• Phá vỡ $theme-colors46 không còn đặt $theme-colors47, cho phép bạn tạo văn bản trợ giúp nội tuyến hoặc chặn như bạn muốn chỉ bằng cách thay đổi phần tử HTML. $theme-colors46 no longer sets $theme-colors47, allowing you to create inline or block help text as you wish just by changing the HTML element.

• Các biểu tượng xác nhận không còn được áp dụng cho $theme-colors48 với $theme-colors49.

• Sắp xếp lại các tệp SASS nguồn theo $theme-colors50, bao gồm các kiểu nhóm đầu vào.

Các thành phần

• Các giá trị thống nhất $theme-colors51 cho cảnh báo, bánh mì, thẻ, thả xuống, nhóm danh sách, phương thức, popover và chú giải công cụ dựa trên biến $theme-colors52 của chúng tôi. Xem #30564.

Accordion

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

Cảnh báo

• Cảnh báo bây giờ có ví dụ với các biểu tượng.

• Đã loại bỏ các kiểu tùy chỉnh cho $theme-colors53 trong mỗi cảnh báo vì chúng đã sử dụng $theme-colors54.

danh hiệu

• Phá vỡ đã giảm tất cả các lớp màu $theme-colors55 cho các tiện ích nền (ví dụ: sử dụng $theme-colors56 thay vì $theme-colors57). Dropped all $theme-colors55 color classes for background utilities (e.g., use $theme-colors56 instead of $theme-colors57).

• Thay vào đó, phá vỡ ____ 158 sử dụng tiện ích $theme-colors59. Dropped $theme-colors58—use the $theme-colors59 utility instead.

• Phá vỡ các kiểu lơ lửng và tập trung cho các phần tử $theme-colors60 và $theme-colors61. Removed hover and focus styles for $theme-colors60 and $theme-colors61 elements.

• Tăng đệm mặc định cho huy hiệu từ ________ 162/________ 163 lên ________ 164/________ 165.

• Đơn giản hóa sự xuất hiện mặc định của vụn bánh mì bằng cách loại bỏ $theme-colors51, $theme-colors67 và $theme-colors68.

• Đã thêm thuộc tính tùy chỉnh CSS mới $theme-colors69 để dễ dàng tùy chỉnh mà không cần phải biên dịch lại CSS.

nút

• Các nút BreakingToggle, với các 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 $theme-colors70 vào $theme-colors71 và ghép nó với bất kỳ lớp $theme-colors72 nào trên $theme-colors73. Xem #30650. Các tài liệu cho điều này đã chuyển từ trang nút của chúng tôi sang phần biểu mẫu mới. Toggle buttons, with checkboxes or radios, no longer require JavaScript and have new markup. We no longer require a wrapping element, add $theme-colors70 to the $theme-colors71, and pair it with any $theme-colors72 classes on the $theme-colors73. See #30650. The docs for this has moved from our Buttons page to the new Forms section.

• Breakingdroped $theme-colors74 cho các tiện ích. Thay vì sử dụng $theme-colors74 trên $theme-colors72, hãy quấn các nút của bạn bằng $theme-colors77 và tiện ích $theme-colors78 để không gian chúng khi cần thiết. Chuyển sang các lớp phản hồi để kiểm soát nhiều hơn đối với chúng. Đọc các tài liệu cho một số ví dụ. Dropped $theme-colors74 for utilities. Instead of using $theme-colors74 on the $theme-colors72, wrap your buttons with $theme-colors77 and a $theme-colors78 utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.

• Cập nhật mixin $theme-colors79 và $theme-colors80 của chúng tôi để hỗ trợ các tham số bổ sung.

• Các nút được cập nhật để đảm bảo tăng độ tương phản trên di chuột và trạng thái hoạt động.

• Các nút bị vô hiệu hóa hiện có $theme-colors81.

Thẻ

• Phá vỡ giảm $theme-colors82 có lợi cho lưới của chúng tôi. Bọc thẻ của bạn trong các lớp cột và thêm container cha mẹ $theme-colors83 để tạo lại các sàn thẻ (nhưng với quyền kiểm soát nhiều hơn đối với căn chỉnh đáp ứng). Dropped $theme-colors82 in favor of our grid. Wrap your cards in column classes and add a parent $theme-colors83 container to recreate card decks (but with more control over responsive alignment).

• Phá vỡ giảm $theme-colors84 có lợi cho Masonry. Xem #28922. Dropped $theme-colors84 in favor of Masonry. See #28922.

• Phá vỡ đã thay thế $theme-colors85 dựa trên accordion bằng một thành phần accordion mới. Replaced the $theme-colors85 based accordion with a new Accordion component.

Băng chuyền

• Đã thêm biến thể $theme-colors86 mới cho văn bản tối, điều khiển và các chỉ số (tuyệt vời cho nền nhẹ hơn).

• Đã thay thế các biểu tượng của Chevron cho các điều khiển băng chuyền bằng các SVG mới từ các biểu tượng bootstrap.

Đóng nút

• Phá vỡ được đổi tên thành $theme-colors87 thành $theme-colors88 cho một tên ít chung chung hơn. Renamed $theme-colors87 to $theme-colors88 for a less generic name.

• Các nút đóng bây giờ sử dụng $theme-colors89 (SVG nhúng) thay vì $theme-colors90 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 biến thể $theme-colors91 mới sử dụng $theme-colors92 để cho phép các biểu tượng loại bỏ độ tương phản cao hơn so với nền tối hơn.

Sụp đổ

• Đã loại bỏ cuộn neo cho accordions.

Thả xuống

• Đã thêm biến thể $theme-colors93 mới và các biến liên quan cho các thả xuống tối theo yêu cầu.

• Đã thêm biến mới cho $theme-colors94.

• Làm tối phân chia 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 đó sủi bọt đến phần tử cha. All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.

• Các menu thả xuống hiện có thuộc tính $theme-colors95 khi định vị của thả xuống là tĩnh và $theme-colors96 khi thả xuống 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ị Popper.

• Breaking Dreped $theme-colors97 Tùy chọn 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 tùy chọn $theme-colors98 trong công cụ sửa đổi lật. Dropped $theme-colors97 option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for $theme-colors98 option in flip modifier.

• Các menu thả xuống hiện có thể được nhấp bằng tùy chọn $theme-colors99 mới để xử lý hành vi đóng tự động. Bạn có thể sử dụng tùy chọn này để chấp nhận nhấp vào bên trong hoặc bên ngoài menu thả xuống để làm cho nó tương tác.

• Các thả xuống hiện hỗ trợ color-yiq()00 được gói trong color-yiq()01S.

Jumbotron

• Phá vỡ bỏ thành phần Jumbotron vì nó có thể được nhân rộng với các tiện ích. Xem ví dụ Jumbotron mới của chúng tôi để biết bản demo. Dropped the jumbotron component as it can be replicated with utilities. See our new Jumbotron example for a demo.

Danh sách nhóm

• Đã thêm công cụ sửa đổi color-yiq()02 mới vào các nhóm danh sách.

NAVS và tab

• Đã thêm các biến $min-contrast-ratio0 mới cho $color-contrast-dark5, color-yiq()05, color-yiq()06 và color-yiq()07 color-yiq()06 vào lớp color-yiq()09.

NAVBARS

• Breaking Navbars bây giờ yêu cầu một container bên trong (để đơn giản hóa đáng kể các yêu cầu khoảng cách và CSS yêu cầu). Navbars now require a container within (to drastically simplify spacing requirements and CSS required).

Offcanvas

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

• Các liên kết phân trang hiện có khả năng tùy chỉnh color-yiq()10 được làm tròn động trên tất cả các góc khi tách biệt với nhau.

• Đã thêm color-yiq()11s vào các liên kết phân trang.

Popovers

• Phá vỡ được đổi tên thành color-yiq()12 thành color-yiq()13 trong mẫu popover mặc định của chúng tôi. Renamed color-yiq()12 to color-yiq()13 in our default popover template.

• Đổi tên tùy chọn color-yiq()14 thành color-yiq()15.

Spinners

• Spinners bây giờ tôn vinh color-yiq()16 bằng cách làm chậm hoạt hình. Xem #31882.

• Cải thiện căn chỉnh dọc spinner.

Bánh mì nướng

• Bánh mì nướng hiện có thể được định vị trong một color-yiq()17 với sự 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.

• Đã loại bỏ color-yiq()18 khỏi bánh mì nướng và được thay thế bằng các $theme-colors68 thích hợp với các chức năng color-yiq()20.

Chú giải công cụ

• Phá vỡ được đổi tên thành color-yiq()12 thành color-yiq()22 trong mẫu công cụ mặc định của chúng tôi. Renamed color-yiq()12 to color-yiq()22 in our default tooltip template.

• Phá vỡ giá trị mặc định cho $theme-colors98 được thay đổi thành color-yiq()24 để đặt các phần tử popper tốt hơn. The default value for the $theme-colors98 is changed to color-yiq()24 for better placement of popper elements.

• Phá vỡ được đổi tên thành tùy chọn color-yiq()14 thành color-yiq()15. Renamed color-yiq()14 option to color-yiq()15.

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 định hướng với việc bổ sung hỗ trợ RTL: Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:

  • Đổi tên thành color-yiq()27 và color-yiq()28 thành color-yiq()29 và color-yiq()30.
  • Đổi tên thành color-yiq()31 và color-yiq()32 thành color-yiq()33 và color-yiq()34.
  • Đổi tên thành color-yiq()35 và color-yiq()36 thành color-yiq()37 và color-yiq()38.
  • Đổi tên thành color-yiq()39 và color-yiq()40 thành color-yiq()41 và color-yiq()42.
  • Đổi tên thành color-yiq()43 và color-yiq()44 thành color-yiq()45 và color-yiq()46.
  • Đổi tên thành color-yiq()47 và color-yiq()48 thành color-yiq()49 và color-yiq()50.
  • Đổi tên thành color-yiq()51 và color-yiq()52 thành color-yiq()53 và color-yiq()54.

• Phá vỡ tỷ suất lợi nhuận âm bị vô hiệu hóa theo mặc định. Disabled negative margins by default.

• Đã thêm lớp color-yiq()55 mới để nhanh chóng đặt nền ____ 256 vào các yếu tố bổ sung.

• Đã thêm các tiện ích vị trí mới cho color-yiq()57, $theme-colors24, color-yiq()59 và $theme-colors23. Các giá trị bao gồm color-yiq()61, color-yiq()62 và color-yiq()63 cho mỗi thuộc tính.

• Đã thêm các tiện ích color-yiq()64 & color-yiq()65 mới vào các phần tử định vị tuyệt đối/cố định theo chiều ngang hoặc chiều dọc.

• Đã thêm các tiện ích color-yiq()66 mới.

• Phá vỡ được đổi tên thành color-yiq()67 thành color-yiq()68. Renamed color-yiq()67 to color-yiq()68.

• Phá vỡ $yiq-contrasted-threshold4 vì nó là một phương pháp cổ xưa để ẩn văn bản không nên được sử dụng nữa. Removed $yiq-contrasted-threshold4 as it’s an antiquated method for hiding text that shouldn’t be used anymore.

• Đã thêm các tiện ích color-yiq()70 cho các tiện ích $color-contrast-dark5 (với RFS được bật). Chúng sử dụng cùng một thang đo 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ỡ được đổi tên thành các tiện ích color-yiq()72 là color-yiq()73 cho sự ngắn gọn và tính nhất quán. Renamed color-yiq()72 utilities as color-yiq()73 for brevity and consistency.

• Phá vỡ được đổi tên thành các tiện ích color-yiq()74 là color-yiq()75 cho sự ngắn gọn và tính nhất quán. Renamed color-yiq()74 utilities as color-yiq()75 for brevity and consistency.

• Đã thêm $theme-colors77 để hiển thị các tiện ích và các tiện ích color-yiq()77 mới (color-yiq()78) cho bố cục CSS Grid và Flexbox.

• Phá vỡ đã loại bỏ color-yiq()79 và color-yiq()80 và giới thiệu một thang điểm mới của các lớp, color-yiq()81 đến color-yiq()82. Xem #31687. Removed color-yiq()79 and color-yiq()80, and introduced a new scale of classes, color-yiq()81 to color-yiq()82. See #31687.

• Đã thêm các tiện ích color-yiq()83 mới: color-yiq()84, color-yiq()85, color-yiq()86 và color-yiq()87. Xem ở đây.

• Đã di chuyển tiện ích color-yiq()88 trong CSS của chúng tôi để cung cấp cho nó nhiều trọng lượng hơn các tiện ích hiển thị khác.

• Mở rộng người trợ giúp color-yiq()89 để làm việc trên các container, sử dụng color-yiq()90.

Người trợ giúp

• Những người trợ giúp nhúng phản hồi đã được đổi tên thành người trợ giúp tỷ lệ với tên lớp mới và các hành vi được cải thiện, cũng như một biến CSS hữu ích. Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.

  • Các lớp đã được đổi tên thành thay đổi color-yiq()91 thành color-yiq()92 theo tỷ lệ khung hình. Ví dụ, color-yiq()93 hiện là color-yiq()94.
  • Chúng tôi đã bỏ bộ chọn nhóm color-yiq()95 và phần tử để ủng hộ bộ chọn color-yiq()96 đơn giản hơn. Không cần thêm lớp, và người trợ giúp tỷ lệ hiện hoạt động với bất kỳ phần tử HTML nào.
  • Bản đồ SASS ____297 đã được đổi tên thành color-yiq()98 và 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 là cặp color-yiq()99.
  • Các biến CSS hiện được tạo và bao gồm cho từng giá trị trong bản đồ SASS. Sửa đổi biến color-contrast()00 trên color-contrast()01 để tạo bất kỳ tỷ lệ khung hình tùy chỉnh nào.

• Phá vỡ các lớp đọc trên màn hình của các lớp học hiện đang là các lớp ẩn trực quan. “Screen reader” classes are now “visually hidden” classes.

  • Đã thay đổi tệp SASS từ color-contrast()02 thành color-contrast()03
  • Đổi tên thành color-contrast()04 và color-contrast()05 thành color-contrast()06 và color-yiq()89
  • Đổi tên thành color-contrast()08 và color-contrast()09 Mixin thành color-contrast()10 và color-contrast()11.

• color-contrast()12 Bây giờ cũng bao gồm những người trợ giúp của chúng tôi. Người trợ giúp không cần phải nhập khẩu trong các bản dựng tùy chỉnh nữa.

JavaScript

• Đã bỏ các plugin phụ thuộc và viết lại các plugin để được JavaScript thường xuyên. and rewrote plugins to be in regular JavaScript.

• Phá vỡ các thuộc tính dữ liệu cho tất cả các plugin JavaScript hiện được đặt tên để giúp phân biệt chức năng bootstrap với bên thứ ba và mã của riêng bạn. Ví dụ: chúng tôi sử dụng color-contrast()13 thay vì color-contrast()14. Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use color-contrast()13 instead of color-contrast()14.

• Tất cả các plugin bây giờ có thể chấp nhận bộ chọn CSS làm đối số đầu tiên. Bạn có thể vượt qua phần tử DOM hoặc bất kỳ bộ chọn CSS hợp lệ nào để tạo phiên bản mới của plugin: You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

  var modal = new bootstrap.Modal('#myModal')
  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• color-contrast()15 có thể được truyền dưới dạng hàm chấp nhận cấu hình popper mặc định của Bootstrap, để bạn có thể hợp nhất cấu hình mặc định này theo cách của bạn. Áp dụng cho thả xuống, popover và chú giải công cụ.Applies to dropdowns, popovers, and tooltips.

• Giá trị mặc định cho $theme-colors98 được thay đổi thành color-yiq()24 để đặt các phần tử popper tốt hơn. Áp dụng cho thả xuống, popover và chú giải công cụ.Applies to dropdowns, popovers, and tooltips.

• Đã loại bỏ dấu gạch dưới khỏi các phương thức tĩnh công khai như color-contrast()18 → color-contrast()19.

Tôi có thể nâng cấp bootstrap 3 lên 4 không?

Tôi có thể nâng cấp Bootstrap 4 lên 5 không?

Làm cách nào để cập nhật Bootstrap lên phiên bản mới nhất?

Tại sao tôi nên nâng cấp lên Bootstrap 5?