Πλησιάζω

Μάθετε για τις κατευθυντήριες αρχές, τις στρατηγικές και τις τεχνικές που χρησιμοποιούνται για τη δημιουργία και τη συντήρηση του 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

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

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

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

Χρησιμοποιούμε vnu-jar για την επιβολή τυπικού και σημασιολογικού HTML, καθώς και για τον εντοπισμό κοινών σφαλμάτων.