Με την πρώτη ματιά, Το Bootstrap φαίνεται αρκετά απλό . Και πράγματι, δεν είναι δύσκολο να αρχίσετε να χρησιμοποιείτε το Bootstrap. Υπάρχει πολύ καλά γραμμένο Τεκμηρίωση Bootstrap με πολλά παραδείγματα κώδικα HTML, CSS και JavaScript. Οι περισσότερες από τις σημαντικές παγίδες αναφέρονται εκεί, αλλά ακόμα μερικά λάθη είναι αρκετά ανεπαίσθητα ή έχουν διφορούμενες αιτίες. Επειδή το Bootstrap φαίνεται πολύ απλό και εύκολο στη χρήση, πολλοί προγραμματιστές σπεύδουν στο πλαίσιο και έτσι συμβαίνουν λάθη.
Θα ρίξουμε μια ματιά σε 10 από τα πιο συνηθισμένα λάθη, προβλήματα και παρερμηνείες Bootstrap όταν οι προγραμματιστές αρχίσουν να το χρησιμοποιούν.
Κοινό λάθος Bootstrap # 1: Βασικές παρανοήσεις σχετικά με το πλαίσιο
Υπάρχουν μερικές βασικές παρανοήσεις σχετικά με το Πλαίσιο Bootstrap που έχουν οι άνθρωποι. Αυτό μπορεί να οφείλεται στο γεγονός ότι δεν διαφημίζεται σαφώς στον ιστότοπο Bootstrap ή επειδή οι άνθρωποι δεν χρειάζονται αρκετό χρόνο για να διαβάσουν την τεκμηρίωση. Το γεγονός είναι ότι μερικές φορές οι προγραμματιστές καταλήγουν στη γωνία να κάνουν πράγματα λανθασμένα και στη συνέχεια να κατηγορούν το πλαίσιο. Ας διευκρινίσουμε λοιπόν ορισμένα βασικά στοιχεία.
Το Bootstrap είναι ολοκληρωμένο, αλλά δεν είναι ούτε τεράστιο ούτε τεράστιο. Το Bootstrap συνοδεύεται από βασικά πρότυπα σχεδίασης HTML και CSS που περιλαμβάνουν πολλά κοινά στοιχεία διεπαφής χρήστη. Σε αυτά περιλαμβάνονται τυπογραφία, πίνακες, φόρμες, κουμπιά, γλυπτικά, αναπτυσσόμενα, κουμπιά και ομάδες εισόδου, πλοήγηση, σελιδοποίηση, ετικέτες και σήματα, ειδοποιήσεις, μπάρες προόδου, μοντέλα, καρτέλες, ακορντεόν, καρουζέλ και πολλά άλλα. Μπορείτε να επιλέξετε και να επιλέξετε μερικά από αυτά και με την προεπιλεγμένη διαμόρφωσή του δημιουργήστε γρήγορα ένα περιβάλλον εργασίας χρήστη που χειρίζεται πολλά προγράμματα περιήγησης, συσκευές και αναλύσεις με ωραία μορφή.
Το Bootstrap δεν θα κάνει τα πάντα για εσάς, αλλά παρέχει ένα σύνολο εύλογων προεπιλογών για να διαλέξετε και θα βοηθήσει τους προγραμματιστές να επικεντρωθούν περισσότερο στο έργο ανάπτυξης παρά να ανησυχούν για το σχεδιασμό και να τους βοηθήσουν να δημιουργήσουν έναν όμορφο ιστότοπο και να λειτουργήσει γρήγορα. Επιτρέπει γρήγορο πρωτότυπο, αλλά δεν περιορίζει τους προγραμματιστές στο δρόμο.
Είναι αρκετά επεκτάσιμο ώστε ο καθένας να μπορεί να το προσαρμόσει ώστε να ταιριάζει στις ανάγκες του. Στην αρχή, το Bootstrap είχε κάποιους περιορισμούς και τότε ήταν περίπλοκο να επεκταθούν τα προεπιλεγμένα στυλ. Αλλά καθώς ωριμάζει το πλαίσιο, η επεκτασιμότητα βελτιώθηκε επίσης.
Κοινό λάθος Bootstrap # 2: Σκέφτεστε ότι δεν χρειάζεται να γνωρίζετε CSS για να χρησιμοποιήσετε το Bootstrap και ότι δεν χρειάζεστε σχεδιαστή
Εάν σκέφτεστε ότι εάν χρησιμοποιείτε το Bootstrap δεν θα χρειαστεί να γνωρίζετε το CSS, έχετε πολύ λάθος. Κάθε προγραμματιστής front-end πρέπει να μάθει CSS και HTML5. Το Bootstrap αφαιρεί πολλά δύσκολα τμήματα CSS από τους ώμους των προγραμματιστών (όπως προθέματα ειδικά για προμηθευτές) και προσφέρει βασικό προεπιλεγμένο στυλ, αλλά πρέπει να κατανοήσετε το CSS. Δεν χρειάζεται να γνωρίζετε πώς λειτουργούν τα ερωτήματα πολυμέσων, αλλά πρέπει να καταλάβετε πώς λειτουργεί ο σχεδιασμός απόκρισης. Το Bootstrap δεν έχει σκοπό να σας διδάξει CSS, αλλά μπορεί να σας βοηθήσει αν θέλετε. Η εξέταση του πηγαίου κώδικα σε LESS ή SASS είναι ένα εξαιρετικό σημείο εκκίνησης.
Σε παρόμοιο θέμα, δεν χρειάζεται να είστε σχεδιαστής και μπορείτε να υποστηρίξετε ότι δεν χρειάζεστε σχεδιαστή με το Bootstrap. Ωστόσο, εάν είναι δυνατόν, χρησιμοποιήστε βοήθεια από έναν σχεδιαστή. Ένα κοινό παράπονο εναντίον του Bootstrap είναι ότι όλοι οι ιστότοποι Bootstrap μοιάζουν, και είναι εύκολο να καταλήξουμε σε έναν ιστότοπο που μοιάζει με οποιονδήποτε άλλο ιστότοπο Bootstrap. Αυτό όμως δεν χρειάζεται να είναι αλήθεια. Εκατομμύρια ιστότοποι σε ολόκληρο τον ιστό δημιουργούνται με το Bootstrap. Μπορείτε να βρείτε υπέροχες προθέσεις για το πώς μπορούν να επιτευχθούν διαφορετικά σχέδια στο Bootstrap Expo , που συλλέγει ιστότοπους που έχουν δημιουργηθεί με Bootstrap. Ρίξτε μια ματιά, αποκτήστε έμπνευση και ξεκινήστε να δημιουργείτε τη δική σας παραλλαγή σχεδιασμού.
Κοινό λάθος Bootstrap # 3: Αλλαγή αρχείου Bootstrap CSS
Για να το καταστήσετε απλό και απλό: Κάντε δεν τροποποιήστε το bootstrap.css αρχείο.
Εάν κάνετε αλλαγές στο bootstrap.css αρχείο, τα πράγματα θα γίνουν πολύπλοκα πολύ γρήγορα. Ολόκληρη η σχεδίαση θα σπάσει όταν θέλετε να αναβαθμίσετε τα αρχεία Bootstrap. Μπορείτε να αντικαταστήσετε τα δικά σας φύλλα στυλ, προεπιλεγμένα χρώματα, στυλ, περιθώρια, επιθέματα, τα πάντα. Δεν χρειάζεται να αγγίξετε το bootstrap.css φύλλο στυλ καθόλου.
Δεν ξέρετε λιγότερα ή SASS; Κανένα πρόβλημα, μπορείτε να δημιουργήσετε το δικό σας αρχείο CSS και να αντικαταστήσετε ό, τι θέλετε από το πρωτότυπο bootstrap.css φύλλο στυλ. Όπως αναφέραμε στο προηγούμενο λάθος, η γνώση του CSS είναι υποχρεωτική. Δημιουργήστε τον νέο σας επιλογέα CSS, χρησιμοποιήστε τον στο HTML και εφόσον δηλώσετε τις τάξεις CSS μετά τα στυλ Bootstrap, οι ορισμοί σας θα αντικαταστήσουν τις προεπιλογές Bootstrap.
μάθετε c και c++
Θέλετε να μάθετε περισσότερα και να βουτήξετε βαθύτερα; Σας προτείνω και σας ενθαρρύνω να το κάνετε. Χρησιμοποιήστε τον πηγαίο κώδικα Bootstrap LESS. Θα κατανοήσετε καλύτερα τι συμβαίνει και πού θα γίνει αν χρησιμοποιείτε την πηγή LESS και όχι το στατικό CSS.
Κοινό λάθος Bootstrap # 4: Χρησιμοποιώντας όλα όσα προσφέρει το Bootstrap
Όπως αναφέρθηκε προηγουμένως, το Bootstrap είναι ολοκληρωμένο. Προσφέρει πολλά στοιχεία UI, πρότυπα σχεδίασης HTML και CSS και πρόσθετα JavaScript. Αλλά παρακαλώ, να είστε επιλεκτικοί. Δεν χρειάζεται να χρησιμοποιείτε όλες τις δυνατότητες του Bootstrap.
Αυτό ισχύει ιδιαίτερα για τις προσθήκες. Διαλέξτε και επιλέξτε μόνο προσθήκες που έχουν νόημα και δεν τα χρησιμοποιείτε όλα, επειδή φαίνεται ωραία και δροσερή. Ο ιστότοπός σας μπορεί εύκολα να γίνει υπερβολική. Σκεφτείτε για μια αρχή που δεν συμπεριλαμβάνετε bootstrap.js αρχειοθετήστε και δημιουργήστε έναν ιστότοπο χρησιμοποιώντας απλό HTML και CSS. Στη συνέχεια, προσθέστε στοιχεία μόνο ανάλογα με τις ανάγκες για συγκεκριμένους ρόλους, ένας προς έναν.
Κοινό λάθος Bootstrap # 5: Κατάχρηση μιας εντολής τρόπου
Τα μοντέλα Bootstrap προσφέρουν ευέλικτα μηνύματα διαλόγου με την ελάχιστη απαιτούμενη λειτουργικότητα και συνοδεύονται από έξυπνες προεπιλογές. Παρόλο που το mod είναι εύκολο στη χρήση και προσφέρει πλούσια προσαρμογή, υπάρχουν μερικά πράγματα που πρέπει να λάβουμε υπόψη για να αποφύγουμε κοινές καταχρήσεις.
Εμφανίζονται περισσότερες από μία τρόποι προτροπής τη δεδομένη στιγμή
Το Bootstrap δεν υποστηρίζει αλληλεπικαλυπτόμενα μοντέλα. Μόνο ένας τρόπος μπορεί να είναι ορατός. Η εμφάνιση περισσότερων από ένα τρόπων κάθε φορά μπορεί να επιτευχθεί, αλλά απαιτεί να γραφτεί προσαρμοσμένος κώδικας για να το χειριστεί σωστά.
Το bootstrap modal εμφανίζεται κάτω από το φόντο
Εάν το κοντέινερ τροπικού στοιχείου ή το μητρικό του στοιχείο έχει σταθερή ή σχετική θέση, το μέσο δεν θα εμφανίζεται σωστά. Πάντα βεβαιωθείτε ότι το μητρικό κοντέινερ και τα μητρικά του στοιχεία δεν έχουν καμία ειδική τοποθέτηση. Η βέλτιστη πρακτική είναι να τοποθετήσετε HTML ενός τρόπου πριν από την ετικέτα κλεισίματος ή ακόμα καλύτερα σε μια θέση ανώτερου επιπέδου στο έγγραφο αμέσως μετά το άνοιγμα της ετικέτας. Αυτός είναι ο καλύτερος τρόπος για να αποφύγετε άλλα στοιχεία που επηρεάζουν την εμφάνιση και τη λειτουργικότητα του τρόπου.
Modal στις φορητές συσκευές
Υπάρχουν ορισμένες προειδοποιήσεις για τις οποίες πρέπει να γνωρίζουν οι προγραμματιστές όταν ασχολούνται με τα modals φορητές συσκευές με εικονικά πληκτρολόγια . Αυτό ισχύει ιδιαίτερα για Συσκευές iOS , όπου υπάρχει ένα σφάλμα απόδοσης που δεν ενημερώνει τη θέση των σταθερών στοιχείων όταν ενεργοποιείται το εικονικό πληκτρολόγιο. Αυτό δεν αντιμετωπίζεται από το Bootstrap, οπότε εναπόκειται στον προγραμματιστή να χειριστεί αυτές τις καταστάσεις στον κώδικα με τον καλύτερο τρόπο για την εν λόγω εφαρμογή.
Κοινό λάθος Bootstrap # 6: Πρόβλημα στοιχείου κουμπιού εισαγωγής αρχείου
Το Bootstrap δεν έχει καθορισμένο στοιχείο για ένα κουμπί μεταφόρτωσης αρχείων. Μια απλή και κομψή λύση χρησιμοποιώντας μόνο HTML και CSS μπορεί να επιτευχθεί με τον ακόλουθο δείγμα κώδικα:
Browse .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } Υπάρχουν πολλά παραδείγματα για το πώς να έχετε παρόμοιο αποτέλεσμα. Αυτό το παράδειγμα κώδικα δανείζεται από την Cory LaViska και στον ιστότοπό του μπορείτε να διαβάσετε πιο αναλυτικά εξήγηση αυτού του προβλήματος . Υπάρχει επίσης ένα εκτεταμένο παράδειγμα με περισσότερες λειτουργίες που χρησιμοποιούν πρόσθετο κώδικα JavaScript.
Κοινό λάθος Bootstrap # 7: Υπερβολική συμπλοκή με JavaScript και παράβλεψη χαρακτηριστικών «δεδομένων-»
Οι σχεδιαστές, ή μόνο οι αρχάριοι προγραμματιστές JavaScript, μπορούν πολύ εύκολα να εξερευνήσουν την ανάπτυξη ιστού και να δημιουργήσουν ιστοσελίδες χρησιμοποιώντας μόνο HTML, CSS και Bootstrap. Εάν δεν είναι πολύ καλοί στην κωδικοποίηση, μπορεί να πέσουν στην παγίδα της κατάχρησης της JavaScript ή απλώς υπερβολικής περιπλοκής. Είναι σημαντικό να δηλώσετε ότι όλες οι προσθήκες Bootstrap μπορούν να χρησιμοποιηθούν αποκλειστικά μέσω του API σήμανσης, χωρίς γράφοντας ένα μονή γραμμή της JavaScript. Αυτό είναι το API πρώτης κατηγορίας του Bootstrap και πρέπει να είναι το πρώτο σας ζήτημα κατά τη χρήση προσθηκών.
Για παράδειγμα, μπορούμε να ενεργοποιήσουμε έναν τρόπο διαλόγου χωρίς να γράψουμε κανένα JavaScript απλώς ρυθμίζοντας το data-toggle='modal' σε ένα στοιχείο ελεγκτή όπως ένα κουμπί ή μια αγκύρωση και περάστε επιπλέον παραμέτρους χρησιμοποιώντας data- γνωρίσματα. Στον παρακάτω κώδικα, στοχεύουμε κώδικα HTML με το αναγνωριστικό #myModal. Έχουμε προσδιορίσει ότι ο τρόπος δεν θα κλείσει όταν ο χρήστης κάνει κλικ εκτός του τρόπου χρήσης χρησιμοποιώντας το data-backdrop επιλογή και έχουμε απενεργοποιήσει το συμβάν κλειδί διαφυγής που κλείνει έναν τρόπο με data-keyboard επιλογή. Όλα σε μία γραμμή κώδικα HTML:
Launch my modal Κοινό λάθος Bootstrap # 8: Παράβλεψη εργαλείων που διευκολύνουν την ανάπτυξη Bootstrap
Συμβαίνουν λάθη και κάθε προγραμματιστής τα κάνει περιστασιακά. Αυτό είναι αναπόφευκτο, αλλά είναι το πώς αντιμετωπίζετε το λάθος που έχει σημασία. Η ομάδα Bootstrap παρατήρησε παρακολουθώντας το πρόγραμμα παρακολούθησης ζητημάτων ότι οι άνθρωποι κάνουν κάποια λάθη πιο συχνά. Γι 'αυτό προσπάθησαν να αυτοματοποιήσουν τη διαδικασία ανάπτυξης. Το αποτέλεσμα είναι Μπόλιντ , ένα εργαλείο linting HTML για έργα Bootstrap. Το Bootlint μπορεί να χρησιμοποιηθεί είτε στο πρόγραμμα περιήγησης είτε από τη γραμμή εντολών μέσω του Node.js και θα ελέγχει αυτόματα ιστοσελίδες Bootstrapped για πολλά κοινά λάθη χρήσης Bootstrap. Η προσθήκη Bootlint στην αλυσίδα εργαλείων ανάπτυξης ιστού μπορεί να εξαλείψει πολλά κοινά λάθη που συνήθως επιβραδύνουν την ανάπτυξη ενός έργου.
Σε περίπτωση που θέλετε να συνεισφέρετε στο έργο Bootstrap, αξίζει τον έλεγχο Ρόρσχαχ . Το Rorschach είναι ένα bot check sanity check request Bootstrap, το οποίο εκτελεί μερικούς ελέγχους σε κάθε νέο αίτημα έλξης. Εάν αποτύχει ένας έλεγχος υγιεινής, αφήνει ένα ενημερωτικό σχόλιο στο αίτημα έλξης που εξηγεί το λάθος και πώς να το διορθώσει και, στη συνέχεια, κλείνει το αίτημα έλξης.
Συνήθη λάθη Bootstrap # 9: IE8 και παλαιότερα προβλήματα ασυμβατότητας προγραμμάτων περιήγησης
Το Bootstrap έχει σχεδιαστεί για να λειτουργεί με τον καλύτερο δυνατό τρόπο στα πιο πρόσφατα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές και κινητά. Τα παλαιότερα προγράμματα περιήγησης ενδέχεται να εμφανίζουν στοιχεία και στοιχεία με διαφορετικό στιλ, αλλά όλα πρέπει να είναι πλήρως λειτουργικά. Η υποστήριξη περιλαμβάνει τον Internet Explorer 8 και 9, με σημαντική σημείωση ότι ορισμένες ιδιότητες CSS3 και στοιχεία HTML5 δεν υποστηρίζονται πλήρως από αυτά τα προγράμματα περιήγησης.
φτιάχνοντας ένα bot για διχόνοια
Για να λάβετε πλήρη υποστήριξη για τον Internet Explorer 8 και άλλα παλαιότερα προγράμματα περιήγησης, πρέπει να χρησιμοποιήσετε ένα polyfill για ερωτήματα πολυμέσων CSS3 Απάντηση.js , HTML 5 shim το οποίο επιτρέπει τη χρήση στοιχείων HTML5 και ένα κατάλληλο IEtag στην κεφαλή HTML για να διασφαλιστεί ότι το IE δεν εκτελείται σε λειτουργία συμβατότητας. Η κεφαλή HTML στο τέλος θα πρέπει να μοιάζει με αυτό:
... Σε περίπτωση Respond.js, προσέξτε τα ακόλουθα προειδοποιήσεις στο περιβάλλον ανάπτυξης και παραγωγής.
Κοινό λάθος Bootstrap # 10: Αγνοώντας τις βέλτιστες πρακτικές
Μία από τις κοινές ερωτήσεις σχετικά με το Stack Overflow είναι πώς να κάνετε το αναπτυσσόμενο μενού Bootstraps να ανοίγει στο hover, αντί για κλικ. Αν και η λύση σε αυτό το ερώτημα δεν είναι περίπλοκη και μπορεί να γίνει χρησιμοποιώντας μόνο CSS, δεν συνιστάται. Αυτό το χαρακτηριστικό έμεινε εκτός του πλαισίου σκόπιμα και αυτή είναι μια απόφαση σχεδιασμού που έλαβε η ομάδα ανάπτυξης. Και πάλι, μπορεί να γίνει, αλλά πρέπει να κατανοήσουμε τις επιπτώσεις και να κατανοήσουμε ότι υπάρχουν βέλτιστες πρακτικές, ειδικά για κινητά πρώτα πλαίσια. Ο λόγος πίσω από αυτό το συγκεκριμένο ζήτημα είναι ότι το να κάνεις πράγματα να δουλεύεις στο hover δεν βοηθά τους χρήστες που διαθέτουν συσκευές αφής. Σε τέτοιες συσκευές δεν υπάρχει κίνηση, μόνο συμβάντα αφής. Έτσι, αυτό δεν θα λειτουργεί σωστά σε καμία συσκευή με δυνατότητα αφής.
Συμπέρασμα λαθών Bootstrap
Ελπίζω ότι αυτός ο σύντομος οδηγός Bootstrap θα σας βοηθήσει να αποφύγετε ορισμένα από τα κοινά λάθη, να ξεκαθαρίσετε τις συνηθισμένες παρανοήσεις και να σας βοηθήσουμε να αξιοποιήσετε στο έπακρο το πλαίσιο. Λάβετε υπόψη ότι το Bootstrap δεν είναι για όλους, ούτε είναι κατάλληλο για κάθε έργο. Όταν επιλέγετε ένα πλαίσιο, πρέπει να αφιερώσετε λίγο χρόνο για να διαβάσετε την τεκμηρίωση και πρέπει να αφιερώσετε λίγο χρόνο παίζοντας με το πλαίσιο για να αποκτήσετε μια καλύτερη αίσθηση και εικόνα για το πώς λειτουργεί. Αυτό ισχύει και για το Bootstrap.
Διαβάστε το τεκμηρίωση , παίξτε και πειραματιστείτε με τα δείγματα, πάρτε τα βασικά σωστά και απολαύστε τη δημιουργία νέων και όμορφων σχεδίων.
