in English

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

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

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

v5.2.0

Ανανεωμένο σχέδιο

Το Bootstrap v5.2.0 διαθέτει μια λεπτή ενημέρωση σχεδίασης για μια χούφτα εξαρτημάτων και ιδιοτήτων σε όλο το έργο, κυρίως μέσω εκλεπτυσμένων border-radiusτιμών στα κουμπιά και τα στοιχεία ελέγχου φορμών . Η τεκμηρίωσή μας έχει επίσης ενημερωθεί με μια νέα αρχική σελίδα, απλούστερη διάταξη εγγράφων που δεν συμπτύσσει πλέον τμήματα της πλαϊνής γραμμής και πιο εμφανή παραδείγματα εικονιδίων Bootstrap .

Περισσότερες μεταβλητές CSS

Έχουμε ενημερώσει όλα τα στοιχεία μας για χρήση μεταβλητών CSS. Ενώ το Sass εξακολουθεί να υποστηρίζει τα πάντα, κάθε στοιχείο έχει ενημερωθεί για να περιλαμβάνει μεταβλητές CSS στις βασικές κατηγορίες στοιχείων (π.χ., .btn), επιτρέποντας περισσότερη προσαρμογή του Bootstrap σε πραγματικό χρόνο. Σε επόμενες εκδόσεις, θα συνεχίσουμε να επεκτείνουμε τη χρήση των μεταβλητών CSS στη διάταξη, τις φόρμες, τους βοηθούς και τα βοηθητικά προγράμματα. Διαβάστε περισσότερα σχετικά με τις μεταβλητές CSS σε κάθε στοιχείο στις αντίστοιχες σελίδες τεκμηρίωσης.

Η χρήση της μεταβλητής μας CSS θα είναι κάπως ημιτελής μέχρι το Bootstrap 6. Αν και θα θέλαμε να τις εφαρμόσουμε πλήρως σε όλους τους τομείς, διατρέχουν τον κίνδυνο να προκαλέσουν αλλαγές. Για παράδειγμα, η ρύθμιση $alert-border-width: var(--bs-border-width)στον πηγαίο κώδικα σπάει το πιθανό Sass στον δικό σας κώδικα, εάν το κάνατε $alert-border-width * 2για κάποιο λόγο.

Ως εκ τούτου, όπου είναι δυνατόν, θα συνεχίσουμε να πιέζουμε προς περισσότερες μεταβλητές CSS, αλλά αναγνωρίστε ότι η υλοποίησή μας μπορεί να είναι ελαφρώς περιορισμένη στο v5.

Νέος`_maps.scss`

Το Bootstrap v5.2.0 παρουσίασε ένα νέο αρχείο Sass με _maps.scss. Εξάγει αρκετούς χάρτες Sass _variables.scssγια να διορθώσει ένα πρόβλημα όπου οι ενημερώσεις σε έναν αρχικό χάρτη δεν εφαρμόστηκαν σε δευτερεύοντες χάρτες που τους επεκτείνουν. Για παράδειγμα, οι ενημερώσεις σε $theme-colorsδεν εφαρμόζονταν σε άλλους χάρτες θεμάτων που βασίζονταν σε $theme-colors, παραβιάζοντας τις βασικές ροές εργασίας προσαρμογής. Εν ολίγοις, το Sass έχει έναν περιορισμό όπου όταν χρησιμοποιηθεί μια προεπιλεγμένη μεταβλητή ή χάρτης , δεν μπορεί να ενημερωθεί. Υπάρχει ένα παρόμοιο μειονέκτημα με τις μεταβλητές CSS όταν χρησιμοποιούνται για τη σύνθεση άλλων μεταβλητών CSS.

Αυτός είναι ο λόγος για τον οποίο οι προσαρμογές μεταβλητών στο Bootstrap πρέπει να ακολουθούν μετά το @import "functions", αλλά πριν @import "variables"και την υπόλοιπη στοίβα εισαγωγής. Το ίδιο ισχύει και για τους χάρτες Sass—πρέπει να παρακάμψετε τις προεπιλογές προτού τις χρησιμοποιήσετε. Οι παρακάτω χάρτες έχουν μεταφερθεί στο νέο _maps.scss:

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

Οι προσαρμοσμένες εκδόσεις Bootstrap CSS θα πρέπει τώρα να φαίνονται κάπως έτσι με ξεχωριστή εισαγωγή χαρτών.

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

Νέα βοηθητικά προγράμματα

Επεκταμένα font-weightβοηθητικά προγράμματα που θα συμπεριληφθούν .fw-semiboldγια ημιέντονες γραμματοσειρές.
Επεκτάθηκαν border-radiusβοηθητικά προγράμματα για να συμπεριλάβουν δύο νέα μεγέθη .rounded-4και .rounded-5, για περισσότερες επιλογές.

Πρόσθετες αλλαγές

Παρουσιάστηκε νέα $enable-container-classesεπιλογή. — Τώρα, όταν συμμετέχετε στην πειραματική διάταξη CSS Grid, οι .container-*κλάσεις θα εξακολουθούν να μεταγλωττίζονται, εκτός εάν αυτή η επιλογή έχει οριστεί σε false. Τα εμπορευματοκιβώτια διατηρούν επίσης τώρα τις αξίες υδρορροής τους.
Το στοιχείο Offcanvas έχει πλέον παραλλαγές που αποκρίνονται . Η αρχική .offcanvasκλάση παραμένει αμετάβλητη—αποκρύπτει περιεχόμενο σε όλες τις θύρες προβολής. Για να το κάνετε να ανταποκρίνεται, αλλάξτε αυτήν την .offcanvasκλάση σε οποιαδήποτε .offcanvas-{sm|md|lg|xl|xxl}κλάση.
Τα παχύτερα διαχωριστικά τραπεζιών είναι πλέον διαθέσιμα. — Καταργήσαμε το παχύτερο και δυσκολότερο στην παράκαμψη περίγραμμα μεταξύ ομάδων πινάκων και το μετακινήσαμε σε μια προαιρετική κλάση που μπορείτε να εφαρμόσετε, .table-group-divider. Δείτε τα έγγραφα του πίνακα για παράδειγμα.
Το Scrollspy έχει ξαναγραφτεί για να χρησιμοποιεί το Intersection Observer API , πράγμα που σημαίνει ότι δεν χρειάζεστε πλέον σχετικά γονικά περιτυλίγματα, καταργείoffsetρυθμίσεις παραμέτρων και πολλά άλλα. Αναζητήστε οι υλοποιήσεις Scrollspy να είναι πιο ακριβείς και συνεπείς στην επισήμανση πλοήγησής τους.
Τα popover και οι συμβουλές εργαλείων χρησιμοποιούν πλέον μεταβλητές CSS. Ορισμένες μεταβλητές CSS έχουν ενημερωθεί από τις αντίστοιχες Sass για να μειωθεί ο αριθμός των μεταβλητών. Ως αποτέλεσμα, τρεις μεταβλητές έχουν καταργηθεί σε αυτήν την έκδοση: $popover-arrow-color, $popover-arrow-outer-color, και $tooltip-arrow-color.
Προστέθηκαν νέοι .text-bg-{color}βοηθοί. Αντί να ορίσετε μεμονωμένα .text-*και .bg-*βοηθητικά προγράμματα, μπορείτε τώρα να χρησιμοποιήσετε τους .text-bg-*βοηθούς για να ορίσετε ένα background-colorμε αντίθεση στο προσκήνιο color.
Προστέθηκε .form-check-reverseτροποποιητής για να αναστρέψετε τη σειρά των ετικετών και των σχετικών πλαισίων ελέγχου/ραδιόφωνων.
Προστέθηκε υποστήριξη ριγέ στηλών σε πίνακες μέσω της νέας .table-striped-columnsκλάσης.

Για μια πλήρη λίστα αλλαγών, ανατρέξτε στο έργο v5.2.0 στο GitHub .

v5.1.0

Προστέθηκε πειραματική υποστήριξη για διάταξη πλέγματος CSS . — Αυτή είναι μια εργασία σε εξέλιξη και δεν είναι ακόμη έτοιμη για χρήση στην παραγωγή, αλλά μπορείτε να επιλέξετε τη νέα λειτουργία μέσω του Sass. Για να το ενεργοποιήσετε, απενεργοποιήστε το προεπιλεγμένο πλέγμα, ορίζοντας $enable-grid-classes: falseκαι ενεργοποιήστε το Πλέγμα CSS με ρύθμιση $enable-cssgrid: true.
Ενημερώθηκαν οι γραμμές πλοήγησης για υποστήριξη offcanvas. — Προσθέστε συρτάρια offcanvas σε οποιαδήποτε γραμμή πλοήγησης με τις αποκριτικές .navbar-expand-*κλάσεις και κάποια σήμανση offcanvas.
Προστέθηκε νέο στοιχείο κράτησης θέσης . — Το πιο πρόσφατο στοιχείο μας, ένας τρόπος για να παρέχουμε προσωρινούς αποκλεισμούς αντί για πραγματικό περιεχόμενο που θα σας βοηθήσουν να υποδείξετε ότι κάτι εξακολουθεί να φορτώνεται στον ιστότοπο ή την εφαρμογή σας.
Η προσθήκη σύμπτυξης υποστηρίζει πλέον την οριζόντια σύμπτυξη . — Προσθέστε .collapse-horizontalστο δικό σας .collapseγια σύμπτυξη το widthαντί του height. Αποφύγετε τη βαφή του προγράμματος περιήγησης ορίζοντας ένα min-heightή height.
Προστέθηκαν νέοι βοηθοί στοίβας και κάθετων κανόνων. — Εφαρμόστε γρήγορα πολλές ιδιότητες flexbox για να δημιουργήσετε γρήγορα προσαρμοσμένες διατάξεις με στοίβες . Επιλέξτε από οριζόντιες ( .hstack) και κάθετες ( .vstack) στοίβες. Προσθέστε κατακόρυφα διαχωριστικά παρόμοια με <hr>στοιχεία με τους νέους .vrβοηθούς .
Προστέθηκαν νέες καθολικές :rootμεταβλητές CSS. — Προστέθηκαν πολλές νέες μεταβλητές CSS στο :rootεπίπεδο για τον έλεγχο των <body>στυλ. Περισσότερα είναι υπό κατασκευή, συμπεριλαμβανομένων των βοηθητικών προγραμμάτων και των στοιχείων μας, αλλά προς το παρόν διαβάστε τις μεταβλητές CSS στην ενότητα Προσαρμογή .
Αναθεώρησε τα βοηθητικά προγράμματα χρώματος και φόντου για χρήση μεταβλητών CSS και προστέθηκαν νέα βοηθητικά προγράμματα αδιαφάνειας κειμένου και αδιαφάνειας φόντου . — .text-* και .bg-*τα βοηθητικά προγράμματα δημιουργούνται πλέον με μεταβλητές CSS και rgba()τιμές χρώματος, επιτρέποντάς σας να προσαρμόσετε εύκολα οποιοδήποτε βοηθητικό πρόγραμμα με νέα βοηθητικά προγράμματα αδιαφάνειας.
Προστέθηκαν νέα παραδείγματα αποσπασμάτων που βασίζονται για να δείξουμε πώς να προσαρμόσουμε τα στοιχεία μας. — Τραβήξτε έτοιμο για χρήση προσαρμοσμένων στοιχείων και άλλων κοινών μοτίβων σχεδίασης με τα νέα μας παραδείγματα Snippets . Περιλαμβάνει υποσέλιδα , αναπτυσσόμενα μενού , ομάδες λιστών και τρόπους λειτουργίας .
Καταργήθηκαν τα αχρησιμοποίητα στυλ τοποθέτησης από popover και συμβουλές εργαλείων , καθώς αυτά τα χειρίζεται αποκλειστικά ο Popper. $tooltip-marginέχει καταργηθεί και έχει οριστεί nullστη διαδικασία.

Θέλετε περισσότερες πληροφορίες; Διαβάστε την ανάρτηση ιστολογίου v5.1.0.

Γεια σου! Οι αλλαγές στην πρώτη μας σημαντική έκδοση του Bootstrap 5, v5.0.0, τεκμηριώνονται παρακάτω. Δεν αντικατοπτρίζουν τις πρόσθετες αλλαγές που εμφανίζονται παραπάνω.

Εξαρτήσεις

Έριξε το 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-control.custom-checkboxείναι τώρα .form-check.
- .custom-control.custom-custom-radioείναι τώρα .form-check.
- .custom-control.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.
Τα στοιχεία ελέγχου φορμών δεν χρησιμοποιούνται πλέον διορθωμένα heightόταν είναι δυνατόν, αντίθετα αναβάλλονται για min-heightνα βελτιώσουν την προσαρμογή και τη συμβατότητα με άλλα στοιχεία.
Τα εικονίδια επικύρωσης δεν εφαρμόζονται πλέον σε <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"σύνολο χαρακτηριστικών όταν η θέση του αναπτυσσόμενου μενού είναι στατική ή όταν το αναπτυσσόμενο μενού βρίσκεται στη γραμμή πλοήγησης. Αυτό προστίθεται από τη 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).
ΣπάσιμοΗ .activeκλάση δεν μπορεί πλέον να εφαρμοστεί στο .nav-items, πρέπει να εφαρμοστεί απευθείας στο .nav-links.

Εκτός καμβά

Προστέθηκε το νέο στοιχείο 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 για να δημιουργήσετε μια νέα παρουσία της προσθήκης:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigμπορεί να μεταβιβαστεί ως συνάρτηση που δέχεται την προεπιλεγμένη διαμόρφωση Popper του Bootstrap ως όρισμα, έτσι ώστε να μπορείτε να συγχωνεύσετε αυτήν την προεπιλεγμένη διαμόρφωση με τον τρόπο σας. Ισχύει για αναπτυσσόμενα, popover και συμβουλές εργαλείων.
Η προεπιλεγμένη τιμή για το fallbackPlacementsαλλάζει σε ['top', 'right', 'bottom', 'left']για καλύτερη τοποθέτηση των στοιχείων Popper. Ισχύει για αναπτυσσόμενα, popover και συμβουλές εργαλείων.
Καταργήθηκε η υπογράμμιση από δημόσιες στατικές μεθόδους όπως _getInstance()→ getInstance().