Home-theater-designers
Το Bootstrap 5 ήρθε με σημαντικές αλλαγές, συμπεριλαμβανομένης της μείωσης της υποστήριξης του Internet Explorer (IE) και της εξάρτησης από το jQuery. Αναπτύχθηκε από το Twitter, το Bootstrap είναι το πιο δημοφιλές πλαίσιο CSS στον κόσμο. Το πλαίσιο διεπαφής χρήστη ανοικτού κώδικα εξετάζει τη θέση του για το μέλλον και αυτό έχει κάνει πρωτοποριακές αλλαγές στο v5.
Η πτώση του Bootstrap για IE το έχει καταστήσει το πρώτο εργαλείο ανάπτυξης ιστοσελίδων που το κάνει αυτό. Η κίνηση έρχεται καθώς το μερίδιο αγοράς του Internet Explorer συνεχίζει να μειώνεται, αντιπροσωπεύοντας λιγότερο από το 3% όλων των περιηγητών ιστού.
Διαβάστε παρακάτω για να δείτε ποιες βελτιώσεις έχουν γίνει στο Bootstrap και πώς σας επηρεάζουν.
1. Υποστήριξη jQuery
Το Bootstrap δεν θα χρησιμοποιεί πλέον τη βιβλιοθήκη jQuery. Η ομάδα ανάπτυξης έχει βελτιώσει τη βιβλιοθήκη JavaScript για να πραγματοποιήσει αυτήν την αλλαγή. Η εξάρτηση από το jQuery δεν ήταν απαραίτητα κακό στο Bootstrap.
Στην πραγματικότητα, η εισαγωγή του jQuery άλλαξε ριζικά τον τρόπο χρήσης της JavaScript. Απλοποίησε τις εργασίες γραφής σε JavaScript που διαφορετικά θα είχαν λάβει πολλές γραμμές κώδικα.
Σχετίζεται με: Μάθετε πώς να δημιουργήσετε ένα στοιχείο στο jQuery
Παρ 'όλα αυτά, η ομάδα αποφάσισε να τα καταφέρει. Αυτό έρχεται με το όφελος των μικρότερων αρχείων προέλευσης και των μεγαλύτερων χρόνων φόρτωσης σελίδας. Αυτή ήταν μια πολύ αναγκαία αλλαγή που θα δει το Bootstrap να αποκτήσει ένα πιο φιλικό προς το μέλλον στυλ.
Το μέγεθος του αρχείου προέλευσης έχει γίνει ελαφρύτερο κατά 85KB της μειωμένης JavaScript και αυτό είναι το κλειδί, καθώς η Google θεωρεί τους χρόνους φόρτωσης σελίδων για ιστότοπους για κινητά ως παράγοντα κατάταξης.
Όσο και αν η χρήση του jQuery δεν χρειάζεται πλέον στο Bootstrap 5, μπορείτε ακόμα να το χρησιμοποιήσετε αν θέλετε. Αξίζει επίσης να σημειωθεί ότι όλα τα πρόσθετα JavaScript παραμένουν διαθέσιμα.
2. Προσαρμοσμένες ιδιότητες CSS
Με την απόρριψη της υποστήριξης του Internet Explorer, μπορούν να χρησιμοποιηθούν προσαρμοσμένες ιδιότητες CSS (μεταβλητές). Το IE δεν υποστηρίζει προσαρμοσμένες ιδιότητες - ένας μόνο λόγος για τον οποίο καθυστέρησε τους προγραμματιστές ιστού για μεγάλο χρονικό διάστημα.
Οι προσαρμοσμένες ιδιότητες CSS κάνουν το CSS πιο ευέλικτο και προγραμματιζόμενο. Οι μεταβλητές CSS έχουν πρόθεμα με -bbs για την αποφυγή σύγκρουσης με CSS τρίτων.
Υπάρχουν δύο τύποι μεταβλητών διαθέσιμες: μεταβλητές ρίζας και μεταβλητές συστατικών.
Οι μεταβλητές ρίζας μπορούν να έχουν πρόσβαση όπου φορτώνεται το CSS του Bootstrap. Αυτές οι μεταβλητές βρίσκονται στο _root.scss και αποτελούν μέρος των μεταγλωττισμένων αρχείων dist.
Οι μεταβλητές συστατικών χρησιμοποιούνται ως τοπικές μεταβλητές σε συγκεκριμένα στοιχεία. Είναι χρήσιμα για την αποφυγή τυχαίας κληρονομικότητας στυλ σε στοιχεία όπως ένθετοι πίνακες.
3. Βελτιωμένο σύστημα πλέγματος
Επειδή υπήρχαν προβλήματα αναβάθμισης από την έκδοση 3 σε 4, το Bootstrap 5 διατηρεί το μεγαλύτερο μέρος του συστήματος αυτή τη φορά, βασίζοντας στο υπάρχον σύστημα αντί να το αλλάξει εντελώς. Μερικές από τις αλλαγές είναι:
- Η τάξη υδρορροής ( .αγόρια ) έχει αντικατασταθεί σε βοηθητικό πρόγραμμα ( .σολ* ) όπως το περιθώριο και το γέμισμα
- Έχουν συμπεριληφθεί επίσης κλάσεις κάθετης απόστασης
- Οι στήλες δεν είναι πλέον προεπιλεγμένες θέση: σχετική
4. Βελτιωμένη τεκμηρίωση
Η τεκμηρίωση έχει ενισχυθεί με περισσότερες πληροφορίες, ειδικά όταν πρόκειται για προσαρμογή. Ένα κοινό πρόβλημα ήταν ότι με πολλούς ιστότοπους που χρησιμοποιούν Bootstrap, θα μπορούσατε να προσδιορίσετε αμέσως ότι χρησιμοποιούσε Bootstrap. Το Bootstrap 5 έρχεται τώρα με νέα εμφάνιση και αίσθηση και με καλύτερη προσαρμογή.
Υπάρχει πλέον μεγαλύτερη ευελιξία για την προσαρμογή των θεμάτων σας, έτσι ώστε κάθε ιστότοπος ή εφαρμογή να μην έχει την ίδια ομοιότητα. Η θεματική σελίδα v4 έχει πράγματι επεκταθεί με περισσότερο περιεχόμενο και αποσπάσματα κώδικα για δημιουργία πάνω από τα αρχεία Sass (ο δημοφιλής προεπεξεργαστής CSS). Μπορείτε επίσης να βρείτε ένα πρόγραμμα εκκίνησης npm στην πλατφόρμα GitHub που είναι διαθέσιμο ως αποθετήριο προτύπων.
Η παλέτα χρωμάτων έχει επίσης επεκταθεί στην έκδοση 5. Το εκτεταμένο ενσωματωμένο σύστημα χρωμάτων συνεπάγεται ότι μπορείτε εύκολα να διαμορφώσετε τον χρωματισμό σας χωρίς να χρειάζεται να αφήσετε τη βάση κώδικα. Έχει γίνει επίσης περισσότερη δουλειά για τη βελτίωση της χρωματικής αντίθεσης, συμπεριλαμβανομένης της προσθήκης μετρήσεων αντίθεσης χρώματος στα έγχρωμα έγγραφα Bootstrap.
5. Βελτιωμένοι έλεγχοι φόρμας
Το Bootstrap έχει βελτιώσει τα στοιχεία ελέγχου φόρμας, τις ομάδες εισαγωγής και πολλά άλλα.
Στο v4, το Bootstrap χρησιμοποιούσε προσαρμοσμένα στοιχεία ελέγχου φόρμας, εκτός από τις προεπιλογές που παρέχει κάθε πρόγραμμα περιήγησης. Στο v5, όλα αυτά είναι πλέον προσαρμοσμένα. Όλα τα κουμπιά επιλογής, τα πλαίσια ελέγχου, το αρχείο, το εύρος και πολλά άλλα για να τους δώσουν την ίδια εμφάνιση και συμπεριφορά σε διαφορετικά προγράμματα περιήγησης.
Τα νέα στοιχεία ελέγχου φόρμας δεν περιέχουν πλέον περιττή πολύχρωμη σήμανση, αλλά αντίθετα εστιάζουν στις τυπικές και λογικές δυνατότητες σχεδίασης.
6. Bootstrap 5 Adds Utilities API
Μετά από νέες βιβλιοθήκες CSS όπως το Tailwind CSS, το Bootstrap προσθέτει τώρα και μια βιβλιοθήκη βοηθητικών προγραμμάτων. Η ομάδα bootstrap λέει ότι είναι στην ευχάριστη θέση να δουν πώς άλλοι προγραμματιστές αμφισβητούν τον τρόπο που δημιουργήσαμε στον ιστό την τελευταία δεκαετία και πλέον.
Τα βοηθητικά προγράμματα αποκτούν δυναμική στην αναπτυξιακή κοινότητα και η ομάδα του bootstrap έχει λάβει γνώση. Η ομάδα είχε προσθέσει νωρίτερα πρόβλεψη για βοηθητικά προγράμματα σε έκδοση v4 χρησιμοποιώντας το παγκόσμιο $ ενεργοποίηση-* τάξεις. Στο v5, έχουν αλλάξει σε μια προσέγγιση API και μια νέα γλώσσα και σύνταξη στο Sass. Αυτό θα σας δώσει τη δυνατότητα να δημιουργήσετε νέα βοηθητικά προγράμματα ενώ θα μπορείτε να αφαιρέσετε ή να τροποποιήσετε τις προεπιλεγμένες ρυθμίσεις.
Ως τρόπος για καλύτερη οργάνωση, ορισμένα βοηθητικά προγράμματα που ήταν σε έκδοση v4 μεταφέρθηκαν στην ενότητα 'Βοηθοί'.
7. Νέα βιβλιοθήκη εικονιδίων Bootstrap
Το Bootstrap διαθέτει τώρα τη δική του βιβλιοθήκη εικονιδίων SVG ανοιχτού κώδικα με πάνω από 1.300 εικονίδια. Είναι προσαρμοσμένο για τα στοιχεία του πλαισίου, αλλά μπορείτε ακόμα να συνεργαστείτε μαζί τους σε οποιοδήποτε έργο.
Δεδομένου ότι είναι εικόνες SVG, μπορούν γρήγορα να κλιμακωθούν και να εφαρμοστούν με πολλούς τρόπους και επίσης να διαμορφωθούν με CSS.
Μπορείτε να εγκαταστήσετε τα εικονίδια χρησιμοποιώντας πάνω από το επίπεδο της θάλασσας:
$ npm i bootstrap-iconsΕγκαταστήστε το Bootstrap 5
Μπορείτε να πάτε στο Επίσημη σελίδα λήψης του Bootstrap 5 αν θέλετε να το εγκαταστήσετε. Εάν θέλετε να είστε ενήμεροι για την τελευταία έκδοση ανάπτυξης, μπορείτε να χρησιμοποιήσετε πάνω από το επίπεδο της θάλασσας να το τραβήξει:
$ npm i bootstrap@next
Κατά τη στιγμή αυτής της σύνταξης, το πλαίσιο βρίσκεται στην έκδοση Beta 3. Αυτό σημαίνει ότι το λογισμικό είναι ασφαλές στη χρήση, αλλά εξακολουθεί να βρίσκεται σε ανάπτυξη. Μη διστάσετε να δώσετε σχόλια στην ομάδα και να κάνετε οποιαδήποτε απαραίτητη συνεισφορά.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Εισαγωγή στα συστατικά του Ιστού και στην αρχιτεκτονική που βασίζεται σε στοιχείαΑς ρίξουμε μια ματιά στα κοινά στοιχεία ιστού και να δούμε γιατί είναι χρήσιμα.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- Ανάπτυξη διαδικτύου
- JavaScript
- CSS
Ο Jerome είναι Staff Writer στο MakeUseOf. Καλύπτει άρθρα σχετικά με τον Προγραμματισμό και το Linux. Είναι επίσης λάτρης των κρυπτογράφησης και παρακολουθεί πάντα τη βιομηχανία κρυπτογράφησης.
Περισσότερα από τον Jerome DavidsonΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
πώς να απαλλαγείτε από τα παράθυρα ενεργοποίησηςΚάντε κλικ εδώ για εγγραφή