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

Το Bootstrap 4 είναι μια σημαντική επανεγγραφή ολόκληρου του έργου. Οι πιο αξιοσημείωτες αλλαγές συνοψίζονται παρακάτω, ακολουθούμενες από πιο συγκεκριμένες αλλαγές σε σχετικά στοιχεία.

Σταθερές αλλαγές

Μεταβαίνοντας από την Beta 3 στη σταθερή μας έκδοση v4.0, δεν υπάρχουν σημαντικές αλλαγές, αλλά υπάρχουν μερικές αξιοσημείωτες αλλαγές.

Εκτύπωση

• Διορθώθηκαν σπασμένα βοηθητικά προγράμματα εκτύπωσης. Προηγουμένως, η χρήση μιας .d-print-*κλάσης απροσδόκητα θα ακύρωνε οποιαδήποτε άλλη .d-*κλάση. Τώρα, ταιριάζουν με τα άλλα βοηθητικά προγράμματα προβολής και ισχύουν μόνο για αυτά τα μέσα ( @media print).

• Επέκτασε τα διαθέσιμα βοηθητικά προγράμματα εμφάνισης εκτύπωσης για να ταιριάζει με άλλα βοηθητικά προγράμματα. Η έκδοση beta 3 και παλαιότερη είχε μόνο block, inline-block, inlineκαι none. Προστέθηκε σταθερό v4 flex, inline-flex, table, table-rowκαι table-cell.

• Διορθώθηκε η απόδοση προεπισκόπησης εκτύπωσης σε προγράμματα περιήγησης με νέα στυλ εκτύπωσης που καθορίζουν @page size.

Αλλαγές beta 3

Ενώ η Beta 2 είδε το μεγαλύτερο μέρος των ριζικών αλλαγών μας κατά τη φάση beta, αλλά εξακολουθούμε να έχουμε μερικές που έπρεπε να αντιμετωπιστούν στην έκδοση Beta 3. Αυτές οι αλλαγές ισχύουν εάν κάνετε ενημέρωση σε Beta 3 από Beta 2 ή οποιαδήποτε παλαιότερη έκδοση του Bootstrap.

Διάφορα

• Καταργήθηκε η αχρησιμοποίητη $thumbnail-transitionμεταβλητή. Δεν μεταβαίναμε τίποτα, οπότε ήταν απλώς επιπλέον κώδικας.
• Το πακέτο npm δεν περιλαμβάνει πλέον άλλα αρχεία εκτός από τα αρχεία πηγής και απόστασης. εάν βασίζεστε σε αυτά και εκτελείτε τα σενάρια μας μέσω του node_modulesφακέλου, θα πρέπει να προσαρμόσετε τη ροή εργασίας σας.

Έντυπα

• Ξαναέγραψε τόσο τα προσαρμοσμένα όσο και τα προεπιλεγμένα πλαίσια ελέγχου και τα ραδιόφωνα. Τώρα, και τα δύο έχουν αντίστοιχη δομή HTML (εξωτερική <div>με αδερφό <input>και <label>) και τα ίδια στυλ διάταξης (στοίβαξη προεπιλογή, ενσωματωμένη με κλάση τροποποιητή). Αυτό μας επιτρέπει να διαμορφώνουμε το στυλ της ετικέτας με βάση την κατάσταση της εισαγωγής, απλοποιώντας την υποστήριξη για το disabledχαρακτηριστικό (που προηγουμένως απαιτούσε γονική κλάση) και υποστηρίζοντας καλύτερα την επικύρωση της φόρμας μας.

  Ως μέρος αυτού, αλλάξαμε το CSS για τη διαχείριση πολλαπλών background-images σε πλαίσια ελέγχου προσαρμοσμένης φόρμας και ραδιόφωνα. Προηγουμένως, το πλέον καταργημένο .custom-control-indicatorστοιχείο είχε το χρώμα φόντου, τη διαβάθμιση και το εικονίδιο SVG. Η προσαρμογή της κλίσης φόντου σήμαινε την αντικατάσταση όλων αυτών κάθε φορά που έπρεπε να αλλάξετε μόνο ένα. Τώρα, έχουμε .custom-control-label::beforeγια το γέμισμα και τη διαβάθμιση και .custom-control-label::afterχειρίζεται το εικονίδιο.

  Για να κάνετε έναν προσαρμοσμένο έλεγχο ενσωματωμένο, προσθέστε .custom-control-inline.

• Ενημερωμένος επιλογέας για ομάδες κουμπιών που βασίζονται σε είσοδο. Αντί [data-toggle="buttons"] { }για στυλ και συμπεριφορά, χρησιμοποιούμε το dataχαρακτηριστικό μόνο για συμπεριφορές JS και βασιζόμαστε σε μια νέα .btn-group-toggleκλάση για το στυλ.

• Καταργήθηκε .col-form-legendυπέρ ενός ελαφρώς βελτιωμένου .col-form-label. Με αυτόν τον τρόπο .col-form-label-smκαι .col-form-label-lgμπορεί να χρησιμοποιηθεί σε <legend>στοιχεία με ευκολία.

• Οι εισροές προσαρμοσμένων αρχείων έλαβαν μια αλλαγή στη $custom-file-textμεταβλητή Sass. Δεν είναι πλέον ένας ένθετος χάρτης Sass και τώρα τροφοδοτεί μόνο μία συμβολοσειρά — το Browseκουμπί καθώς αυτό είναι πλέον το μόνο ψευδοστοιχείο που δημιουργείται από το Sass μας. Το Choose fileκείμενο προέρχεται τώρα από το .custom-file-label.

Ομάδες εισαγωγής

• Τα πρόσθετα ομάδας εισόδου είναι πλέον συγκεκριμένα για την τοποθέτησή τους σε σχέση με μια είσοδο. Έχουμε πέσει .input-group-addonκαι .input-group-btnγια δύο νέες τάξεις, .input-group-prependκαι .input-group-append. Πρέπει να χρησιμοποιήσετε ρητά ένα προσάρτημα ή ένα προσάρτημα τώρα, απλοποιώντας μεγάλο μέρος του CSS μας. Μέσα σε ένα προσάρτημα ή ένα προσάρτημα, τοποθετήστε τα κουμπιά σας όπως θα υπήρχαν οπουδήποτε αλλού, αλλά αναδιπλώστε το κείμενο σε .input-group-text.

• Τα στυλ επικύρωσης υποστηρίζονται πλέον, όπως και πολλαπλές εισόδους (αν και μπορείτε να επικυρώσετε μόνο μία είσοδο ανά ομάδα).

• Οι κατηγορίες μεγεθών πρέπει να είναι στο γονικό .input-groupκαι όχι στα μεμονωμένα στοιχεία της φόρμας.

Αλλαγές beta 2

Κατά τη διάρκεια της έκδοσης beta, στοχεύουμε να μην έχουμε αλλαγές. Ωστόσο, τα πράγματα δεν πάνε πάντα όπως τα σχεδίαζε. Ακολουθούν οι σημαντικές αλλαγές που πρέπει να έχετε κατά νου όταν μετακινείστε από την Beta 1 στην Beta 2.

Σπάσιμο

• Καταργήθηκε $badge-colorη μεταβλητή και η χρήση της στο .badge. Χρησιμοποιούμε μια συνάρτηση αντίθεσης χρώματος για να επιλέξουμε ένα colorμε βάση το background-color, οπότε η μεταβλητή δεν είναι απαραίτητη.
• Μετονομάστηκε grayscale()η συνάρτηση σε για gray()να αποφευχθεί η διακοπή της διένεξης με το εγγενές grayscaleφίλτρο CSS.
• Μετονομάστηκε .table-inverse, .thead-inverse, και .thead-defaultσε .*-darkκαι .*-light, ταιριάζουν με τους χρωματικούς συνδυασμούς που χρησιμοποιούμε αλλού.
• Οι αποκριτικοί πίνακες δημιουργούν τώρα κλάσεις για κάθε σημείο διακοπής πλέγματος. Αυτό ξεφεύγει από την Beta 1, καθώς αυτό .table-responsiveπου χρησιμοποιείτε μοιάζει περισσότερο με .table-responsive-md. Μπορείτε τώρα να χρησιμοποιήσετε .table-responsiveή .table-responsive-{sm,md,lg,xl}όπως απαιτείται.
• Έπεσε η υποστήριξη Bower καθώς ο διαχειριστής πακέτων έχει καταργηθεί για εναλλακτικές λύσεις (π.χ. Yarn ή npm). Δείτε bower/bower#2298 για λεπτομέρειες.
• Το Bootstrap εξακολουθεί να απαιτεί jQuery 1.9.1 ή νεότερη έκδοση, αλλά σας συνιστούμε να χρησιμοποιήσετε την έκδοση 3.x, καθώς τα προγράμματα περιήγησης που υποστηρίζονται από το v3.x είναι αυτά που υποστηρίζει το Bootstrap και το v3.x έχει ορισμένες διορθώσεις ασφαλείας.
• Καταργήθηκε η αχρησιμοποίητη .form-control-labelκλάση. Εάν όντως χρησιμοποιήσατε αυτήν την κλάση, ήταν αντίγραφο της .col-form-labelκλάσης που κεντράρει κάθετα το a <label>με τη συσχετισμένη είσοδο σε διατάξεις οριζόντιας μορφής.
• Άλλαξε το color-yiqαπό ένα mixin που περιελάμβανε την colorιδιότητα σε μια συνάρτηση που επιστρέφει μια τιμή, επιτρέποντάς σας να τη χρησιμοποιήσετε για οποιαδήποτε ιδιότητα CSS. Για παράδειγμα, αντί για color-yiq(#000), θα γράφατε color: color-yiq(#000);.

Καλύτερες στιγμές

• Εισήγαγε νέα pointer-eventsχρήση στα modals. Το εξωτερικό .modal-dialogπερνά μέσα από συμβάντα με pointer-events: noneπροσαρμοσμένο χειρισμό κλικ (καθιστώντας δυνατή την απλή ακρόαση του .modal-backdropγια τυχόν κλικ) και, στη συνέχεια, το αντισταθμίζει για το πραγματικό .modal-contentμε pointer-events: auto.

Περίληψη

Εδώ είναι τα μεγάλα στοιχεία εισιτηρίων που θα θέλετε να γνωρίζετε όταν μετακινείστε από το v3 στο v4.

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

• Έπεσε η υποστήριξη IE8, IE9 και iOS 6. Το v4 είναι πλέον μόνο IE10+ και iOS 7+. Για ιστότοπους που χρειάζονται ένα από αυτά, χρησιμοποιήστε το v3.
• Προστέθηκε επίσημη υποστήριξη για Android v5.0 Lollipop's Browser και WebView. Οι προηγούμενες εκδόσεις του προγράμματος περιήγησης Android και του WebView εξακολουθούν να υποστηρίζονται μόνο ανεπίσημα.

Παγκόσμιες αλλαγές

• Το Flexbox είναι ενεργοποιημένο από προεπιλογή. Σε γενικές γραμμές, αυτό σημαίνει μια απομάκρυνση από τους πλωτήρες και περισσότερο στα εξαρτήματά μας.
• Έγινε εναλλαγή από Less σε Sass για τα αρχεία CSS προέλευσης.
• Έγινε εναλλαγή από pxσε remως κύρια μονάδα CSS, αν και τα pixel εξακολουθούν να χρησιμοποιούνται για ερωτήματα πολυμέσων και συμπεριφορά πλέγματος, καθώς οι θύρες προβολής της συσκευής δεν επηρεάζονται από το μέγεθος του τύπου.
• Το παγκόσμιο μέγεθος γραμματοσειράς αυξήθηκε από 14pxσε 16px.
• Αναβάθμισε τα επίπεδα πλέγματος για να προσθέσει μια πέμπτη επιλογή (απευθυνόμενη σε μικρότερες συσκευές από 576pxκαι κάτω) και αφαίρεσε το -xsinfix από αυτές τις κλάσεις. Παράδειγμα: .col-6.col-sm-4.col-md-3.
• Αντικαταστάθηκε το ξεχωριστό προαιρετικό θέμα με διαμορφώσιμες επιλογές μέσω μεταβλητών SCSS (π.χ., $enable-gradients: true).
• Η κατασκευή του συστήματος αναθεωρήθηκε για να χρησιμοποιήσει μια σειρά σεναρίων npm αντί για Grunt. Δείτε package.jsonγια όλα τα σενάρια ή το έργο μας readme για τις ανάγκες τοπικής ανάπτυξης.
• Η μη αποκρινόμενη χρήση του Bootstrap δεν υποστηρίζεται πλέον.
• Έριξε το διαδικτυακό Customizer υπέρ της πιο εκτεταμένης τεκμηρίωσης εγκατάστασης και προσαρμοσμένων εκδόσεων.
• Προστέθηκαν δεκάδες νέες κατηγορίες βοηθητικών προγραμμάτων για κοινά ζεύγη ιδιοτήτων-τιμών CSS και συντομεύσεις απόστασης περιθωρίου/επέμβασης.

Σύστημα πλέγματος

• Μεταφέρθηκε στο flexbox.
  • Προστέθηκε υποστήριξη για το flexbox στις μίξεις πλέγματος και στις προκαθορισμένες κλάσεις.
  • Ως μέρος του flexbox, περιλαμβάνεται υποστήριξη για κατηγορίες κάθετης και οριζόντιας ευθυγράμμισης.
• Ενημερώθηκαν τα ονόματα κλάσεων πλέγματος και ένα νέο επίπεδο πλέγματος.
  • Προστέθηκε μια νέα smβαθμίδα πλέγματος παρακάτω 768pxγια πιο λεπτομερή έλεγχο. Τώρα έχουμε xs, sm, md, lgκαι xl. Αυτό σημαίνει επίσης ότι κάθε επίπεδο έχει ανέβει ένα επίπεδο (άρα .col-md-6στο v3 είναι τώρα .col-lg-6στο v4).
  • xsΟι κλάσεις πλέγματος έχουν τροποποιηθεί ώστε να μην απαιτείται από το infix να αντιπροσωπεύει με μεγαλύτερη ακρίβεια ότι αρχίζουν να εφαρμόζουν στυλ σε min-width: 0και όχι μια καθορισμένη τιμή pixel. Αντί για .col-xs-6, είναι τώρα .col-6. Όλα τα άλλα επίπεδα πλέγματος απαιτούν το προσάρτημα (π.χ., sm).
• Ενημερωμένα μεγέθη πλέγματος, μίξεις και μεταβλητές.
  • Οι υδρορροές πλέγματος έχουν πλέον έναν χάρτη Sass, ώστε να μπορείτε να καθορίσετε συγκεκριμένα πλάτη υδρορροών σε κάθε σημείο διακοπής.
  • Ενημερώθηκαν οι μίξεις πλέγματος για τη χρήση ενός make-col-readyπροπαρασκευαστικού μείγματος και το α make-colγια να ορίσετε το μέγεθος flexκαι max-widthγια μεμονωμένα μεγέθη στηλών.
  • Άλλαξε τα σημεία διακοπής ερωτημάτων μέσων συστήματος πλέγματος και τα πλάτη κοντέινερ για να ληφθεί υπόψη η νέα βαθμίδα πλέγματος και να διασφαλιστεί ότι οι στήλες διαιρούνται ομοιόμορφα με 12το μέγιστο πλάτος τους.
  • Τα σημεία διακοπής πλέγματος και τα πλάτη κοντέινερ αντιμετωπίζονται πλέον μέσω χαρτών Sass ( $grid-breakpointsκαι $container-max-widths) αντί για μια χούφτα ξεχωριστών μεταβλητών. Αυτές αντικαθιστούν @screen-*πλήρως τις μεταβλητές και σας επιτρέπουν να προσαρμόσετε πλήρως τα επίπεδα πλέγματος.
  • Τα ερωτήματα για τα μέσα έχουν επίσης αλλάξει. Αντί να επαναλαμβάνουμε τις δηλώσεις ερωτημάτων μέσων με την ίδια τιμή κάθε φορά, έχουμε τώρα @include media-breakpoint-up/down/only. Τώρα, αντί να γράφετε @media (min-width: @screen-sm-min) { ... }, μπορείτε να γράψετε @include media-breakpoint-up(sm) { ... }.

Συστατικά

• Πεσμένα πάνελ, μικρογραφίες και πηγάδια για ένα νέο ολοκληρωμένο στοιχείο, κάρτες .
• Έριξε τη γραμματοσειρά του εικονιδίου Glyphicons. Εάν χρειάζεστε εικονίδια, ορισμένες επιλογές είναι:
  • την ανοδική έκδοση του Glyphicons
  • Octicons
  • Γραμματοσειρά φοβερή
  • Δείτε τη σελίδα Επέκταση για μια λίστα εναλλακτικών επιλογών. Έχετε επιπλέον προτάσεις; Ανοίξτε ένα θέμα ή PR.
• Έριξε το πρόσθετο Affix jQuery.
  • Συνιστούμε να το χρησιμοποιήσετε position: sticky. Δείτε την καταχώριση HTML5 Παρακαλώ για λεπτομέρειες και συγκεκριμένες προτάσεις πολυπλήρωσης. Μια πρόταση είναι να χρησιμοποιήσετε έναν @supportsκανόνα για την εφαρμογή του (π.χ., @supports (position: sticky) { ... })/
  • Εάν χρησιμοποιούσατε το Affix για να εφαρμόσετε πρόσθετα, μη positionστυλ, τα πολυγεμίσματα ενδέχεται να μην υποστηρίζουν την περίπτωση χρήσης σας. Μια επιλογή για τέτοιες χρήσεις είναι η βιβλιοθήκη ScrollPos-Styler τρίτου κατασκευαστή .
• Έριξε το στοιχείο τηλεειδοποίησης καθώς ήταν ουσιαστικά ελαφρώς προσαρμοσμένα κουμπιά.
• Ανακατασκευάστηκε σχεδόν όλα τα στοιχεία για να χρησιμοποιήσει περισσότερους μη ένθετους επιλογείς κλάσεων αντί για υπερβολικά συγκεκριμένους παιδικούς επιλογείς.

Κατά συστατικό

Αυτή η λίστα επισημαίνει τις βασικές αλλαγές ανά στοιχείο μεταξύ v3.xx και v4.0.0.

Επανεκκίνηση

Νέο στο Bootstrap 4 είναι το Reboot , ένα νέο φύλλο στυλ που βασίζεται στο Normalize με τα δικά μας στυλ επαναφοράς με κάποια γνώμη. Οι επιλογείς που εμφανίζονται σε αυτό το αρχείο χρησιμοποιούν μόνο στοιχεία—δεν υπάρχουν κλάσεις εδώ. Αυτό απομονώνει τα στυλ επαναφοράς από τα στυλ των στοιχείων μας για μια πιο αρθρωτή προσέγγιση. Μερικές από τις πιο σημαντικές επαναφορές που περιλαμβάνει είναι η box-sizing: border-boxαλλαγή, η μετάβαση από emσε remμονάδες σε πολλά στοιχεία, τα στυλ συνδέσμων και πολλές επαναφορές στοιχείων φόρμας.

Τυπογραφία

• Μετακινήθηκαν όλα τα .text-βοηθητικά προγράμματα στο _utilities.scssαρχείο.
• Έπεσε .page-headerκαθώς τα στυλ του μπορούν να εφαρμοστούν μέσω βοηθητικών προγραμμάτων.
• .dl-horizontalέχει πέσει. Αντ 'αυτού, χρησιμοποιήστε .rowκαι <dl>χρησιμοποιήστε κατηγορίες στηλών πλέγματος (ή μίξεις) στο <dt>και <dd>παιδιά.
• Επανασχεδιάστηκαν μπλοκ εισαγωγικά, μεταφέροντας τα στυλ τους από το <blockquote>στοιχείο σε μια ενιαία κλάση, .blockquote. Έριξε τον .blockquote-reverseτροποποιητή για βοηθητικά προγράμματα κειμένου.
• .list-inlineτώρα απαιτεί τα στοιχεία της λίστας των παιδιών του να έχουν .list-inline-itemεφαρμοστεί σε αυτά η νέα τάξη.

εικόνες

• Μετονομάστηκε .img-responsiveσε .img-fluid.
• Μετονομάστηκε .img-roundedσε.rounded
• Μετονομάστηκε .img-circleσε.rounded-circle

Πίνακες

• Σχεδόν όλες οι εμφανίσεις του >επιλογέα έχουν αφαιρεθεί, πράγμα που σημαίνει ότι οι ένθετοι πίνακες θα κληρονομούν πλέον αυτόματα στυλ από τους γονείς τους. Αυτό απλοποιεί σημαντικά τους επιλογείς και τις πιθανές προσαρμογές μας.
• Μετονομάστηκε .table-condensedσε .table-smγια συνέπεια.
• Προστέθηκε μια νέα .table-inverseεπιλογή.
• Προστέθηκαν τροποποιητές κεφαλίδας πίνακα: .thead-defaultκαι .thead-inverse.
• Μετονομάστηκε οι τάξεις συμφραζομένων για να έχουν .table--πρόθεμα. Ως εκ τούτου .active, .success, .warning, .dangerκαι .infoσε .table-active, .table-success, .table-warning, .table-dangerκαι .table-info.

Έντυπα

• Το στοιχείο που μετακινήθηκε επαναφέρει στο _reboot.scssαρχείο.
• Μετονομάστηκε .control-labelσε .col-form-label.
• Μετονομάστηκε .input-lgκαι .input-smσε .form-control-lgκαι .form-control-sm, αντίστοιχα.
• Εγκατέλειψε .form-group-*τα μαθήματα για λόγους απλότητας. Χρησιμοποιήστε .form-control-*τάξεις τώρα.
• Έριξε .help-blockκαι αντικαταστάθηκε με .form-textκείμενο βοήθειας σε επίπεδο μπλοκ. Για ενσωματωμένο κείμενο βοήθειας και άλλες ευέλικτες επιλογές, χρησιμοποιήστε κατηγορίες βοηθητικών προγραμμάτων όπως .text-muted.
• Έπεσε .radio-inlineκαι .checkbox-inline.
• Ενοποιημένα .checkboxκαι .radioμέσα .form-checkκαι στις διάφορες .form-check-*τάξεις.
• Οριζόντιες φόρμες αναθεωρημένες:
  • Έριξε την .form-horizontalαπαίτηση τάξης.
  • .form-groupδεν εφαρμόζει πλέον στυλ από το .rowvia mixin, επομένως .rowαπαιτείται πλέον για οριζόντιες διατάξεις πλέγματος (π.χ., <div class="form-group row">).
  • Προστέθηκε νέα .col-form-labelκατηγορία σε κάθετα κεντραρισμένες ετικέτες με .form-controls.
  • Προστέθηκε νέο .form-rowγια συμπαγείς διατάξεις φόρμας με τις κατηγορίες πλέγματος (ανταλλάξτε το .rowμε ένα .form-rowκαι πηγαίνετε).
• Προστέθηκε υποστήριξη προσαρμοσμένων φορμών (για πλαίσια ελέγχου, ραδιόφωνα, επιλογές και εισόδους αρχείων).
• Αντικαταστάθηκαν .has-error, .has-warning, και .has-successκλάσεις με επικύρωση φόρμας HTML5 μέσω CSS :invalidκαι :validψευδοκλάσεων.
• Μετονομάστηκε .form-control-staticσε .form-control-plaintext.

Κουμπιά

• Μετονομάστηκε .btn-defaultσε .btn-secondary.
• Έριξε την .btn-xsκατηγορία εντελώς καθώς .btn-smείναι αναλογικά πολύ μικρότερη από αυτή του v3.
• Η λειτουργία κουμπιού κατάστασης της button.jsπροσθήκης jQuery έχει απορριφθεί. Αυτό περιλαμβάνει τις μεθόδους $().button(string)και . $().button('reset')Σας συμβουλεύουμε να χρησιμοποιήσετε ένα μικρό κομμάτι προσαρμοσμένης JavaScript, η οποία θα έχει το πλεονέκτημα να συμπεριφέρεται ακριβώς όπως θέλετε.
  • Σημειώστε ότι οι άλλες δυνατότητες της προσθήκης (πλαίσια ελέγχου κουμπιών, ραδιόφωνα κουμπιών, κουμπιά απλής εναλλαγής) έχουν διατηρηθεί στο v4.
• Αλλαγή κουμπιών [disabled]σε :disabledόπως υποστηρίζει το IE9+ :disabled. Ωστόσο fieldset[disabled], εξακολουθεί να είναι απαραίτητο επειδή τα εγγενή απενεργοποιημένα σύνολα πεδίων εξακολουθούν να είναι buggy στον IE11 .

Ομάδα κουμπιών

• Επανέγραψε το στοιχείο με το flexbox.
• Αφαιρέθηκε .btn-group-justified. Ως αντικατάσταση μπορείτε να χρησιμοποιήσετε <div class="btn-group d-flex" role="group"></div>ως περιτύλιγμα γύρω από στοιχεία με .w-100.
• Έριξε την .btn-group-xsτάξη εντελώς δεδομένης της κατάργησης του .btn-xs.
• Καταργήθηκε το ρητό διάστημα μεταξύ των ομάδων κουμπιών στις γραμμές εργαλείων κουμπιών. χρησιμοποιήστε τα βοηθητικά προγράμματα περιθωρίου τώρα.
• Βελτιωμένη τεκμηρίωση για χρήση με άλλα εξαρτήματα.

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

• Έγινε εναλλαγή από γονικούς επιλογείς σε μοναδικές κλάσεις για όλα τα στοιχεία, τους τροποποιητές κ.λπ.
• Απλοποιημένα στυλ αναπτυσσόμενου μενού για να μην αποστέλλονται πλέον με βέλη προς τα πάνω ή προς τα κάτω που είναι συνδεδεμένα στο αναπτυσσόμενο μενού.
• Τα αναπτυσσόμενα μενού μπορούν να δημιουργηθούν με <div>s ή <ul>s τώρα.
• Αναδημιουργημένα στυλ αναπτυσσόμενου μενού και σήμανση για την παροχή εύκολης, ενσωματωμένης υποστήριξης <a>και <button>βάσει αναπτυσσόμενων στοιχείων.
• Μετονομάστηκε .dividerσε .dropdown-divider.
• Τα αναπτυσσόμενα στοιχεία απαιτούν τώρα .dropdown-item.
• Οι αναπτυσσόμενες εναλλαγές δεν απαιτούν πλέον ρητό <span class="caret"></span>. αυτό παρέχεται πλέον αυτόματα μέσω των CSS ::afterστο .dropdown-toggle.

Σύστημα πλέγματος

• Προστέθηκε ένα νέο 576pxσημείο διακοπής πλέγματος ως sm, που σημαίνει ότι υπάρχουν πλέον πέντε συνολικά επίπεδα ( xs, sm, md, lg, και xl).
• Μετονόμασε τις αποκριτικές κατηγορίες τροποποιητών πλέγματος από .col-{breakpoint}-{modifier}-{size}σε .{modifier}-{breakpoint}-{size}για απλούστερες κατηγορίες πλέγματος.
• Έριξε τις κατηγορίες τροποποιητών push and pull για τις νέες κλάσεις που τροφοδοτούνται από flexbox order. Για παράδειγμα, αντί για .col-8.push-4και .col-4.pull-8, θα χρησιμοποιούσατε .col-8.order-2και .col-4.order-1.
• Προστέθηκαν κατηγορίες χρησιμότητας flexbox για σύστημα πλέγματος και εξαρτήματα.

Λίστα ομάδων

• Επανέγραψε το στοιχείο με το flexbox.
• Αντικαταστάθηκε a.list-group-itemμε μια ρητή κλάση, .list-group-item-action, για εκδόσεις συνδέσμου στυλ και κουμπιών των στοιχείων της ομάδας λίστας.
• Προστέθηκε .list-group-flushτάξη για χρήση με κάρτες.

Τροπικός

• Επανέγραψε το στοιχείο με το flexbox.
• Δεδομένης της μετάβασης στο flexbox, η στοίχιση των εικονιδίων απόρριψης στην κεφαλίδα είναι πιθανό να έχει σπάσει καθώς δεν χρησιμοποιούμε πλέον floats. Το Floated περιεχόμενο έρχεται πρώτο, αλλά με το flexbox αυτό δεν ισχύει πλέον. Ενημερώστε τα εικονίδια απόρριψης για να έρθουν μετά τους τίτλους που θα διορθωθούν.
• Η remoteεπιλογή (η οποία θα μπορούσε να χρησιμοποιηθεί για αυτόματη φόρτωση και εισαγωγή εξωτερικού περιεχομένου σε ένα modal) και το αντίστοιχο loaded.bs.modalσυμβάν καταργήθηκαν. Συνιστούμε να χρησιμοποιήσετε πρότυπο από την πλευρά του πελάτη ή ένα πλαίσιο σύνδεσης δεδομένων ή να καλέσετε μόνοι σας το jQuery.load .

Navs

• Επανέγραψε το στοιχείο με το flexbox.
• Έριξε σχεδόν όλους τους >επιλογείς για απλούστερο στυλ μέσω μη ένθετων κλάσεων.
• Αντί για ειδικούς επιλογείς HTML όπως .nav > li > a, χρησιμοποιούμε ξεχωριστές κλάσεις για .navs, .nav-items και .nav-links. Αυτό κάνει το HTML σας πιο ευέλικτο, ενώ παράλληλα προσφέρει αυξημένη επεκτασιμότητα.

Navbar

Η γραμμή πλοήγησης έχει ξαναγραφτεί εξ ολοκλήρου σε flexbox με βελτιωμένη υποστήριξη για ευθυγράμμιση, ανταπόκριση και προσαρμογή.

• Οι αποκριτικές συμπεριφορές της γραμμής πλοήγησης εφαρμόζονται τώρα στην .navbarκλάση μέσω του απαιτούμενου .navbar-expand-{breakpoint} σημείου όπου επιλέγετε πού να συμπτύσσεται η γραμμή πλοήγησης. Προηγουμένως, αυτή ήταν μια τροποποίηση λιγότερο μεταβλητής και απαιτούσε εκ νέου μεταγλώττιση.
• .navbar-defaultείναι τώρα .navbar-light, αν και .navbar-darkπαραμένει το ίδιο. Ένα από αυτά απαιτείται σε κάθε γραμμή πλοήγησης. Ωστόσο, αυτές οι κλάσεις δεν ορίζουν πλέον background-colors? αντίθετα επηρεάζουν ουσιαστικά μόνο color.
• Οι ράβδοι πλοήγησης απαιτούν τώρα κάποια δήλωση φόντου. Επιλέξτε από τα βοηθητικά προγράμματα παρασκηνίου ( .bg-*) ή ορίστε τα δικά σας με τις παραπάνω κατηγορίες φωτός/αντίστροφης για τρελή προσαρμογή .
• Δεδομένων των στυλ flexbox, οι γραμμές πλοήγησης μπορούν πλέον να χρησιμοποιούν βοηθητικά προγράμματα flexbox για εύκολες επιλογές ευθυγράμμισης.
• .navbar-toggleείναι τώρα .navbar-togglerκαι έχει διαφορετικά στυλ και εσωτερική σήμανση (όχι περισσότερα τρία <span>δευτ.).
• Έριξε .navbar-formεντελώς την τάξη. Δεν είναι πλέον απαραίτητο. Αντίθετα, απλώς χρησιμοποιήστε .form-inlineκαι εφαρμόστε βοηθητικά προγράμματα περιθωρίου όπως είναι απαραίτητο.
• Οι γραμμές πλοήγησης δεν περιλαμβάνουν πλέον margin-bottomή border-radiusαπό προεπιλογή. Χρησιμοποιήστε βοηθητικά προγράμματα όπως απαιτείται.
• Όλα τα παραδείγματα που διαθέτουν γραμμές πλοήγησης έχουν ενημερωθεί για να περιλαμβάνουν νέα σήμανση.

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

• Επανέγραψε το στοιχείο με το flexbox.
• Απαιτούνται πλέον ρητές κλάσεις ( .page-item, ) στους απογόνους του s.page-link.pagination
• Έριξε .pagerεντελώς το στοιχείο καθώς ήταν κάτι περισσότερο από προσαρμοσμένα κουμπιά περιγράμματος.

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

• Μια ρητή κλάση, .breadcrumb-item, απαιτείται τώρα στους απογόνους του .breadcrumbs

Ετικέτες και σήματα

• Ενοποιημένα .labelκαι .badgeγια την αποσαφήνιση από το <label>στοιχείο και την απλοποίηση των σχετικών στοιχείων.
• Προστέθηκε .badge-pillως τροποποιητής για στρογγυλεμένη εμφάνιση "χάπι".
• Τα σήματα δεν μετακινούνται πλέον αυτόματα σε ομάδες λιστών και άλλα στοιχεία. Τώρα απαιτούνται μαθήματα βοηθητικών προγραμμάτων για αυτό.
• .badge-defaultέχει απορριφθεί και .badge-secondaryπροστεθεί για να ταιριάζει με τις κατηγορίες τροποποιητών στοιχείων που χρησιμοποιούνται αλλού.

Πίνακες, μικρογραφίες και πηγάδια

Καταργήθηκε εντελώς για το νέο στοιχείο κάρτας.

Πάνελ

• .panelστο .card, τώρα κατασκευασμένο με flexbox.
• .panel-defaultαφαιρέθηκε και δεν αντικαταστάθηκε.
• .panel-groupαφαιρέθηκε και δεν αντικαταστάθηκε. .card-groupδεν είναι αντικατάσταση, είναι διαφορετικό.
• .panel-headingπρος την.card-header
• .panel-titleνα .card-title. Ανάλογα με την επιθυμητή εμφάνιση, μπορεί επίσης να θέλετε να χρησιμοποιήσετε στοιχεία ή κλάσεις επικεφαλίδων (π.χ. <h3>, .h3) ή έντονα στοιχεία ή κλάσεις (π.χ. <strong>, <b>, .font-weight-bold). Σημειώστε ότι .card-title, ενώ το όνομα φέρει παρόμοια, παράγει μια διαφορετική εμφάνιση από το .panel-title.
• .panel-bodyπρος την.card-body
• .panel-footerπρος την.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, και .panel-dangerέχουν απορριφθεί για .bg-, .text-και .borderβοηθητικά προγράμματα που δημιουργήθηκαν από τον $theme-colorsχάρτη μας Sass.

Πρόοδος

• .progress-bar-*Αντικαταστάθηκαν οι τάξεις συμφραζομένων με .bg-*βοηθητικά προγράμματα. Για παράδειγμα, class="progress-bar progress-bar-danger"γίνεται class="progress-bar bg-danger".
• Αντικαταστάθηκε .activeγια κινούμενες γραμμές προόδου με .progress-bar-animated.

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

• Αναθεώρησε ολόκληρο το στοιχείο για να απλοποιήσει τη σχεδίαση και το στυλ. Έχουμε λιγότερα στυλ για παράκαμψη, νέες ενδείξεις και νέα εικονίδια.
• Όλα τα CSS έχουν αφαιρεθεί και μετονομαστεί, διασφαλίζοντας ότι κάθε κλάση έχει το πρόθεμα .carousel-.
  • Για στοιχεία καρουζέλ, .next, .prev, .left, και .rightείναι τώρα .carousel-item-next, .carousel-item-prev, .carousel-item-leftκαι .carousel-item-right.
  • .itemείναι επίσης τώρα .carousel-item.
  • Για προηγούμενα/επόμενα στοιχεία ελέγχου, .carousel-control.rightκαι .carousel-control.leftείναι τώρα .carousel-control-nextκαι .carousel-control-prev, που σημαίνει ότι δεν απαιτούν πλέον συγκεκριμένη βασική κλάση.
• Καταργήθηκε όλο το στυλ που αποκρίνεται, αναβάλλοντας τα βοηθητικά προγράμματα (π.χ. εμφάνιση λεζάντες σε ορισμένες θύρες προβολής) και προσαρμοσμένα στυλ, όπως απαιτείται.
• Καταργήθηκαν οι αντικαταστάσεις εικόνας για εικόνες σε στοιχεία καρουζέλ, με αναβολή σε βοηθητικά προγράμματα.
• Τροποποιήσαμε το παράδειγμα Carousel για να συμπεριλάβουμε τη νέα σήμανση και τα νέα στυλ.

Πίνακες

• Καταργήθηκε η υποστήριξη για ένθετα τραπέζια με στυλ. Όλα τα στυλ πίνακα κληρονομούνται πλέον στο v4 για απλούστερους επιλογείς.
• Προστέθηκε παραλλαγή αντίστροφου πίνακα.

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

• Εμφάνιση, κρυφή και άλλα:
  • Έκανε τα βοηθητικά προγράμματα προβολής να ανταποκρίνονται (π.χ. .d-noneκαι d-{sm,md,lg,xl}-none).
  • Έριξε το μεγαλύτερο μέρος των .hidden-*βοηθητικών προγραμμάτων για νέα βοηθητικά προγράμματα προβολής . Για παράδειγμα, αντί για .hidden-sm-up, χρησιμοποιήστε .d-sm-none. Μετονόμασε τα .hidden-printβοηθητικά προγράμματα για να χρησιμοποιήσει το σχήμα ονοματοδοσίας του βοηθητικού προγράμματος προβολής. Περισσότερες πληροφορίες στην ενότητα Responsive utilities αυτής της σελίδας.
  • Προστέθηκαν .float-{sm,md,lg,xl}-{left,right,none}κλάσεις για ανταποκρινόμενες floats και καταργήθηκαν .pull-leftκαι .pull-rightεπειδή είναι περιττές σε .float-leftκαι .float-right.
• Τύπος:
  • Προστέθηκαν αποκριτικές παραλλαγές στις τάξεις μας στοίχισης κειμένου .text-{sm,md,lg,xl}-{left,center,right}.
• Ευθυγράμμιση και απόσταση:
  • Προστέθηκαν νέα βοηθητικά προγράμματα περιθωρίου και padding για όλες τις πλευρές, καθώς και κάθετες και οριζόντιες στενογραφήσεις.
  • Προστέθηκε φορτίο σκάφους με βοηθητικά προγράμματα flexbox .
  • Έφυγε .center-blockγια τη νέα .mx-autoτάξη.
• Το Clearfix ενημερώθηκε για να σταματήσει η υποστήριξη για παλαιότερες εκδόσεις του προγράμματος περιήγησης.

Μίξεις προθέματος προμηθευτή

Τα mixin προθέματα προμηθευτή του Bootstrap 3 , τα οποία καταργήθηκαν στην έκδοση 3.2.0, έχουν καταργηθεί στο Bootstrap 4. Εφόσον χρησιμοποιούμε το Autoprefixer , δεν είναι πλέον απαραίτητα.

Καταργήθηκαν οι ακόλουθες μίξεις : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property,transition-timing-functiontransition-transformtranslatetranslate3duser-select

Τεκμηρίωση

Η τεκμηρίωσή μας έλαβε επίσης αναβάθμιση σε γενικές γραμμές. Εδώ είναι το χαμηλό:

• Εξακολουθούμε να χρησιμοποιούμε το Jekyll, αλλά έχουμε πρόσθετα στη μίξη:
  • bugify.rbχρησιμοποιείται για την αποτελεσματική λίστα των εγγραφών στη σελίδα σφαλμάτων του προγράμματος περιήγησής μας .
  • example.rbείναι μια προσαρμοσμένη διχάλα της προεπιλεγμένης highlight.rbπροσθήκης, που επιτρέπει τον ευκολότερο χειρισμό παραδείγματος κώδικα.
  • callout.rbείναι ένα παρόμοιο προσαρμοσμένο πιρούνι αυτού, αλλά έχει σχεδιαστεί για τις ειδικές επεξηγήσεις εγγράφων μας.
  • Το jekyll-toc χρησιμοποιείται για τη δημιουργία του πίνακα περιεχομένων μας.
• Όλο το περιεχόμενο των εγγράφων έχει ξαναγραφεί σε Markdown (αντί για HTML) για ευκολότερη επεξεργασία.
• Οι σελίδες έχουν αναδιοργανωθεί για απλούστερο περιεχόμενο και πιο προσιτή ιεραρχία.
• Μεταφερθήκαμε από το κανονικό CSS στο SCSS για να εκμεταλλευτούμε πλήρως τις μεταβλητές, τα mixins και πολλά άλλα του Bootstrap.

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

Όλες οι @screen-μεταβλητές έχουν αφαιρεθεί στην έκδοση 4.0.0. Αντ' αυτού, χρησιμοποιήστε τις μίξεις media-breakpoint-up(), media-breakpoint-down()ή media-breakpoint-only()Sass ή τον $grid-breakpointsχάρτη Sass.

Οι αποκριτικές κατηγορίες βοηθητικών προγραμμάτων μας έχουν καταργηθεί σε μεγάλο βαθμό προς όφελος των ρητών displayβοηθητικών προγραμμάτων.

• Οι κλάσεις .hiddenκαι .showέχουν αφαιρεθεί επειδή έρχονταν σε διένεξη με τις μεθόδους $(...).hide()και τις $(...).show()μεθόδους του jQuery. Αντίθετα, δοκιμάστε να αλλάξετε το [hidden]χαρακτηριστικό ή χρησιμοποιήστε ενσωματωμένα στυλ όπως style="display: none;"και style="display: block;".
• Όλες οι .hidden-κλάσεις έχουν αφαιρεθεί, εκτός από τα βοηθητικά προγράμματα εκτύπωσης που έχουν μετονομαστεί.
  • Καταργήθηκε από την έκδοση 3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Καταργήθηκε από το v4 alpha:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Τα βοηθητικά προγράμματα εκτύπωσης δεν ξεκινούν πλέον με .hidden-ή .visible-, αλλά με .d-print-.
  • Παλιά ονόματα: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Νέες τάξεις: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Αντί να χρησιμοποιείτε ρητές .visible-*κλάσεις, κάνετε ένα στοιχείο ορατό απλά μην το κρύβετε σε αυτό το μέγεθος οθόνης. Μπορείτε να συνδυάσετε μια .d-*-noneκλάση με μια .d-*-blockκλάση για να εμφανίσετε ένα στοιχείο μόνο σε ένα δεδομένο διάστημα μεγεθών οθόνης (π.χ. .d-none.d-md-block.d-xl-noneεμφανίζει το στοιχείο μόνο σε μεσαίες και μεγάλες συσκευές).

Λάβετε υπόψη ότι οι αλλαγές στα σημεία διακοπής του πλέγματος στο v4 σημαίνουν ότι θα χρειαστεί να αυξήσετε το σημείο διακοπής για να επιτύχετε τα ίδια αποτελέσματα. Οι νέες αποκριτικές κατηγορίες βοηθητικών προγραμμάτων δεν προσπαθούν να φιλοξενήσουν λιγότερο συνηθισμένες περιπτώσεις όπου η ορατότητα ενός στοιχείου δεν μπορεί να εκφραστεί ως ένα ενιαίο συνεχόμενο εύρος μεγεθών θυρών προβολής. Αντίθετα, θα χρειαστεί να χρησιμοποιήσετε προσαρμοσμένο CSS σε τέτοιες περιπτώσεις.