Εισαγωγή
Ξεκινήστε με το Bootstrap, το πιο δημοφιλές πλαίσιο στον κόσμο για τη δημιουργία ιστοτόπων με απόκριση και προτεραιότητα για κινητά, με jsDelivr και μια αρχική σελίδα προτύπου.
Θέλετε να προσθέσετε γρήγορα το Bootstrap στο έργο σας; Χρησιμοποιήστε το jsDelivr, που παρέχεται δωρεάν από τους ανθρώπους στο jsDelivr. Χρησιμοποιείτε έναν διαχειριστή πακέτων ή χρειάζεστε λήψη των αρχείων πηγής; Μεταβείτε στη σελίδα λήψεων.
Αντιγράψτε-επικολλήστε το φύλλο στυλ <link>
στο δικό σας <head>
πριν από όλα τα άλλα φύλλα στυλ για να φορτώσετε το CSS μας.
Πολλά από τα στοιχεία μας απαιτούν τη χρήση JavaScript για να λειτουργήσουν. Συγκεκριμένα, απαιτούν jQuery , Popper.js και τα δικά μας πρόσθετα JavaScript. Τοποθετήστε τα παρακάτω <script>
s κοντά στο τέλος των σελίδων σας, ακριβώς πριν από την </body>
ετικέτα κλεισίματος, για να τα ενεργοποιήσετε. Το jQuery πρέπει να έρθει πρώτα, μετά το Popper.js και μετά τα πρόσθετα JavaScript.
Χρησιμοποιούμε τη λεπτή κατασκευή του jQuery , αλλά υποστηρίζεται και η πλήρης έκδοση.
Αναρωτιέστε ποια στοιχεία απαιτούν ρητά το jQuery, το JS μας και το Popper.js; Κάντε κλικ στον σύνδεσμο εμφάνιση στοιχείων παρακάτω. Εάν δεν είστε καθόλου σίγουροι για τη γενική δομή της σελίδας, συνεχίστε να διαβάζετε για ένα παράδειγμα προτύπου σελίδας.
Το δικό μας bootstrap.bundle.js
και bootstrap.bundle.min.js
περιλαμβάνει το Popper , αλλά όχι το jQuery . Για περισσότερες πληροφορίες σχετικά με το τι περιλαμβάνεται στο Bootstrap, ανατρέξτε στην ενότητα περιεχομένων μας .
Εμφάνιση στοιχείων που απαιτούν JavaScript
- Ειδοποιήσεις για απόρριψη
- Κουμπιά για εναλλαγή καταστάσεων και πλαίσιο ελέγχου/λειτουργικότητα ραδιοφώνου
- Καρουζέλ για όλες τις συμπεριφορές, τα χειριστήρια και τις ενδείξεις της διαφάνειας
- Σύμπτυξη για εναλλαγή ορατότητας περιεχομένου
- Αναπτυσσόμενα μενού για εμφάνιση και τοποθέτηση (απαιτείται επίσης το Popper.js )
- Τρόποι για εμφάνιση, τοποθέτηση και συμπεριφορά κύλισης
- Γραμμή πλοήγησης για την επέκταση της προσθήκης Collapse για την εφαρμογή συμπεριφοράς απόκρισης
- Επεξηγήσεις εργαλείων και popover για εμφάνιση και τοποθέτηση (απαιτείται επίσης το Popper.js )
- Scrollspy για συμπεριφορά κύλισης και ενημερώσεις πλοήγησης
Βεβαιωθείτε ότι έχετε ρυθμίσει τις σελίδες σας με τα πιο πρόσφατα πρότυπα σχεδίασης και ανάπτυξης. Αυτό σημαίνει τη χρήση ενός doctype HTML5 και τη συμπερίληψη μιας μετα-ετικέτας θύρας προβολής για σωστές αποκριτικές συμπεριφορές. Συνδυάστε τα όλα μαζί και οι σελίδες σας θα πρέπει να μοιάζουν με αυτό:
Αυτό είναι το μόνο που χρειάζεστε για τις συνολικές απαιτήσεις σελίδας. Επισκεφτείτε τα έγγραφα διάταξης ή τα επίσημα παραδείγματα μας για να ξεκινήσετε τη διάταξη του περιεχομένου και των στοιχείων του ιστότοπού σας.
Το Bootstrap χρησιμοποιεί μια χούφτα σημαντικών παγκόσμιων στυλ και ρυθμίσεων που θα πρέπει να γνωρίζετε κατά τη χρήση του, τα οποία είναι όλα σχεδόν αποκλειστικά προσανατολισμένα στην κανονικοποίηση των στυλ μεταξύ των προγραμμάτων περιήγησης. Ας βουτήξουμε.
Το Bootstrap απαιτεί τη χρήση του τύπου HTML5. Χωρίς αυτό, θα δείτε κάποιο funky ημιτελές στυλ, αλλά η συμπερίληψή του δεν θα πρέπει να προκαλεί κανέναν σημαντικό λόξυγκα.
Το Bootstrap αναπτύσσεται πρώτα για κινητά , μια στρατηγική κατά την οποία βελτιστοποιούμε πρώτα τον κώδικα για κινητές συσκευές και, στη συνέχεια, κλιμακώνουμε τα στοιχεία ανάλογα με τις ανάγκες, χρησιμοποιώντας ερωτήματα μέσων CSS. Για να διασφαλίσετε τη σωστή απόδοση και ζουμ αφής για όλες τις συσκευές, προσθέστε τη μετα-ετικέτα θύρας προβολής με απόκριση στο <head>
.
Μπορείτε να δείτε ένα παράδειγμα αυτού σε δράση στο πρότυπο εκκίνησης .
Για πιο απλό προσδιορισμό μεγέθους στο CSS, αλλάζουμε την καθολική box-sizing
τιμή από content-box
σε border-box
. Αυτό διασφαλίζει padding
ότι δεν επηρεάζει το τελικό υπολογισμένο πλάτος ενός στοιχείου, αλλά μπορεί να προκαλέσει προβλήματα με κάποιο λογισμικό τρίτων, όπως οι Χάρτες Google και η Μηχανή Προσαρμοσμένης Αναζήτησης Google.
Στη σπάνια περίπτωση που χρειαστεί να το παρακάμψετε, χρησιμοποιήστε κάτι σαν το εξής:
Με το παραπάνω απόσπασμα, τα ένθετα στοιχεία—συμπεριλαμβανομένου του περιεχομένου που δημιουργείται μέσω ::before
και— ::after
θα κληρονομήσουν όλα τα καθορισμένα box-sizing
για αυτό .selector-for-some-widget
.
Μάθετε περισσότερα σχετικά με το μοντέλο κουτιού και το μέγεθος στο CSS Tricks .
Για βελτιωμένη απόδοση μεταξύ προγραμμάτων περιήγησης, χρησιμοποιούμε την Επανεκκίνηση για να διορθώσουμε τις ασυνέπειες μεταξύ των προγραμμάτων περιήγησης και των συσκευών, παρέχοντας παράλληλα ελαφρώς πιο πιστές επαναφορές σε κοινά στοιχεία HTML.
Μείνετε ε��ημερωμένοι για την ανάπτυξη του Bootstrap και απευθυνθείτε στην κοινότητα με αυτούς τους χρήσιμους πόρους.
- Ακολουθήστε το @getbootstrap στο Twitter .
- Διαβάστε και εγγραφείτε στο The Official Bootstrap Blog .
- Συνομιλήστε με άλλους Bootstrappers στο IRC. Στο
irc.freenode.net
διακομιστή, στο##bootstrap
κανάλι. - Μπορείτε να βρείτε βοήθεια για την υλοποίηση στο Stack Overflow (με ετικέτα
bootstrap-4
). - Οι προγραμματιστές θα πρέπει να χρησιμοποιούν τη λέξη-κλειδί
bootstrap
σε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.
Μπορείτε επίσης να ακολουθήσετε το @getbootstrap στο Twitter για τα πιο πρόσφατα κουτσομπολιά και φοβερά μουσικά βίντεο.