Μεταφορά στο 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-1
out.order-5
of the box. -
ΣπάσιμοΈριξε το
.media
εξάρτημα καθώς μπορεί εύκολα να αναπαραχθεί με βοηθητικά προγράμματα. Δείτε το #28265 και τη σελίδα flex utilities για παράδειγμα . -
Σπάσιμο
bootstrap-grid.css
τώρα ισχύει μόνοbox-sizing: border-box
για τη στήλη αντί για επαναφορά του καθολικού μεγέθους πλαισίου. Με αυτόν τον τρόπο, τα στυλ πλέγματος μας μπορούν να χρησιμοποιηθούν σε περισσότερα σημεία χωρίς παρεμβολές. -
$enable-grid-classes
δεν απενεργοποιεί πλέον τη δημιουργία κλάσεων κοντέινερ. Δείτε #29146. -
Ενημερώθηκε το
make-col
mixin ως προεπιλογή σε ίσες στήλες χωρίς καθορισμένο μέγεθος.
Περιεχόμενο, Επανεκκίνηση κ.λπ
-
Το RFS είναι πλέον ενεργοποιημένο από προεπιλογή. Οι επικεφαλίδες που χρησιμοποιούν το
font-size()
mixin θα προσαρμόσουν αυτόματα τηνfont-size
κλίμακα τους με τη θύρα προβολής. Αυτή η δυνατότητα ήταν προηγουμένως ενεργοποιημένη με την έκδοση 4. -
ΣπάσιμοΑναθεώρησε την τυπογραφία οθόνης μας για να αντικαταστήσει τις
$display-*
μεταβλητές μας και με έναν$display-font-sizes
χάρτη Sass. Επίσης, αφαιρέθηκαν οι μεμονωμένες$display-*-weight
μεταβλητές για ένα$display-font-weight
και προσαρμόστηκανfont-size
s. -
Προστέθηκαν δύο νέα
.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-item
s τυλιγμένα σε<li>
s.
Jumbotron
- ΣπάσιμοΈριξε το στοιχείο jumbotron καθώς μπορεί να αναπαραχθεί με βοηθητικά προγράμματα. Δείτε το νέο μας παράδειγμα Jumbotron για μια επίδειξη.
Ομάδα λίστας
- Προστέθηκε νέος
.list-group-numbered
τροποποιητής στις ομάδες λιστών.
Πλοήγηση και καρτέλες
- Προστέθηκαν νέες
null
μεταβλητές γιαfont-size
,font-weight
,color
και:hover
color
στην.nav-link
τάξη.
Navbars
- ΣπάσιμοΟι γραμμές πλοήγησης απαιτούν τώρα ένα κοντέινερ εντός (για να απλοποιηθούν δραστικά οι απαιτήσεις απόστασης και απαιτείται CSS).
Εκτός καμβά
- Προστέθηκε το νέο στοιχείο offcanvas .
Σελιδοποίηση
-
Οι σύνδεσμοι σελιδοποίησης έχουν πλέον δυνατότητα προσαρμογής
margin-left
που στρογγυλεύονται δυναμικά σε όλες τις γωνίες όταν χωρίζονται ο ένας από τον άλλο. -
Προστέθηκαν
transition
s στους συνδέσμους σελιδοποίησης.
Popovers
-
ΣπάσιμοΜετονομάστηκε
.arrow
σε.popover-arrow
στο προεπιλεγμένο πρότυπο popover. -
Μετονομάστηκε
whiteList
η επιλογή σεallowList
.
Κλωστές
-
Οι Spinner τιμούν τώρα
prefers-reduced-motion: reduce
επιβραδύνοντας τα κινούμενα σχέδια. Δείτε #31882 . -
Βελτιωμένη κατακόρυφη ευθυγράμμιση του κλωστή.
Τοστ
-
Τα τοστ μπορούν τώρα να τοποθετηθούν σε ένα
.toast-container
με τη βοήθεια βοηθητικών προγραμμάτων τοποθέτησης . -
Η προεπιλεγμένη διάρκεια τοστ άλλαξε σε 5 δευτερόλεπτα.
-
Αφαιρέθηκε
overflow: hidden
από τοστ και αντικαταστάθηκε με κατάλληλαborder-radius
s με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()
.
- Άλλαξε το αρχείο Sass από
-
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()
.