in English

Πλησιάζω

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

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

Βλέπετε κάτι που δεν ακούγεται σωστά ή ίσως θα μπορούσε να γίνει καλύτερα; Ανοίξτε ένα θέμα —θα θέλαμε να το συζητήσουμε μαζί σας.

Περίληψη

Θα βουτήξουμε σε καθένα από αυτά περισσότερο καθ' όλη τη διάρκεια, αλλά σε υψηλό επίπεδο, εδώ είναι αυτό που καθοδηγεί την προσέγγισή μας.

  • Τα στοιχεία θα πρέπει να αποκρίνονται και να προστατεύονται από κινητά
  • Τα στοιχεία πρέπει να είναι κατασκευασμένα με βασική κλάση και να επεκτείνονται μέσω κλάσεων τροποποιητών
  • Οι καταστάσεις των στοιχείων θα πρέπει να υπακούουν σε μια κοινή κλίμακα δείκτη z
  • Όποτε είναι δυνατόν, προτιμήστε μια υλοποίηση HTML και CSS από την JavaScript
  • Όποτε είναι δυνατόν, χρησιμοποιήστε βοηθητικά προγράμματα πάνω από προσαρμοσμένα στυλ
  • Όποτε είναι δυνατόν, αποφύγετε την επιβολή αυστηρών απαιτήσεων HTML (παιδικοί επιλογείς)

Ευαίσθητος

Τα στυλ απόκρισης του Bootstrap είναι φτιαγμένα για να ανταποκρίνονται, μια προσέγγιση που συχνά αναφέρεται ως mobile-first . Χρησιμοποιούμε αυτόν τον όρο στα έγγραφά μας και συμφωνούμε σε μεγάλο βαθμό με αυτόν, αλλά μερικές φορές μπορεί να είναι πολύ ευρύς. Αν και δεν πρέπει κάθε στοιχείο να ανταποκρίνεται εξ ολοκλήρου στο Bootstrap, αυτή η αποκριτική προσέγγιση αφορά τη μείωση των παρακάμψεων CSS, ωθώντας σας να προσθέσετε στυλ καθώς η θύρα προβολής γίνεται μεγαλύτερη.

Σε όλο το Bootstrap, θα το δείτε πιο ξεκάθαρα στα ερωτήματά μας για τα μέσα. Στις περισσότερες περιπτώσεις, χρησιμοποιούμε min-widthερωτήματα που αρχίζουν να εφαρμόζονται σε ένα συγκεκριμένο σημείο διακοπής και συνεχίζονται στα υψηλότερα σημεία διακοπής. Για παράδειγμα, το α .d-noneισχύει από min-width: 0το άπειρο. Από την άλλη πλευρά, το α .d-md-noneισχύει από το μεσαίο σημείο διακοπής και πάνω.

Κατά καιρούς θα χρησιμοποιούμε max-widthόταν το απαιτεί η εγγενής πολυπλοκότητα ενός στοιχείου. Μερικές φορές, αυτές οι παρακάμψεις είναι λειτουργικά και διανοητικά πιο σαφείς στην εφαρμογή και υποστήριξη από την επανεγγραφή της βασικής λειτουργικότητας από τα στοιχεία μας. Προσπαθούμε να περιορίσουμε αυτή την προσέγγιση, αλλά θα τη χρησιμοποιούμε από καιρό σε καιρό.

Τάξεις

Εκτός από το Reboot μας, ένα φύλλο στυλ κανονικοποίησης μεταξύ προγραμμάτων περιήγησης, όλα τα στυλ μας στοχεύουν στη χρήση κλάσεων ως επιλογείς. Αυτό σημαίνει την απομάκρυνση από επιλογείς τύπου (π.χ., input[type="text"]) και ξένες γονικές κατηγορίες (π.χ., .parent .child) που κάνουν τα στυλ πολύ συγκεκριμένα για να παρακάμπτονται εύκολα.

Ως εκ τούτου, τα εξαρτήματα θα πρέπει να είναι κατασκευασμένα με μια βασική κλάση που να φιλοξενεί κοινά, που δεν πρέπει να παρακαμφθούν ζεύγη ιδιοτήτων-τιμών. Για παράδειγμα, .btnκαι .btn-primary. Χρησιμοποιούμε .btnγια όλα τα κοινά στυλ όπως display, padding, και border-width. Στη συνέχεια χρησιμοποιούμε τροποποιητές όπως .btn-primaryγια να προσθέσουμε το χρώμα, το χρώμα φόντου, το χρώμα περιγράμματος κ.λπ.

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

ζ-δείκτες κλίμακες

Υπάρχουν δύο z-indexκλίμακες στο Bootstrap—στοιχεία σε ένα στοιχείο και στοιχεία επικάλυψης.

Συστατικά στοιχεία

  • Ορισμένα στοιχεία στο Bootstrap είναι κατασκευασμένα με αλληλοκαλυπτόμενα στοιχεία για την αποφυγή διπλών περιγραμμάτων χωρίς τροποποίηση της borderιδιότητας. Για παράδειγμα, ομάδες κουμπιών, ομάδες εισόδου και σελιδοποίηση.
  • Αυτά τα εξαρτήματα μοιράζονται μια τυπική z-indexκλίμακα 0διαμέσου 3.
  • 0είναι προεπιλογή (αρχική), 1είναι :hover, 2είναι :active/ .active, και 3είναι :focus.
  • Αυτή η προσέγγιση ταιριάζει με τις προσδοκίες μας για την υψηλότερη προτεραιότητα χρήστη. Εάν ένα στοιχείο είναι εστιασμένο, είναι στη θέα και στην προσοχή του χρήστη. Τα ενεργά στοιχεία είναι τα δεύτερα υψηλότερα επειδή υποδεικνύουν την κατάσταση. Το δείκτη του ποντικιού είναι το τρίτο υψηλότερο επειδή υποδεικνύει την πρόθεση του χρήστη, αλλά σχεδόν οτιδήποτε μπορεί να τοποθετηθεί.

Στοιχεία επικάλυψης

Το Bootstrap περιλαμβάνει διάφορα στοιχεία που λειτουργούν ως επικάλυψη κάποιου είδους. Αυτό περιλαμβάνει, κατά σειρά υψηλότερου z-index, αναπτυσσόμενα μενού, σταθερές και κολλώδεις γραμμές πλοήγησης, modal, συμβουλές εργαλείων και popovers. Αυτά τα στοιχεία έχουν τη δική τους z-indexκλίμακα που αρχίζει στο 1000. Αυτός ο αρχικός αριθμός επιλέχθηκε αυθαίρετα και χρησιμεύει ως ένα μικρό buffer μεταξύ των στυλ μας και των προσαρμοσμένων στυλ του έργου σας.

Κάθε στοιχείο επικάλυψης αυξάνει z-indexελαφρώς την τιμή του με τέτοιο τρόπο ώστε οι κοινές αρχές διεπαφής χρήστη να επιτρέπουν τα στοιχεία που εστιάζουν στον χρήστη ή τα αιωρούμενα στοιχεία να παραμένουν πάντα ορατά. Για παράδειγμα, ένα modal είναι ο αποκλεισμός εγγράφων (π.χ., δεν μπορείτε να κάνετε καμία άλλη ενέργεια εκτός από την ενέργεια του modal), επομένως το βάζουμε πάνω από τις γραμμές πλοήγησης.

Μάθετε περισσότερα για αυτό στη z-indexσελίδα διάταξης μας .

HTML και CSS πάνω από JS

Όποτε είναι δυνατόν, προτιμούμε να γράφουμε HTML και CSS έναντι JavaScript. Γενικά, το HTML και το CSS είναι πιο παραγωγικά και προσβάσιμα σε περισσότερους ανθρώπους όλων των διαφορετικών επιπέδων εμπειρίας. Το HTML και το CSS είναι επίσης πιο γρήγορα στο πρόγραμμα περιήγησής σας από το JavaScript και το πρόγραμμα περιήγησής σας παρέχει γενικά μεγάλη λειτουργικότητα για εσάς.

Αυτή η αρχή είναι η πρώτης τάξεως JavaScript API που χρησιμοποιεί dataχαρακτηριστικά. Δεν χρειάζεται να γράψετε σχεδόν οποιαδήποτε JavaScript για να χρησιμοποιήσετε τα πρόσθετα JavaScript. Αντίθετα, γράψτε HTML. Διαβάστε περισσότερα για αυτό στη σελίδα επισκόπησης JavaScript .

Τέλος, τα στυλ μας βασίζονται στις θεμελιώδεις συμπεριφορές κοινών στοιχείων ιστού. Όποτε είναι δυνατόν, προτιμούμε να χρησιμοποιούμε αυτό που παρέχει το πρόγραμμα περιήγησης. Για παράδειγμα, μπορείτε να βάλετε μια .btnκλάση σε σχεδόν οποιοδήποτε στοιχείο, αλλά τα περισσότερα στοιχεία δεν παρέχουν καμία σημασιολογική τιμή ή λειτουργία προγράμματος περιήγησης. Αντίθετα, χρησιμοποιούμε <button>s και <a>s.

Το ίδιο ισχύει και για πιο σύνθετα εξαρτήματα. Ενώ θα μπορούσαμε να γράψουμε το δικό μας πρόσθετο επικύρωσης φόρμας για να προσθέσουμε κλάσεις σε ένα γονικό στοιχείο με βάση την κατάσταση μιας εισαγωγής, επιτρέποντάς μας έτσι να διαμορφώσουμε το κείμενο ας πούμε κόκκινο, προτιμούμε να χρησιμοποιούμε τα :valid/ :invalidψευδοστοιχεία που μας παρέχει κάθε πρόγραμμα περιήγησης.

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

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

Αν και δεν είναι πάντα δυνατό, προσπαθούμε να αποφύγουμε να είμαστε υπερβολικά δογματικοί στις απαιτήσεις HTML για τα στοιχεία. Έτσι, εστιάζουμε σε μεμονωμένες τάξεις στους επιλογείς CSS μας και προσπαθούμε να αποφύγουμε τους επιλογείς άμεσων παιδιών ( >). Αυτό σας δίνει μεγαλύτερη ευελιξία στην υλοποίησή σας και βοηθά να διατηρήσουμε το CSS μας πιο απλό και λιγότερο συγκεκριμένο.