Μεταφορά στο v5

Παρακολουθήστε και ελέγξτε τις αλλαγές στα αρχεία πηγής, την τεκμηρίωση και τα στοιχεία του Bootstrap για να σας βοηθήσουν να κάνετε μετεγκατάσταση από την έκδοση 4 στην έκδοση 5.

Σε αυτήν την σελίδα

Εξαρτήσεις

Έριξε το jQuery.
Αναβαθμίστηκε από Popper v1.x σε Popper v2.x.
Αντικατέστησε το Libsas με το Dart Sass καθώς ο μεταγλωττιστής Sass, δεδομένου του Libsas, καταργήθηκε.
Μετανάστευσε από το Τζέκιλ στο Χιούγκο για την κατασκευή της τεκμηρίωσής μας

Υποστήριξη προγράμματος περιήγησης

Έριξε ο Internet Explorer 10 και 11
Έριξε Microsoft Edge < 16 (Legacy Edge)
Έριξε το Firefox < 60
Έριξε το Safari < 12
Έριξε το iOS Safari < 12
Έριξε το Chrome < 60

Αλλαγές τεκμηρίωσης

Επανασχεδιασμένη αρχική σελίδα, διάταξη εγγράφων και υποσέλιδο.
Προστέθηκε νέος οδηγός δεμάτων .
Προστέθηκε η νέα ενότητα Προσαρμογή , αντικαθιστώντας τη σελίδα Theming του v4 , με νέες λεπτομέρειες για το Sass, καθολικές επιλογές διαμόρφωσης, συνδυασμούς χρωμάτων, μεταβλητές CSS και άλλα.
Αναδιοργάνωσε όλη την τεκμηρίωση φόρμας σε νέα ενότητα Φόρμες , χωρίζοντας το περιεχόμενο σε πιο εστιασμένες σελίδες.
Ομοίως, ενημερώθηκε η ενότητα Διάταξη , για να εμπλουτίσει το περιεχόμενο του πλέγματος πιο καθαρά.
Μετονομάστηκε η σελίδα στοιχείου "Navs" σε "Navs & Tabs".
Μετονομάστηκε η σελίδα "Επιταγές" σε "Έλεγχοι και ραδιόφωνα".
Επανασχεδίασε τη γραμμή πλοήγησης και πρόσθεσε μια νέα δευτερεύουσα πλοήγηση για να διευκολυνθεί η πρόσβαση στους ιστότοπους και τις εκδόσεις των εγγράφων μας.
Προστέθηκε νέα συντόμευση πληκτρολογίου για το πεδίο αναζήτησης: Ctrl + /.

Sass

Καταργήσαμε τις προεπιλεγμένες συγχωνεύσεις χαρτών Sass για να διευκολύνουμε την κατάργηση περιττών τιμών. Λάβετε υπόψη ότι τώρα πρέπει να ορίσετε όλες τις τιμές στους χάρτες Sass όπως $theme-colors. Δείτε πώς να χειριστείτε τους χάρτες Sass .
ΣπάσιμοΜετονομάστηκε η color-yiq()συνάρτηση και οι σχετικές μεταβλητές σε color-contrast()καθώς δεν σχετίζεται πλέον με τον χρωματικό χώρο YIQ. Δείτε #30168.
- $yiq-contrasted-thresholdμετονομάζεται σε $min-contrast-ratio.
- $yiq-text-darkκαι $yiq-text-lightμετονομάζονται αντίστοιχα σε $color-contrast-darkκαι $color-contrast-light.
ΣπάσιμοΟι παράμετροι των mixins ερωτημάτων μέσων έχουν αλλάξει για μια πιο λογική προσέγγιση.
- media-breakpoint-down()χρησιμοποιεί το ίδιο το σημείο διακοπής αντί για το επόμενο σημείο διακοπής (π.χ. media-breakpoint-down(lg)αντί για media-breakpoint-down(md)στοχεύσεις θυρών προβολής μικρότερες από lg).
- Ομοίως, η δεύτερη παράμετρος στο media-breakpoint-between()χρησιμοποιεί επίσης το ίδιο το σημείο διακοπής αντί για το επόμενο σημείο διακοπής (π.χ. media-between(sm, lg)αντί για media-breakpoint-between(sm, md)στοχεύσεις θυρών προβολής μεταξύ smκαι lg).
ΣπάσιμοΚαταργήθηκαν τα στυλ εκτύπωσης και η $enable-print-stylesμεταβλητή. Οι τάξεις προβολής εκτύπωσης εξακολουθούν να υπάρχουν. Δείτε #28339 .
ΣπάσιμοΈγινε πτώση color(), theme-color()και gray()συναρτάται υπέρ των μεταβλητών. Δείτε #29083 .
ΣπάσιμοΜετονομάστηκε theme-color-level()η συνάρτηση σε color-level()και δέχεται πλέον όποιο χρώμα θέλετε αντί μόνο για $theme-colorχρώματα. Δείτε #29083 Προσέξτε: color-level() αργότερα αποτέθηκε στο v5.0.0-alpha3.
ΣπάσιμοΜετονομάστηκε $enable-prefers-reduced-motion-media-queryκαι $enable-pointer-cursor-for-buttonsσε $enable-reduced-motionκαι $enable-button-pointersγια συντομία.
ΣπάσιμοΑφαίρεσε το bg-gradient-variant()mixin. Χρησιμοποιήστε την .bg-gradientκλάση για να προσθέσετε διαβαθμίσεις στα στοιχεία αντί για τις .bg-gradient-*κλάσεις που δημιουργούνται.
Σπάσιμο Καταργήθηκαν προηγουμένως καταργημένες μίξεις:
- hover, hover-focus, plain-hover-focus, καιhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(επίσης απέρριψε τη συσχετισμένη κλάση βοηθητικού προγράμματος, .text-hide)
- visibility()
- form-control-focus()
ΣπάσιμοΜετονομάστηκε scale-color()η συνάρτηση σε για shift-color()να αποφευχθεί η σύγκρουση με τη λειτουργία κλιμάκωσης χρώματος της ίδιας της Sass.
box-shadowΤα mixins επιτρέπουν πλέον nullτιμές και απορρίπτονται noneαπό πολλαπλά ορίσματα. Δείτε #30394 .
Το border-radius()mixin έχει τώρα μια προεπιλεγμένη τιμή.

Σύστημα χρωμάτων

Το σύστημα χρωμάτων που λειτούργησε color-level()και $theme-color-intervalαφαιρέθηκε υπέρ ενός νέου συστήματος χρωμάτων. Όλες lighten()και οι darken()συναρτήσεις στη βάση κωδικών μας αντικαθίστανται από tint-color()και shade-color(). Αυτές οι λειτουργίες θα αναμειγνύουν το χρώμα είτε με λευκό είτε με μαύρο αντί να αλλάζουν την ελαφρότητά του κατά ένα σταθερό ποσό. Το shift-color()χρώμα είτε θα χρωματίσει είτε θα σκιάσει ανάλογα με το αν η παράμετρος βάρους του είναι θετική ή αρνητική. Δείτε το #30622 για περισσότερες λεπτομέρειες.
Προστέθηκαν νέες αποχρώσεις και αποχρώσεις για κάθε χρώμα, παρέχοντας εννέα ξεχωριστά χρώματα για κάθε βασικό χρώμα, ως νέες μεταβλητές Sass.
Βελτιωμένη χρωματική αντίθεση. Αυξήθηκε ο λόγος αντίθεσης χρωμάτων από 3:1 σε 4,5:1 και ενημερώθηκαν τα μπλε, πράσινα, κυανό και ροζ χρώματα για να διασφαλιστεί η αντίθεση WCAG 2,1 AA. Επίσης άλλαξε το χρώμα αντίθεσης χρώματος από $gray-900σε $black.
Για να υποστηρίξουμε το σύστημα χρωμάτων μας, προσθέσαμε νέες προσαρμογές tint-color()και shade-color()λειτουργίες για να αναμειγνύουμε κατάλληλα τα χρώματά μας.

Ενημερώσεις πλέγματος

Νέο σημείο διακοπής! Προστέθηκε νέο xxlσημείο διακοπής για 1400pxκαι επάνω. Καμία αλλαγή σε όλα τα άλλα σημεία διακοπής.
Βελτιωμένες υδρορροές. Οι υδρορροές έχουν πλέον ρυθμιστεί σε rems και είναι στενότεροι από v4 ( 1.5rem, ή περίπου 24px, κάτω από 30px). Αυτό ευθυγραμμίζει τις υδρορροές του συστήματος δικτύων μας με τις βοηθητικές μας υπηρεσίες διαστήματος.
- Προστέθηκε νέα κατηγορία υδρορροών ( .g-*, .gx-*, και .gy-*) για τον έλεγχο οριζόντιων/κάθετων υδρορροών, οριζόντιων υδρορροών και κάθετων υδρορροών.
- ΣπάσιμοΜετονομάστηκε .no-guttersσε για .g-0να ταιριάζει με τα νέα βοηθητικά προγράμματα υδρορροής.
Οι στήλες δεν έχουν πλέον position: relativeεφαρμοστεί, επομένως ίσως χρειαστεί να προσθέσετε .position-relativeκάποια στοιχεία για να επαναφέρετε αυτήν τη συμπεριφορά.
ΣπάσιμοΈριξε αρκετές .order-*τάξεις που συχνά έμεναν αχρησιμοποίητα. Τώρα παρέχουμε μόνο .order-1out .order-5of the box.
ΣπάσιμοΈριξε το .mediaεξάρτημα καθώς μπορεί εύκολα να αναπαραχθεί με βοηθητικά προγράμματα. Δείτε το #28265 και τη σελίδα flex utilities για παράδειγμα .
Σπάσιμο bootstrap-grid.cssτώρα ισχύει μόνο box-sizing: border-boxγια τη στήλη αντί για επαναφορά του καθολικού μεγέθους πλαισίου. Με αυτόν τον τρόπο, τα στυλ πλέγματος μας μπορούν να χρησιμοποιηθούν σε περισσότερα σημεία χωρίς παρεμβολές.
$enable-grid-classesδεν απενεργοποιεί πλέον τη δημιουργία κλάσεων κοντέινερ. Δείτε #29146.
Ενημερώθηκε το make-colmixin ως προεπιλογή σε ίσες στήλες χωρίς καθορισμένο μέγεθος.

Περιεχόμενο, Επανεκκίνηση κ.λπ

Το RFS είναι πλέον ενεργοποιημένο από προεπιλογή. Οι επικεφαλίδες που χρησιμοποιούν τοfont-size()mixin θα προσαρμόσουν αυτόματα τηνfont-sizeκλίμακα τους με τη θύρα προβολής. Αυτή η δυνατότητα ήταν προηγουμένως ενεργοποιημένη με την έκδοση 4.
ΣπάσιμοΑναθεώρησε την τυπογραφία οθόνης μας για να αντικαταστήσει τις $display-*μεταβλητές μας και με έναν $display-font-sizesχάρτη Sass. Επίσης, αφαιρέθηκαν οι μεμονωμένες $display-*-weightμεταβλητές για ένα $display-font-weightκαι προσαρμόστηκαν font-sizes.
Προστέθηκαν δύο νέα .display-*μεγέθη επικεφαλίδων .display-5και .display-6.
Οι σύνδεσμοι είναι υπογραμμισμένοι από προεπιλογή (όχι μόνο κατά την τοποθέτηση του δείκτη), εκτός εάν αποτελούν μέρος συγκεκριμένων στοιχείων.
Επανασχεδιασμένοι πίνακες για να ανανεώσουν τα στυλ τους και να τα ξαναχτίσουν με μεταβλητές CSS για περισσότερο έλεγχο στο στυλ.
ΣπάσιμοΟι ένθετοι πίνακες δεν κληρονομούν πλέον στυλ.
Σπάσιμο .thead-lightκαι .thead-darkαπορρίπτονται υπέρ των .table-*κλάσεων παραλλαγής που μπορούν να χρησιμοποιηθούν για όλα τα στοιχεία πίνακα ( thead, tbody, tfoot, tr, thκαι td).
ΣπάσιμοΤο table-row-variant()mixin μετονομάζεται σε table-variant()και δέχεται μόνο 2 παραμέτρους: $color(όνομα χρώματος) και $value(κωδικός χρώματος). Το χρώμα του περιγράμματος και τα χρώματα έμφασης υπολογίζονται αυτόματα με βάση τις μεταβλητές παράγοντα πίνακα.
Διαχωρίστε τις μεταβλητές πλήρωσης κελιών πίνακα σε -yκαι -x.
ΣπάσιμοΈριξε το .pre-scrollableμάθημα. Δείτε #29135
Σπάσιμο .text-*Τα βοηθητικά προγράμματα δεν προσθέτουν πλέον καταστάσεις αιώρησης και εστίασης σε συνδέσμους. .link-*Αντ' αυτού μπορούν να χρησιμοποιηθούν βοηθητικές τάξεις. Δείτε #29267
ΣπάσιμοΈριξε το .text-justifyμάθημα. Δείτε #29793
Σπάσιμο <hr>Τα στοιχεία χρησιμοποιούνται πλέον heightαντί για borderτην καλύτερη υποστήριξη του sizeχαρακτηριστικού. Αυτό επιτρέπει επίσης τη χρήση βοηθητικών προγραμμάτων padding για τη δημιουργία παχύτερων διαχωριστικών (π.χ., <hr class="py-1">).
Επαναφέρετε την προεπιλεγμένη οριζόντια padding-leftενεργοποίηση <ul>και <ol>τα στοιχεία από την προεπιλογή του προγράμματος περιήγησης 40pxσε 2rem.
Προστέθηκε $enable-smooth-scroll, το οποίο ισχύει scroll-behavior: smoothπαγκοσμίως—εκτός από τους χρήστες που ζητούν μειωμένη κίνηση μέσω prefers-reduced-motionερωτήματος μέσων. Δείτε #31877

RTL

Οι μεταβλητές, τα βοηθητικά προγράμματα και οι μίξεις συγκεκριμένες οριζόντιας κατεύθυνσης έχουν όλα μετονομαστεί για να χρησιμοποιούν λογικές ιδιότητες όπως αυτές που βρίσκονται στις διατάξεις flexbox—π.χ. startκαι endαντί για leftκαι right.

Έντυπα

Προστέθηκαν νέες πλωτές φόρμες! Έχουμε προωθήσει το παράδειγμα Κυμαινόμενων ετικετών σε πλήρως υποστηριζόμενα στοιχεία φόρμας. Δείτε τη νέα σελίδα Κυμαινόμενων ετικετών.
Σπάσιμο Ενοποιημένα εγγενή και προσαρμοσμένα στοιχεία φόρμας. Τα πλαίσια ελέγχου, τα ραδιόφωνα, οι επιλογές και άλλες είσοδοι που είχαν εγγενείς και προσαρμοσμένες κλάσεις στο v4 έχουν ενοποιηθεί. Τώρα σχεδόν όλα τα στοιχεία της φόρμας μας είναι εξ ολοκλήρου προσαρμοσμένα, τα περισσότερα χωρίς την ανάγκη προσαρμοσμένου HTML.
- .custom-checkείναι τώρα .form-check.
- .custom-check.custom-switchείναι τώρα .form-check.form-switch.
- .custom-selectείναι τώρα .form-select.
- .custom-fileκαι .form-fileέχουν αντικατασταθεί από προσαρμοσμένα στυλ πάνω από το .form-control.
- .custom-rangeείναι τώρα .form-range.
- Έπεσε γηγενής .form-control-fileκαι .form-control-range.
ΣπάσιμοΈπεσε .input-group-appendκαι .input-group-prepend. Τώρα μπορείτε απλώς να προσθέσετε κουμπιά και .input-group-textως απευθείας παιδιά των ομάδων εισόδου.
Η μακροχρόνια ακτίνα περιγράμματος που λείπει στην ομάδα εισόδου με σφάλμα ανάδρασης επικύρωσης διορθώνεται τελικά με την προσθήκη μιας πρόσθετης .has-validationκλάσης σε ομάδες εισόδου με επικύρωση.
Σπάσιμο Καταργήθηκαν οι κατηγορίες διάταξης για το σύστημα πλέγματος μας. Χρησιμοποιήστε το πλέγμα και τα βοηθητικά προγράμματα αντί για .form-group, .form-rowή .form-inline.
ΣπάσιμοΟι ετικέτες φόρμας πλέον απαιτούν .form-label.
Σπάσιμο .form-textδεν ορίζεται πλέον display, επιτρέποντάς σας να δημιουργείτε ενσωματωμένο ή να αποκλείετε κείμενο βοήθειας όπως θέλετε απλώς αλλάζοντας το στοιχείο HTML.
Τα εικονίδια επικύρωσης δεν εφαρμόζονται πλέον σε <select>s με multiple.
Αναδιάταξη αρχείων Sass πηγής κάτω από το scss/forms/, συμπεριλαμβανομένων των στυλ ομάδων εισόδου.

Συστατικά

Ενοποιημένες paddingτιμές για ειδοποιήσεις, ψίχουλα, κάρτες, αναπτυσσόμενα μενού, ομάδες λιστών, modals, popover και συμβουλές εργαλείων που βασίζονται στη $spacerμεταβλητή μας. Δείτε #30564 .

Ακορντεόν

Προστέθηκε νέο στοιχείο ακορντεόν .

Ειδοποιήσεις

Οι ειδοποιήσεις έχουν πλέον παραδείγματα με εικονίδια .
Καταργήθηκαν προσαρμοσμένα στυλ για <hr>s σε κάθε ειδοποίηση, καθώς χρησιμοποιούν ήδη currentColor.

Σήματα

ΣπάσιμοΈριξε όλες τις .badge-*κατηγορίες χρωμάτων για βοηθητικά προγράμματα φόντου (π.χ. χρήση .bg-primaryαντί για .badge-primary).
ΣπάσιμοΈριξε .badge-pill— χρησιμοποιήστε το .rounded-pillβοηθητικό πρόγραμμα.
ΣπάσιμοΚαταργήθηκαν τα στυλ τοποθέτησης και εστίασης για <a>και <button>στοιχεία.
Αυξήθηκε η προεπιλεγμένη πλήρωση για τα σήματα από .25em/ .5emπρος .35em/ .65em.

Τριμμένη φρυγανιά

Απλοποιήθηκε η προεπιλεγμένη εμφάνιση των τριμμάτων φρυγανιάς αφαιρώντας τα padding, background-colorκαι border-radius.
Προστέθηκε νέα προσαρμοσμένη ιδιότητα CSS --bs-breadcrumb-dividerγια εύκολη προσαρμογή χωρίς να χρειάζεται να μεταγλωττίσετε ξανά το CSS.

Κουμπιά

Σπάσιμο Τα κουμπιά εναλλαγής , με πλαίσια ελέγχου ή ραδιόφωνα, δεν απαιτούν πλέον JavaScript και έχουν νέα σήμανση. Δεν χρειαζόμαστε πλέον ένα στοιχείο αναδίπλωσης, προσθέτουμε.btn-checkστο<input>, και το αντιστοιχίζουμε με οποιεσδήποτε.btnκλάσεις στο<label>. Δείτε #30650 . Τα έγγραφα για αυτό έχουν μετακινηθεί από τη σελίδα Κουμπιά στη νέα ενότητα Φόρμες.
Σπάσιμο Έριξε .btn-blockγια κοινή χρήση. Αντί να χρησιμοποιείτε .btn-blockστο .btn, τυλίξτε τα κουμπιά σας με .d-gridένα .gap-*βοηθητικό πρόγραμμα για να τα τοποθετήσετε σε απόσταση όπως απαιτείται. Μεταβείτε σε ανταποκρινόμενες κλάσεις για ακόμη περισσότερο έλεγχο πάνω τους. Διαβάστε τα έγγραφα για μερικά παραδείγματα.
Ενημερώθηκαν οι button-variant()μίξεις μας button-outline-variant()για την υποστήριξη πρόσθετων παραμέτρων.
Ενημερωμένα κουμπιά για τη διασφάλιση αυξημένης αντίθεσης στις καταστάσεις αιώρησης και ενεργές.
Τα απενεργοποιημένα κουμπιά έχουν πλέον pointer-events: none;.

Κάρτα

ΣπάσιμοΈπεσε .card-deckυπέρ του πλέγματος μας. Τυλίξτε τις κάρτες σας σε κατηγορίες στηλών και προσθέστε ένα μητρικό .row-cols-*κοντέινερ για να δημιουργήσετε ξανά τράπουλα (αλλά με περισσότερο έλεγχο στην ευθυγράμμιση με απόκριση).
ΣπάσιμοΈπεσε .card-columnsυπέρ του Τεκτονισμού. Δείτε #28922 .
ΣπάσιμοΑντικαταστάθηκε το .cardβασισμένο ακορντεόν με ένα νέο εξάρτημα Ακορντεόν .

Στροβιλοδρόμιο

Προστέθηκε νέα .carousel-darkπαραλλαγή για σκούρο κείμενο, χειριστήρια και ενδείξεις (ιδανική για πιο ανοιχτόχρωμα φόντο).
Αντικαταστάθηκαν τα εικονίδια chevron για τα χειριστήρια καρουζέλ με νέα SVG από τα εικονίδια Bootstrap .

Κουμπί κλεισίματος

ΣπάσιμοΜετονομάστηκε .closeσε .btn-closeγια λιγότερο γενικό όνομα.
Τα κουμπιά κλεισίματος χρησιμοποιούν τώρα ένα background-image(ενσωματωμένο SVG) αντί για ένα ×στο HTML, επιτρέποντας την ευκολότερη προσαρμογή χωρίς να χρειάζεται να αγγίξετε τη σήμανση.
Προστέθηκε νέα .btn-close-whiteπαραλλαγή που χρησιμοποιείται filter: invert(1)για την ενεργοποίηση εικονιδίων απόρριψης υψηλότερης αντίθεσης σε πιο σκούρο φόντο.

Κατάρρευση

Αφαιρέθηκε η αγκύρωση κύλισης για ακορντεόν.

Αναπτυσσόμενα

Προστέθηκε νέα .dropdown-menu-darkπαραλλαγή και σχετικές μεταβλητές για σκούρα αναπτυσσόμενα κατά παραγγελία.
Προστέθηκε νέα μεταβλητή για $dropdown-padding-x.
Σκουραίνει το αναπτυσσόμενο διαχωριστικό για βελτιωμένη αντίθεση.
ΣπάσιμοΌλα τα συμβάντα για το αναπτυσσόμενο μενού ενεργοποιούνται τώρα στο αναπτυσσόμενο κουμπί εναλλαγής και στη συνέχεια μεταφέρονται με φυσαλίδες στο γονικό στοιχείο.
Τα αναπτυσσόμενα μενού έχουν πλέον ένα data-bs-popper="static"σύνολο χαρακτηριστικών όταν η θέση του αναπτυσσόμενου μενού είναι στατική και data-bs-popper="none"όταν το αναπτυσσόμενο μενού βρίσκεται στη γραμμή πλοήγησης. Αυτό προστίθεται από τη JavaScript μας και μας βοηθά να χρησιμοποιούμε προσαρμοσμένα στυλ θέσης χωρίς να παρεμβαίνουμε στην τοποθέτηση του Popper.
ΣπάσιμοΚαταργήθηκε flipη επιλογή για αναπτυσσόμενη προσθήκη υπέρ της εγγενούς διαμόρφωσης Popper. Μπορείτε τώρα να απενεργοποιήσετε τη συμπεριφορά αναστροφής περνώντας έναν κενό πίνακα για fallbackPlacementsεπιλογή στον τροποποιητή αναστροφής .
Τα αναπτυσσόμενα μενού μπορούν τώρα να κάνουν κλικ με μια νέα autoCloseεπιλογή χειρισμού της συμπεριφοράς αυτόματου κλεισίματος . Μπορείτε να χρησιμοποιήσετε αυτήν την επιλογή για να αποδεχτείτε το κλικ μέσα ή έξω από το αναπτυσσόμενο μενού για να το κάνετε διαδραστικό.
Τα αναπτυσσόμενα προγράμματα υποστηρίζουν πλέον .dropdown-items τυλιγμένα σε <li>s.

Jumbotron

ΣπάσιμοΈριξε το στοιχείο jumbotron καθώς μπορεί να αναπαραχθεί με βοηθητικά προγράμματα. Δείτε το νέο μας παράδειγμα Jumbotron για μια επίδειξη.

Ομάδα λίστας

Προστέθηκε νέος .list-group-numberedτροποποιητής στις ομάδες λιστών.

Πλοήγηση και καρτέλες

Προστέθηκαν νέες nullμεταβλητές για font-size, font-weight, colorκαι :hover colorστην .nav-linkτάξη.

Navbars

ΣπάσιμοΟι γραμμές πλοήγησης απαιτούν τώρα ένα κοντέινερ εντός (για να απλοποιηθούν δραστικά οι απαιτήσεις απόστασης και απαιτείται CSS).

Εκτός καμβά

Προστέθηκε το νέο στοιχείο offcanvas .

Σελιδοποίηση

Οι σύνδεσμοι σελιδοποίησης έχουν πλέον δυνατότητα προσαρμογής margin-leftπου στρογγυλεύονται δυναμικά σε όλες τις γωνίες όταν χωρίζονται ο ένας από τον άλλο.
Προστέθηκαν transitions στους συνδέσμους σελιδοποίησης.

Popovers

ΣπάσιμοΜετονομάστηκε .arrowσε .popover-arrowστο προεπιλεγμένο πρότυπο popover.
Μετονομάστηκε whiteListη επιλογή σε allowList.

Κλωστές

Οι Spinner τιμούν τώρα prefers-reduced-motion: reduceεπιβραδύνοντας τα κινούμενα σχέδια. Δείτε #31882 .
Βελτιωμένη κατακόρυφη ευθυγράμμιση του κλωστή.

Τοστ

Τα τοστ μπορούν τώρα να τοποθετηθούν σε ένα .toast-containerμε τη βοήθεια βοηθητικών προγραμμάτων τοποθέτησης .
Η προεπιλεγμένη διάρκεια τοστ άλλαξε σε 5 δευτερόλεπτα.
Αφαιρέθηκε overflow: hiddenαπό τοστ και αντικαταστάθηκε με κατάλληλα border-radiuss με calc()λειτουργίες.

Συμβουλές εργαλείων

ΣπάσιμοΜετονομάστηκε .arrowσε .tooltip-arrowστο προεπιλεγμένο πρότυπο συμβουλής εργαλείων.
ΣπάσιμοΗ προεπιλεγμένη τιμή για το fallbackPlacementsαλλάζει σε ['top', 'right', 'bottom', 'left']για καλύτερη τοποθέτηση των στοιχείων popper.
ΣπάσιμοΜετονομάστηκε whiteListη επιλογή σε allowList.

Βοηθητικά προγράμματα

ΣπάσιμοΜετονόμασε πολλά βοηθητικά προγράμματα για χρήση λογικών ονομάτων ιδιοτήτων αντί ονομάτων κατευθύνσεων με την προσθήκη υποστήριξης RTL:
- Μετονομάστηκε .left-*και .right-*σε .start-*και .end-*.
- Μετονομάστηκε .float-leftκαι .float-rightσε .float-startκαι .float-end.
- Μετονομάστηκε .border-leftκαι .border-rightσε .border-startκαι .border-end.
- Μετονομάστηκε .rounded-leftκαι .rounded-rightσε .rounded-startκαι .rounded-end.
- Μετονομάστηκε .ml-*και .mr-*σε .ms-*και .me-*.
- Μετονομάστηκε .pl-*και .pr-*σε .ps-*και .pe-*.
- Μετονομάστηκε .text-leftκαι .text-rightσε .text-startκαι .text-end.
ΣπάσιμοΑπενεργοποιήθηκαν τα αρνητικά περιθώρια από προεπιλογή.
Προστέθηκε νέα .bg-bodyτάξη για γρήγορη ρύθμιση του <body>φόντου του σε πρόσθετα στοιχεία.
Προστέθηκαν νέα βοηθητικά προγράμματα θέσης για top, right, bottomκαι left. Οι τιμές περιλαμβάνουν 0, 50%, και 100%για κάθε ιδιοκτησία.
Προστέθηκαν νέα .translate-middle-x& .translate-middle-yβοηθητικά προγράμματα σε οριζόντια ή κατακόρυφα στο κέντρο απόλυτα/σταθερά τοποθετημένα στοιχεία.
Προστέθηκαν νέα border-widthβοηθητικά προγράμματα .
ΣπάσιμοΜετονομάστηκε .text-monospaceσε .font-monospace.
ΣπάσιμοΚαταργήθηκε .text-hideκαθώς είναι μια απαρχαιωμένη μέθοδος απόκρυψης κειμένου που δεν πρέπει να χρησιμοποιείται πλέον.
Προστέθηκαν .fs-*βοηθητικά προγράμματα για font-sizeβοηθητικά προγράμματα (με ενεργοποιημένο το RFS). Αυτές χρησιμοποιούν την ίδια κλίμακα με τις προεπιλεγμένες επικεφαλίδες του HTML (1-6, μεγάλο σε μικρό) και μπορούν να τροποποιηθούν μέσω του χάρτη Sass.
ΣπάσιμοΜετονομάστηκε .font-weight-*βοηθητικά προγράμματα .fw-*για λόγους συντομίας και συνέπειας.
ΣπάσιμοΜετονομάστηκε .font-style-*βοηθητικά προγράμματα .fst-*για λόγους συντομίας και συνέπειας.
Προστέθηκε .d-gridσε βοηθητικά προγράμματα εμφάνισης και νέα gapβοηθητικά προγράμματα ( .gap) για διατάξεις πλέγματος CSS και flexbox.
ΣπάσιμοΑφαιρέθηκε .rounded-smκαι rounded-lg, και εισήγαγε μια νέα κλίμακα κλάσεων, .rounded-0σε .rounded-3. Δείτε #31687 .
Προστέθηκαν νέα line-heightβοηθητικά προγράμματα: .lh-1, .lh-sm, .lh-baseκαι .lh-lg. Δείτε εδώ .
Μετακίνησε το .d-noneβοηθητικό πρόγραμμα στο CSS για να του δώσει μεγαλύτερη βαρύτητα σε σχέση με άλλα βοηθητικά προγράμματα προβολής.
Επέκτεινε τον .visually-hidden-focusableβοηθό ώστε να εργάζεται και σε δοχεία, χρησιμοποιώντας :focus-within.

Βοηθοί

Σπάσιμο Οι αποκριτικές βοηθοί ενσωμάτωσης έχουν μετονομαστεί σε βοηθούς αναλογίας με νέα ονόματα κλάσεων και βελτιωμένες συμπεριφορές, καθώς και μια χρήσιμη μεταβλητή CSS.
- Οι κλάσεις έχουν μετονομαστεί για να αλλάξουν byσε xαναλογία διαστάσεων. Για παράδειγμα, .ratio-16by9είναι τώρα .ratio-16x9.
- Καταργήσαμε τον .embed-responsive-itemεπιλογέα ομάδας και στοιχείων προς όφελος ενός απλούστερου .ratio > *επιλογέα. Δεν χρειάζεται άλλη κλάση και ο βοηθός αναλογίας τώρα λειτουργεί με οποιοδήποτε στοιχείο HTML.
- Ο $embed-responsive-aspect-ratiosχάρτης Sass μετονομάστηκε σε $aspect-ratiosκαι οι τιμές του έχουν απλοποιηθεί για να συμπεριλάβουν το όνομα της κλάσης και το ποσοστό ως key: valueζεύγος.
- Οι μεταβλητές CSS δημιουργούνται πλέον και περιλαμβάνονται για κάθε τιμή στον χάρτη Sass. Τροποποιήστε τη --bs-aspect-ratioμεταβλητή στο για .ratioνα δημιουργήσετε οποιονδήποτε προσαρμοσμένο λόγο διαστάσεων .
Σπάσιμο Οι τάξεις "Screen reader" είναι πλέον κλάσεις "οπτικά κρυφές" .
- Άλλαξε το αρχείο Sass από scss/helpers/_screenreaders.scssσεscss/helpers/_visually-hidden.scss
- Μετονομάστηκε .sr-onlyκαι .sr-only-focusableσε .visually-hiddenκαι.visually-hidden-focusable
- Μετονομάστηκε sr-only()και sr-only-focusable()αναμιγνύεται σε visually-hidden()και visually-hidden-focusable().
bootstrap-utilities.cssτώρα περιλαμβάνει και τους βοηθούς μας. Οι βοηθοί δεν χρειάζεται πλέον να εισάγονται σε προσαρμοσμένες εκδόσεις.

JavaScript

Έριξε την εξάρτηση jQuery και ξαναέγραψε τα πρόσθετα για να είναι σε κανονική JavaScript.
ΣπάσιμοΤα χαρακτηριστικά δεδομένων για όλα τα πρόσθετα JavaScript έχουν πλέον χώρο ονομάτων για να βοηθήσουν στη διάκριση της λειτουργικότητας του Bootstrap από τρίτα μέρη και του δικού σας κώδικα. Για παράδειγμα, χρησιμοποιούμε data-bs-toggleαντί για data-toggle.
Όλα τα πρόσθετα μπορούν πλέον να αποδεχτούν έναν επιλογέα CSS ως πρώτο όρισμα. Μπορείτε είτε να περάσετε ένα στοιχείο DOM είτε οποιονδήποτε έγκυρο επιλογέα CSS για να δημιουργήσετε μια νέα παρουσία της προσθήκης:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigμπορεί να μεταβιβαστεί ως συνάρτηση που δέχεται την προεπιλεγμένη διαμόρφωση Popper του Bootstrap ως όρισμα, έτσι ώστε να μπορείτε να συγχωνεύσετε αυτήν την προεπιλεγμένη διαμόρφωση με τον τρόπο σας. Ισχύει για αναπτυσσόμενα, popover και συμβουλές εργαλείων.
Η προεπιλεγμένη τιμή για το fallbackPlacementsαλλάζει σε ['top', 'right', 'bottom', 'left']για καλύτερη τοποθέτηση των στοιχείων Popper. Ισχύει για αναπτυσσόμενα, popover και συμβουλές εργαλείων.
Καταργήθηκε η υπογράμμιση από δημόσιες στατικές μεθόδους όπως _getInstance()→ getInstance().