Το 2011, το Twitter παρουσίασε το πλαίσιο Bootstrap. Από τότε, αυτό το πλαίσιο CSS έχει δει δύο σημαντικές επανεγγραφές, με την πιο πρόσφατη (Bootstrap 3) να κυκλοφόρησε το 2013. Το Bootstrap 3 μεταμόρφωσε τη βιβλιοθήκη CSS εφαρμόζοντας μια προσέγγιση με προτεραιότητα στο κινητό που άφησε το πλαίσιο να ανταποκρίνεται πλήρως.
Από το 2022, το Bootstrap είναι στην έκδοση πέντε και είναι ένα από τα πιο δημοφιλή πλαίσια frontend. Διαθέτει μια εκτενή λίστα με προκατασκευασμένα στοιχεία και μια εντυπωσιακή συλλογή από πρόσθετα JavaScript. Σε αυτό το άρθρο, θα μάθετε πώς να χρησιμοποιείτε το Bootstrap και να αξιοποιείτε στο έπακρο τις δυνατότητές του.
Εγκατάσταση του Bootstrap στο έργο σας
Υπάρχουν τρεις τρόποι για να χρησιμοποιήστε το Bootstrap στο έργο σας. Μπορείτε να κατεβάσετε και να φιλοξενήσετε τα αρχεία CSS και JavaScript, να τα εγκαταστήσετε στο έργο σας χρησιμοποιώντας npm ή να αντιγράψετε και να επικολλήσετε τους κατάλληλους συνδέσμους cdn στο έργο σας.
Με την προσέγγιση cdn, πρέπει να θυμάστε να τοποθετείτε τον σύνδεσμο Bootstrap πριν από οποιονδήποτε άλλο σύνδεσμο CSS στην ετικέτα κεφαλιού του αρχείου HTML σας.
Ορισμένα στοιχεία Bootstrap έχουν λειτουργικές δραστηριότητες, όπως εναλλαγή κουμπιών και τοποθέτηση που απαιτεί την εισαγωγή JavaScript και σεναρίου Popper. Έτσι, εάν σκοπεύετε να χρησιμοποιήσετε οποιαδήποτε λειτουργικά στοιχεία, θα χρειαστεί να προσθέσετε και την ετικέτα σεναρίου στο αρχείο HTML σας.
Το τελευταίο πράγμα που πρέπει να ξεκινήσετε να χρησιμοποιείτε το Bootstrap είναι το θέαση ετικέτα.
Δεδομένου ότι το Bootstrap είναι μια τεχνολογία πρώτης για κινητά, η θέαση ετικέτα θα βοηθήσει στην απόκριση του σχεδιασμού. Ένας απλός τρόπος για να χρησιμοποιήσετε το bootstrap στο έργο σας είναι απλώς να αντιγράψετε Πρότυπο εκκίνησης του Bootstrap.
Δημιουργία ιστότοπου με Bootstrap
Όταν δημιουργείτε έναν νέο ιστότοπο, ένα από τα πρώτα πράγματα που πρέπει να λάβετε υπόψη είναι η διάταξη. Μετά από αυτό, μπορείτε να μετακινηθείτε σε άλλα στοιχεία όπως κουμπιά και τυπογραφία.
Το Bootstrap έχει μια συλλογή από δομικά στοιχεία που μπορείτε να χρησιμοποιήσετε για να οργανώσετε στοιχεία σε μια ιστοσελίδα. Αυτές οι δομές διάταξης περιλαμβάνουν:
- Εμπορευματοκιβώτια
- Πλέγμα
- Στήλες
- Υδρορροές
- ορια ΑΝΤΟΧΗΣ
Χρησιμοποιώντας μια ελαφρώς τροποποιημένη έκδοση του προτύπου εκκίνησης Bootstrap, μπορείτε να αρχίσετε να περιγράφετε τη δομή της ιστοσελίδας σας και να προσθέτετε νέα στοιχεία.
Το αρχείο index.html
Απαιτούμενες μετα-ετικέτεςBootstrap CSS
Bootstrap
Ξεχωρίστε το Popper και το Bootstrap JS
Η κατηγορία Bootstrap Container
Το Bootstrap δοχείο επιθέματα τάξης, περιέχει και ευθυγραμμίζει τα στοιχεία στην ιστοσελίδα σας. Εάν σκοπεύετε να χρησιμοποιήσετε το Bootstrap's προεπιλεγμένο πλέγμα, τότε θα χρειαστεί να χρησιμοποιήσετε και το Bootstrap δοχείο τάξη. Υπάρχουν τρεις τύποι δοχείο τάξεις? δοχείο, δοχείο-ρευστό, και δοχείο-{σημείο διακοπής}. Η κλάση κοντέινερ είναι το προεπιλεγμένο κοντέινερ. ανταποκρίνεται και έχει ένα σταθερό πλάτος σε κάθε ένα από τα Bootstraps έξι σημεία διακοπής.
Τα έξι προεπιλεγμένα σημεία διακοπής του Bootstrap περιλαμβάνουν:
- Πολύ μικρό: Λιγότερο από 576 εικονοστοιχεία.
- Μικρό: Μεγαλύτερο ή ίσο με 576 px.
- Μεσαίο: Μεγαλύτερο ή ίσο με 768 px.
- Μεγάλο: Μεγαλύτερο ή ίσο με 992 px.
- X-Large: Μεγαλύτερο ή ίσο με 1200 px.
- XX-Large: Μεγαλύτερο ή ίσο με 1400 px.
Για να χρησιμοποιήσετε το Bootstrap δοχείο στο έργο σας, μπορείτε απλά να προσθέσετε την επιθυμητή κλάση κοντέινερ στο εξωτερικό div στην ιστοσελίδα σας.
Χρήση του Bootstrap's Container
τοποθετήστε τα στοιχεία του ιστότοπου εδώ Η εισαγωγή του παραπάνω κώδικα στο σώμα του υπάρχοντος αρχείου HTML θα κάνει την ιστοσελίδα σας να αποκρίνεται και θα δημιουργήσει επίσης padding σε κάθε πλευρά της ιστοσελίδας σας.
Το σύστημα Bootstrap Grid
Το πλέγμα του Bootstrap χρησιμοποιεί ένα σύστημα δώδεκα στηλών που βασίζεται σε σειρά και διάσελο κλάσεις πλέγματος, καθώς και την κατηγορία κοντέινερ. Κάθε σειρά έχει δώδεκα στήλες και οποιοδήποτε στοιχείο μπορεί να εκτείνεται σε μία ή περισσότερες από αυτές τις στήλες. Η κλάση στήλης θα υποδεικνύει πόσες στήλες πρέπει να καταλαμβάνει ένα στοιχείο. Για παράδειγμα, ένα στοιχείο που χρησιμοποιεί το συν-2 η κλάση θα εκτείνεται σε δύο στήλες, ένα στοιχείο που χρησιμοποιεί το συν-3 η κλάση θα εκτείνεται σε τρεις στήλες και ούτω καθεξής.
Το σύστημα πλέγματος Bootstrap βασίζεται στη μονάδα flexbox. Εάν μόνο δύο στήλες καταλαμβάνουν μια σειρά, θα διαιρέσουν το χώρο εξίσου μεταξύ τους. ο υδρορροή Η κλάση είναι ένα από τα δομικά στοιχεία του Bootstrap και ελέγχει την απόσταση μεταξύ κάθε στήλης στο σύστημα πλέγματος. Καθε πλέγμα Η στήλη έχει 12 εικονοστοιχεία επένδυσης και στις δύο πλευρές.
Χρησιμοποιώντας το σύστημα πλέγματος του Bootstrap
κύριο περιεχόμενο σε μια ιστοσελίδα
Αρθρο
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Η εισαγωγή του παραπάνω κώδικα στο κοντέινερ div θα δημιουργήσει ένα σύστημα πλέγματος Bootstrap τριών σειρών και δύο στηλών. Η πρώτη σειρά στο επάνω μέρος θα κρατά τη γραμμή πλοήγησης, η τρίτη σειρά στο κάτω μέρος θα κρατά το υποσέλιδο του ιστότοπου και η δεύτερη σειρά στη μέση θα περιέχει το περιεχόμενο της ιστοσελίδας. Η δεύτερη σειρά έχει δύο στήλες—το κύριο άρθρο και ένα πλάι.
Η δημιουργία ενός τοπικού αρχείου CSS και η προσθήκη ενός περιγράμματος σε κάθε τμήμα του πλέγματος θα σας επιτρέψει να το δείτε πιο καθαρά.
Το αρχείο style.css
.σειρά{
περίγραμμα: 2px μπλε στερεό.
}
.col, .col-sm-4{
περίγραμμα: 2px κόκκινο στερεό.
}
Η σύνδεση με το παραπάνω αρχείο CSS θα δημιουργήσει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:
Μια προφανής διαφορά στην παραπάνω εικόνα είναι το μέγεθος των στηλών. Συνήθως, δύο (ή περισσότερες) στήλες στη σειρά καταλαμβάνουν τον ίδιο χώρο, εκτός εάν δηλώνετε ρητά το αντίθετο. ο col-sm-4 Η κλάση στον παραπάνω κώδικα HTML διασφαλίζει ότι η δεύτερη στήλη εκτείνεται μόνο σε τέσσερις από τις δώδεκα στήλες της σειράς. ο sm στο col-sm-4 Η κλάση αντιπροσωπεύει το μικρό σημείο διακοπής, επομένως, το τμήμα στην άκρη θα καταλαμβάνει μόνο τέσσερις στήλες από το μικρό σημείο διακοπής και πάνω.
Στοιχεία Bootstrap
Αφού αποφασίσετε για τη διάταξη της ιστοσελίδας σας, το επόμενο βήμα είναι να προσθέσετε στοιχεία κατασκευής ιστότοπου, τα οποία το Bootstrap αποκαλεί στοιχεία. Η λίστα στοιχείων του Bootstrap περιλαμβάνει:
- Navbar
- Κουμπιά
- Ομάδα κουμπιών
- Ομάδα λίστας
- Καρτέλλες
- Κατάρρευση
- Αναπτυσσόμενα
Η κατηγορία Bootstrap Navbar
Κάθε γραμμή πλοήγησης Bootstrap απαιτεί το Navbar τάξη. Απαιτούν επίσης τη χρήση του ή αντιστοίχιση της λέξης-κλειδιού «πλοήγησης» στο Bootstrap ρόλος χαρακτηριστικό στη γονική γραμμή πλοήγησης div. Για να κάνετε τη γραμμή πλοήγησης να αποκρίνεται, θα χρειαστεί να χρησιμοποιήσετε το σύμπτυξη προσθήκης JavaScript.
Το Bootstrap Navbar η τάξη χρησιμοποιεί ένα άρια-ρεύμα χαρακτηριστικό που παίρνει την τιμή "page" για να υποδείξει την τρέχουσα σελίδα ή "true" για να υποδείξει την τρέχουσα ενότητα μιας ιστοσελίδας. Η τιμή που θα εκχωρήσετε θα εξαρτηθεί από τη δομή του ιστότοπού σας (μονοσελίδα ή πολλαπλές σελίδες). Θα πρέπει επίσης να χρησιμοποιήσετε το ενεργή τάξη για να υποδείξετε την τρέχουσα σελίδα ή ενότητα.
Χρησιμοποιώντας τη γραμμή πλοήγησης του Bootstrap
Αντικατάσταση της πλοήγησης σειρά του Bootstrap πλέγμα με τον παραπάνω κώδικα θα δημιουργήσει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:
Υπάρχουν πολλές άλλες σημαντικές κλάσεις και χαρακτηριστικά Bootstrap στον παραπάνω κώδικα, όπως το navbar-μάρκα τάξη, η οποία στοχεύει στην ενότητα με το λογότυπό σας Navbar. ο Navbar ανταποκρίνεται επίσης πλήρως χάρη στο σύμπτυξη προσθήκης JavaScript.
Αποκριτική γραμμή πλοήγησης
Ίσως θυμάστε ότι το Bootstrap έχει έξι προεπιλογές ορια ΑΝΤΟΧΗΣ και ένα από αυτά τα σημεία διακοπής είναι μεγάλο (lg). ο navbar-expand-lg τάξη στο παραπάνω επεκτείνεται σε μια οριζόντια λίστα στοιχείων πλοήγησης στο μεγάλο σημείο διακοπής και πάνω, και αυτή η λίστα επιστρέφει σε ένα κουμπί σε οποιοδήποτε σημείο διακοπής κάτω από το μεγάλο.
Εάν θέλετε να μάθετε περισσότερα σχετικά με τη δημιουργία ιστοσελίδων με απόκριση, έχουμε συγκεντρώσει ένα κομμάτι που περιγράφει πώς να το κάνετε αυτό με ερωτήματα πολυμέσων σε HTML και CSS.
Το στοιχείο κουμπιού εκκίνησης
Το Bootstrap κουμπί συστατικό χρησιμοποιεί το και απαιτεί να ορίσετε το τύπος αποδίδουν σε «κουμπί».
Το Bootstrap έχει διάφορους τύπους κουμπιών. Για να δημιουργήσετε το πιο συμβατικό κουμπί που θα χρησιμοποιούσατε το btn τάξη, αλλά για να δημιουργήσετε ένα κουμπί χάμπουργκερ όπως στον παραπάνω κώδικα θα χρησιμοποιούσατε το navbar-toggle τάξη.
Πότε πρέπει να χρησιμοποιήσετε το Bootstrap;
Το Bootstrap είναι γνωστό ως ένα από τα πιο δημοφιλή πλαίσια CSS επειδή είναι πρωτοπόρος. Πολύ πριν ο αποκριτικός σχεδιασμός ήταν τόσο συνηθισμένος στην ανάπτυξη λογισμικού, το Bootstrap μετατράπηκε σε ένα πλήρως ανταποκρινόμενο πλαίσιο.
Με τα χρόνια, το Bootstrap συνέχισε να προοδεύει και να βελτιώνεται, καθιστώντας το νούμερο ένα επιλογή για κορυφαίες εταιρείες, όπως το Twitter και το Spotify. Ωστόσο, δεν θα είναι πάντα η καλύτερη επιλογή για τις ανάγκες ανάπτυξης λογισμικού σας. Για παράδειγμα, εάν δημιουργείτε μια εφαρμογή React, υπάρχει ένα σύστημα σχεδιασμού που ονομάζεται MUI που είναι προσαρμοσμένο για εφαρμογές React.
Το Material-UI έχει νέο όνομα και στοχεύει στη δημιουργία ενός νέου συστήματος σχεδίασης εναλλακτικό του Material Design. Δείτε πώς μπορείτε να χρησιμοποιήσετε το MUI σε έργα ReactJS.
Διαβάστε Επόμενο
- Προγραμματισμός
- Κελάδημα
- Συμβουλές κωδικοποίησης
- Προγραμματισμός
- Εργαλεία Προγραμματισμού
Η Kadeisha Kean είναι προγραμματιστής λογισμικού Full-Stack και συγγραφέας τεχνικής/τεχνολογίας. Έχει τη διακριτή ικανότητα να απλοποιεί μερικές από τις πιο σύνθετες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί να γίνει εύκολα κατανοητό από κάθε αρχάριο της τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και το ταξίδι στον κόσμο (μέσω ντοκιμαντέρ).
Εγγραφείτε στο ενημερωτικό μας δελτίο
Εγγραφείτε στο ενημερωτικό μας δελτίο για συμβουλές τεχνολογίας, κριτικές, δωρεάν ebook και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για να εγγραφείτε