Bootstrap 4 Νέες και δροσερές λειτουργίες που θα αγαπήσετε

Η επόμενη μεγάλη έκδοση του πλαισίου Bootstrap είναι γύρω από τη γωνία. Η έκδοση alpha μπορεί ήδη να ληφθεί από την ιστοσελίδα ανάπτυξης του Bootstrap και ο πηγαίος κώδικας είναι επίσης διαθέσιμος στο Github.

Το Bootstrap του Twitter είναι σήμερα το πιο δημοφιλές πλαίσιο των frontend εκεί έξω. Επιτρέπει στους προγραμματιστές να να χτίσουν γρήγορα και να ανταποκριθούν στις ιστοσελίδες με κινητά τηλέφωνα. Το Bootstrap καθιστά δυνατή την έξυπνη χρήση του τυπικού trio HTML5, CSS3 και Javascript. Αυτή τη στιγμή χρησιμοποιείται από περισσότερους από 6 εκατομμύρια ιστότοπους στον ιστό.

Παρόλο που το Bootstrap 4 βρίσκεται ακόμα στη φάση ανάπτυξης (οπότε μην το χρησιμοποιήσετε σε μια ζωντανή περιοχή ακόμα), οι προγραμματιστές έχουν κάνει μια υπέροχη δουλειά. Σε αυτό το post θα ρίξουμε μια ματιά στη νέα έκδοση που περιλαμβάνει πολλά εξαιρετικά χαρακτηριστικά που σίγουρα θα είναι να βελτιώσει και να βελτιώσει τη ροή εργασιών ανάπτυξης των frontend.

1. Sass αντί για λιγότερο

Μέχρι τώρα το Bootstrap έχει χρησιμοποιήσει λιγότερο ως κύριο CSS προεπεξεργαστή, αλλά για τη νέα μεγάλη κυκλοφορία, οι κανόνες στυλ θα αναπροσαρμοστούν στο Sass, το οποίο είναι πολύ πιο δημοφιλές μεταξύ των προγραμματιστών frontend, έχει μια τεράστια βάση συνεισφερόντων, γενικά ευκολότερη στη χρήση και προσφέρει περισσότερα δυνατότητες. Χάρη στο ισχυρό Compressor Libsass Sass γραμμένο σε C / C++ Το Bootstrap 4 θα μεταγλωττιστεί πολύ πιο γρήγορα από πριν.

2. Νέα κλίμακα δικτύου για μικρότερες οθόνες

Το Bootstrap διαθέτει ένα εξελιγμένο σύστημα ανταποκρίσεων δικτύου που επιτρέπει στους προγραμματιστές να στοχεύουν συσκευές με διαφορετικά παράθυρα προβολής. Το Bootstrap 3 διαθέτει 4 κατηγορίες πλέγματος για στήλες, .col-xs-XX για κινητά τηλέφωνα, .col-sm-XX για δισκία, .col-md-XX για επιτραπέζιους υπολογιστές, και .col-lg-XX για μεγαλύτερους επιτραπέζιους υπολογιστές. Το Bootstrap 4 θα ενισχύσει το σύστημα πλέγματος με ένα πέμπτο που θα διευκολύνει τους προγραμματιστές στοχεύστε μικρότερες συσκευές κάτω από πλάτος προβολής 480 px.

Η νέα τάξη πλέγματος έχει πάρει το όνομα του προηγούμενου μικρότερου και έσπρωξε τα τρέχοντα ονόματα των επιπέδων πλέγματος προς τα πάνω κατά μία εγκοπή. Στο Bootstrap 4 οι μεγάλοι επιτραπέζιοι υπολογιστές θα χρησιμοποιήσουν το .col-xl-XX επιλογέας κλάσης. Είναι σημαντικό να γνωρίζουμε ότι παρά το νέο όνομα δεν προσέθεσαν νέα τάξη για εξαιρετικά μεγάλες οθόνες, αλλά για επιπλέον μικρά.

3. Εισάγει σχετικές μονάδες CSS

Το Bootstrap 4 αφαιρεί τελικά την υποστήριξη για τον Internet Explorer 8. Αυτό είναι πραγματικά ένα έξυπνο βήμα, καθώς τους επιτρέπει να ξεφορτωθούν τα ενοχλητικά polyfills και να μετατρέψουν σε σχετικές μονάδες CSS. Αντί των εικονοστοιχείων, η νέα μεγάλη έκδοση θα είναι χρησιμοποιήστε REMs και EMs που το καθιστούν εφικτό εφαρμόστε την απόκριση τυπογραφίας σε ιστότοπους Bootstrap. Αυτό θα αυξήσει επίσης την αναγνωσιμότητα και θα καταστήσει τους ιστοτόπους πιο προσιτοί για τους χρήστες με ειδικές ανάγκες.

Εάν θέλετε να δοκιμάσετε πώς συνεργάζονται οι σχετικές μονάδες με το νέο Bootstrap 4, δείτε αυτό το demo στο Codepen.

4. Brand New Bootstrap Κάρτες

Η ομάδα ανάπτυξης αποφάσισε να ενοποιήσει ορισμένα προηγούμενα στοιχεία της διεπαφής χρήστη του Bootstrap, οπότε αποφάσισαν να εισαγάγουν ένα νέο στοιχείο UI που ονομάζεται Κάρτες. Οι κάρτες θα αντικαταστήσουν τα προηγούμενα πηγάδια, μικρογραφίες και πίνακες και θα παρέχουν στους χρήστες μια πιο απλοποιημένη ροή εργασιών. Μην ανησυχείτε, οι κάρτες θα διατηρούν οικεία στοιχεία, όπως τίτλους, κεφαλίδες και υποσέλιδα πηγαδιών, μικρογραφίες και πίνακες.

Καθώς οι κάρτες θα είναι πιο ευέλικτες από τα τρέχοντα στοιχεία UI, θα επιτρέψουν μεγαλύτερο χώρο για δημιουργικές εφαρμογές. Υπάρχουν ορισμένοι πρωτοπόροι που έχουν ήδη πραγματοποιήσει πειράματα στο Codepen με κάρτες Bootstrap. Μπορείτε να τα ελέγξετε ή να δημιουργήσετε τις δικές σας κάρτες.

5. Νέα μονάδα επανεκκίνησης

Η νέα μονάδα επανεκκίνησης αντικαθιστά την προηγούμενη normalize.css επαναφέρετε το αρχείο. Δεν το αποκόπτει. αντίθετα, χτίζει περισσότερους κανόνες σε αυτό. Ο στόχος της κίνησης ήταν να συμπεριληφθούν όλοι οι γενικοί επιλογείς CSS και τα στυλ επαναφοράς σε ένα ενιαίο, εύκολο στη χρήση αρχείο SCSS. Μπορείτε να ρίξετε μια ματιά στον πηγαίο κώδικα εδώ αν θέλετε να καταλάβετε καλύτερα πώς λειτουργεί η νέα μονάδα.

Είναι καλό να γνωρίζουμε ότι τα νέα στυλ επαναφοράς ρυθμίζουν έξυπνα την ιδιότητα CSS του μεγέθους box στο border box στο στοιχείο, το οποίο επομένως κληρονομείται από κάθε στοιχείο παιδιού στη σελίδα. Ο νέος κανόνας στυλ καθιστά πιο ευπροσάρμοστα τα σχεδιαγράμματα. Αν θέλετε να δοκιμάσετε τη διαφορά μεταξύ των τύπων διάταξης περιεχομένου και πλαισίου περιγραμμάτων, ρίξτε μια ματιά σε αυτό το πρακτικό demo που παρέχεται από το CSS-Tricks.com (δεν δημιουργήθηκε για το Bootstrap 4, δείχνει απλώς πώς το μέγεθος του κουτιού γενικά λειτουργεί).

6. Υποστήριξη Flexbox υποστήριξης

Το Bootstrap 4 καθιστά δυνατή την αξιοποίηση του Flexbox Layout του CSS3, ωστόσο - καθώς ο Internet Explorer 9 δεν υποστηρίζει την μονάδα flexbox - η προεπιλεγμένη έκδοση του Bootstrap 4 μάλλον κάνει χρήση των ιδιοτήτων CSS και εμφάνιση CSS για να εφαρμόσει μια διάταξη υγρού.

Το Flexbox έχει μια εύχρηστη διάταξη που μπορεί να χρησιμοποιηθεί άριστα σε σχεδιασμό που ανταποκρίνεται, καθώς παρέχει ένα ευέλικτο δοχείο που είτε επεκτείνεται είτε συρρικνώνεται για να γεμίσει τον διαθέσιμο χώρο με τον καλύτερο τρόπο. Χρησιμοποιήστε μόνο τη δυνατότητα opt-in flexbox, αν εσείς όχι πρέπει να παρέχουν υποστήριξη για τον IE9.

7. Προσαρμοσμένη μεταβλητή προσαρμογή

Όλες οι μεταβλητές Sass που χρησιμοποιούνται στη νέα έκδοση του Bootstrap περιλαμβάνονται σε ένα μόνο αρχείο που ονομάζεται _variables.scss, το οποίο θα βελτιώσει σημαντικά τη διαδικασία ανάπτυξης. Δεν χρειάζεται να κάνετε τίποτα άλλο εκτός από την αντιγραφή των ρυθμίσεων από αυτό το αρχείο σε ένα άλλο που καλείται _custom.scss για να αλλάξετε τις προεπιλεγμένες τιμές.

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

8. Νέες κλάσεις χρησιμότητας για διαχωρισμό

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

Η σύνταξη για τις νέες τάξεις είναι αρκετά απλή, για παράδειγμα προσθέτοντας το .m-a-0 συνδέει έναν κανόνα στυλ που ορίζει τα περιθώρια στο 0 σε όλες τις πλευρές του δεδομένου στοιχείου (margin-all-0). Ενώ τα περιθώρια χρησιμοποιούν το m- το πρόθεμα, τα μαξιλάρια στυλίζονται με το Π- πρόθεμα. Στα αναπτυξιακά έγγραφα μπορείτε να ρίξετε μια ματιά σε όλες τις νέες κλάσεις χρησιμότητας των αποστάσεων.

9. Εργαλεία και Popovers Powered by Tether

Στο Bootstrap 4 τα εργαλεία και τα popovers κάνουν χρήση της βιβλιοθήκης Tether supercool, μιας μηχανής τοποθέτησης που επιτρέπει να διατηρείται ένα απολύτως τοποθετημένο στοιχείο ακριβώς δίπλα σε ένα άλλο στοιχείο στην ίδια σελίδα. Αυτό σημαίνει τα εργαλεία και τα popovers θα τοποθετηθούν σωστά σωστά στις ιστοσελίδες Bootstrap 4.

Μην ξεχνάτε ότι καθώς το Tether είναι βιβλιοθήκη JavaScript τρίτου μέρους, θα πρέπει να το συμπεριλάβετε ξεχωριστά στο HTML πριν από το αρχείο bootstrap.js.

10. Επαναπροσδιορισμένες προσθήκες JavaScript

Η ομάδα ανάπτυξης επαναπροσδιορίστηκε κάθε plugin JavaScript για τη νέα έκδοση με χρήση του EcmaScript 6. Με την έξυπνη αξιοποίηση των τελευταίων προδιαγραφών και των νεώτερων βελτιώσεων που προτίθενται να βελτιώσουν την εμπειρία των frontend.

Το νέο Bootstrap 4 έχει επίσης υποβληθεί σε άλλες βελτιώσεις στο JavaScript, όπως έλεγχος τύπου επιλογής, γενικές μεθόδους teardown, και Υποστήριξη UMD, που θα συνεργαστούν όλοι για να κάνουν το πιο δημοφιλές πλαίσιο των συνόλων να τρέχει πιο ομαλά από ποτέ.

Τώρα διαβάστε: 10 ελαφριές εναλλακτικές λύσεις για το Bootstrap & Foundation