Διεπαφή χρήστη με βάση το Twitter Bootstrap για αρχάριους. Εγκατάσταση bootstrap Επιλογή των απαραίτητων στοιχείων
Πριν τη λήψη, βεβαιωθείτε ότι έχετε ένα πρόγραμμα επεξεργασίας κώδικα (συνιστούμε το Sublime Text 3) και κάποιες γνώσεις HTML και CSS. Εδώ δεν θα αγγίξουμε τα αρχεία προέλευσης, αλλά μπορείτε πάντα να τα κατεβάσετε και να τα μελετήσετε μόνοι σας. Θα εστιάσουμε την προσοχή μας στο να ξεκινήσουμε με τα μεταγλωττισμένα αρχεία Bootstrap.
Φόρτωση μεταγλωττισμένων αρχείωνΟ πιο γρήγορος τρόπος για να ξεκινήσετε: λάβετε μεταγλωττισμένες και ελαχιστοποιημένες εκδόσεις των CSS, JS και εικόνων μας. Δεν υπάρχουν έγγραφα ή αρχεία πηγής.
2. Δομή αρχείουΣτα ληφθέντα αρχεία θα βρείτε την ακόλουθη δομή και περιεχόμενο, ομαδοποιημένα λογικά κατά κοινές ιδιότητες και που περιέχουν ελαχιστοποιημένες και μεταγλωττισμένες εκδόσεις.
Μετά τη λήψη, αποσυμπιέστε τον συμπιεσμένο φάκελο για να δείτε τη δομή του (μεταγλωττισμένου) Bootstrap. Θα πρέπει να είναι κάπως έτσι:
bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . ελάχ. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . ελάχ. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README. mdΑυτή είναι η βασική μορφή του Bootstrap: μεταγλωττισμένα αρχεία για γρήγορη και εύκολη χρήση σχεδόν σε οποιοδήποτε έργο Web. Σας παρέχουμε μεταγλωττισμένα CSS και JS (bootstrap.*), καθώς και μεταγλωττισμένα και ελαχιστοποιημένα CSS και JS (bootstrap.min.*). Τα αρχεία εικόνας συμπιέζονται χρησιμοποιώντας το ImageOptim, μια εφαρμογή Mac για τη συμπίεση εικόνων σε PNG.
Λάβετε υπόψη ότι όλα τα πρόσθετα JavaScript απαιτούν jQuery.
3. Τι περιλαμβάνεταιΤο Bootstrap είναι εξοπλισμένο με HTML, CSS και JS για κάθε είδους εργασία, όλα παρατίθενται σε κατηγορίες που μπορείτε να βρείτε στο επάνω μέρος της σελίδας.
Ενότητες εγγράφου Υποστηριζόμενα στοιχείαΚοινά στυλ σώματος για επαναφορά του τύπου και του φόντου, στυλ συνδέσμων, πλέγμα προτύπων και δύο απλά στοιχεία σήμανσης.
Στυλ CSSΣτυλ για κοινά στοιχεία HTML: σχέδιο, κώδικας, πίνακες, φόρμες και κουμπιά. Περιλαμβάνει επίσης Glyphicons, ένα υπέροχο σύνολο εικονιδίων.
ΣυστατικάΒασικά στυλ για απλά στοιχεία διεπαφής: καρτέλες και κουμπιά, γραμμές πλοήγησης, μηνύματα, κεφαλίδες σελίδας κ.λπ.
Javascript pluginsΌπως τα στοιχεία, αυτά τα πρόσθετα Javascript είναι διαδραστικά στοιχεία για συμβουλές εργαλείων, μπλοκ πληροφοριών, τροπικά στοιχεία και πολλά άλλα.
Κατάλογος εξαρτημάτωνΜαζί, τα στοιχεία Javascript και οι προσθήκες περιέχουν τα ακόλουθα στοιχεία διεπαφής:
- Ομάδες κουμπιών
- Αναπτυσσόμενες λίστες κουμπιών
- Καρτέλες πλοήγησης, κουμπιά και λίστες
- Μπάρα πλοήγησης
- Συντομεύσεις
- Σήματα
- Επικεφαλίδες σελίδας και το στοιχείο του ήρωα
- Μινιατούρες
- Μηνύματα
- Δείκτες διαδικασίας
- Τροπικά στοιχεία
- Αναπτυσσόμενες λίστες
- Συμβουλές εργαλείων
- Μπλοκ πληροφοριών
- Στοιχείο "Ακορντεόν"
- Στοιχείο καρουζέλ
- Είσοδος πληκτρολογίου μπροστά
Μετά από μια σύντομη εισαγωγή, θα επικεντρωθούμε στη χρήση του Bootstrap. Για να γίνει αυτό, θα χρησιμοποιήσουμε ένα βασικό πρότυπο HTML που περιλαμβάνει όλα τα στοιχεία που αναφέρονται στο .
Έτσι μοιάζει ένα τυπικό αρχείο HTML:
Για να δημιουργήσετε ένα πρότυπο Bootstrap όπως αυτό, απλώς επισυνάψτε τα κατάλληλα αρχεία CSS και JS:
Και όλα είναι έτοιμα! Προσθέτοντας αυτά τα δύο αρχεία, μπορείτε να αναπτύξετε έναν ιστότοπο ή μια εφαρμογή χρησιμοποιώντας το Bootstrap.
Γειά σου! Σε αυτό το άρθρο θα σας πω πώς να εγκαταστήσετε και να συνδέσετε το πλαίσιο Bootstrap. Μπορείτε να διαβάσετε τι είναι το Bootstrap.
Έχω ήδη πει πολλά για την τυπική εγκατάσταση σε προηγούμενα άρθρα. Όλα είναι απλά εδώ. Πηγαίνουμε στον επίσημο ιστότοπο getbootstrap.com, κάνουμε κλικ στο στοιχείο Ξεκινώντας και επιλέγουμε την πρώτη επιλογή. Έτσι, κατεβάζουμε την πλήρη έκδοση του bootstrap με όλα τα στοιχεία js και css.
Το Bootstrap CDN είναι μια ευκαιρία να συνδέσετε το πλαίσιο από έναν αποθηκευτικό χώρο CDN χωρίς να κάνετε λήψη των αρχείων του στον υπολογιστή σας. Φυσικά, σε αυτή την περίπτωση δεν μπορεί να γίνει λόγος για κάποια προσαρμογή.
Προσαρμογή πλαισίουΑλλά το γεγονός είναι ότι το bootstrap περιέχει πολλά στοιχεία από προεπιλογή και μερικά από αυτά μπορεί απλώς να μην είναι χρήσιμα για εσάς κατά την ανάπτυξη ενός συγκεκριμένου ιστότοπου. Για παράδειγμα, σχεδιάζετε ένα ηλεκτρονικό κατάστημα. Μπορεί να μην χρειάζεστε modals και συμβουλές εργαλείων και μπορεί να μην χρειάζεστε πολλά από τα στοιχεία css. Σε αυτήν την περίπτωση, θα ήταν φρόνιμο να μην συμπεριληφθούν αυτά τα στοιχεία στο πλαίσιο.
Ή δημιουργείτε ένα απλό blog. Ας υποθέσουμε ότι δεν χρειάζεστε πραγματικά τίποτα εκεί, έτσι μπορείτε να αφήσετε μόνο το πλέγμα και μερικά από τα πιο σημαντικά εξαρτήματα.
Η επιλογή μόνο αυτού που χρειάζεστε είναι μια επαγγελματική προσέγγιση για τη δημιουργία ιστοσελίδων και τη χρήση του Bootstrap. Από προεπιλογή, η μη συμπιεσμένη έκδοση των στυλ CSS του πλαισίου στην τελευταία έκδοση ζυγίζει 143 kilobyte. Και τα σενάρια είναι περισσότερα από 60 kilobyte. Ναι, εάν συμπιέσετε τον κώδικα, μπορείτε να μειώσετε το βάρος κατά 20-40%, αλλά και πάλι τα αρχεία δεν θα είναι τα ελαφρύτερα.
Εάν, για παράδειγμα, απενεργοποιήσετε όλα τα στοιχεία και αφήσετε μόνο το πλέγμα (αυτό γίνεται πολύ συχνά), τότε το βάρος του css θα είναι μόνο 15-20 kilobyte και σε συμπιεσμένη μορφή άλλα δύο κιλομπάιτ λιγότερα. Με αυτόν τον τρόπο θα επιτύχετε τη μέγιστη ταχύτητα και βελτιστοποίηση του έργου σας.
Εντάξει, αυτό ήταν απλώς μια θεωρία. Για να προσαρμόσετε το πλαίσιο, επισκεφτείτε τον ίδιο επίσημο ιστότοπο και μεταβείτε στο Προσαρμογή.
Επιλέγοντας τα απαραίτητα εξαρτήματαΤο πρώτο βήμα εδώ είναι να διαμορφώσετε τα στοιχεία που θέλετε να συμπεριλάβετε στην έκδοση του Bootstrap. Ας ξεκινήσουμε με το CSS:
Στυλ πολυμέσων εκτύπωσης – ερωτήματα πολυμέσων για εκτύπωση. Εάν δεν σκοπεύετε να εκτυπώσετε σελίδες ιστότοπου, μπορείτε να το απενεργοποιήσετε.
Η τυπογραφία, ο κώδικας, οι πίνακες, οι φόρμες και τα κουμπιά είναι όλα τα πράγματα που μπορείτε να διαμορφώσετε μόνοι σας στο CSS, αν θέλετε πραγματικά. Φυσικά, αυτό θα πάρει χρόνο, αλλά αν ο σχεδιασμός των στοιχείων σας είναι πολύ διαφορετικός από αυτό που προσφέρει το πλαίσιο από προεπιλογή, μπορείτε να απενεργοποιήσετε όλα αυτά τα στυλ CSS και να τα γράψετε μόνοι σας.
Το Grid System είναι στην πραγματικότητα ένα πλέγμα. Δεν βλέπω κανένα νόημα να το απενεργοποιήσω ποτέ, γιατί αυτή είναι η κύρια δύναμη του πλαισίου. Χάρη στο πλέγμα μπορείτε να προσαρμόσετε εύκολα τα πρότυπα σε οποιαδήποτε συσκευή, και σήμερα στην εποχή της κίνησης από κινητά αυτό είναι εξαιρετικά σημαντικό. Δεν το απενεργοποιούμε σε καμία περίπτωση.
Αποκριτικά βοηθητικά προγράμματα – προσαρμοστικά βοηθητικά προγράμματα, συνιστώ επίσης να μην τα απενεργοποιείτε ποτέ. Θα μιλήσουμε για προσαρμοστικά βοηθητικά προγράμματα στο επόμενο άρθρο, όπου θα δούμε αναλυτικά το σύστημα πλέγματος. Αυτές είναι κλάσεις που σας επιτρέπουν να αποκρύψετε ένα στοιχείο ή να το κάνετε ορατό σε ένα συγκεκριμένο πλάτος οθόνης. Πολύ βολικό και χρήσιμο.
Αυτά είναι, για παράδειγμα, πράγματα όπως ομάδες λιστών, γραμμές κουμπιών, εικονίδια, πίνακες, ειδοποιήσεις, σελιδοποίηση, ψίχουλα κ.λπ. Μπορείτε επίσης να απενεργοποιήσετε τη γραμματοσειρά του εικονιδίου. Αυτό αξίζει να το κάνετε στην περίπτωση που δεν χρειάζεστε καθόλου εικονίδια στον ιστότοπο ή συνδέετε ένα άλλο σετ. Στην πραγματικότητα, θα πρέπει να καθίσετε και να σκεφτείτε τι χρειάζεστε από όλα τα εξαρτήματα που παρουσιάζονται και τι όχι. Κάθε μεμονωμένος ιστότοπος θα έχει το δικό του σύνολο, επειδή κάθε τοποθεσία έχει διαφορετικό σχεδιασμό και λειτουργικότητα.
Στοιχεία Javascript
Αυτά είναι αναπτυσσόμενα μενού, συμβουλές εργαλείων, τροπικά παράθυρα και ρυθμιστικά. Εάν δεν χρειάζεστε τίποτα από αυτά, απενεργοποιήστε το. Σε ορισμένες περιπτώσεις, όλα τα στοιχεία μπορούν πραγματικά να φανούν χρήσιμα όταν ο ιστότοπός σας έχει ένα αναπτυσσόμενο μενού, ένα ρυθμιστικό στην κύρια σελίδα και παράθυρα τροπικών στοιχείων. Σε ορισμένες περιπτώσεις, το πολύ 1-2 στοιχεία μπορεί να είναι χρήσιμα, τότε δεν χρειάζεται να επιμηκύνετε τον κώδικα, να απενεργοποιήσετε τα περιττά στοιχεία.
Πρόσθετα JqueryΕδώ μπορείτε να απενεργοποιήσετε τα πρόσθετα της βιβλιοθήκης jquery που βοηθούν τα στοιχεία javascript να λειτουργούν σωστά. Αντίστοιχα, εάν δεν χρησιμοποιείτε ρυθμιστικό στον ιστότοπό σας, τότε δεν χρειάζεστε πρόσθετο για τη δημιουργία καρουζέλ, εάν δεν χρειάζεστε συμβουλές εργαλείου, απενεργοποιήστε το tooltips.js κ.λπ.
Η προσθήκη scrollspy παρακολουθεί τη θέση του κειμένου και, ανάλογα με αυτό, επισημαίνει ένα ή άλλο στοιχείο μενού. Συνήθως μια τέτοια δυνατότητα χρειάζεται στις σελίδες προορισμού· πρακτικά δεν την έχω δει ποτέ σε κανονικούς ιστότοπους. Και ούτω καθεξής. Κοιτάξτε καλά τι χρειάζεστε και τι όχι.
Λιγότερες μεταβλητέςΣτη συνέχεια, ένα τεράστιο αντικείμενο θα ανοίξει μπροστά σας, στο οποίο θα υπάρχουν πολλά υποστοιχεία με ρυθμίσεις για τις λιγότερες μεταβλητές. Εδώ μπορείτε να αλλάξετε σχεδόν τα πάντα: χρώματα, μεγέθη γραμματοσειρών, σημεία διακοπής, αριθμό στηλών στο πλέγμα, εσοχές κ.λπ.
Φυσικά, για να το κάνετε αυτό πρέπει να γνωρίζετε τουλάχιστον τα βασικά του Less ή τουλάχιστον να πλοηγηθείτε διαισθητικά σε αυτές τις φόρμες.
Για παράδειγμα, αν δείτε τη μεταβλητή @font-family-base, τότε πρέπει να καταλάβετε τουλάχιστον διαισθητικά ότι είναι υπεύθυνη για το όνομα της γραμματοσειράς, η οποία είναι η βασική γραμματοσειρά στον ιστότοπο. Λοιπόν, η μεταβλητή @font-size-base ορίζει το βασικό μέγεθος γραμματοσειράς. Από προεπιλογή στο bootstrap είναι 14 pixel.
Μπορείτε να επεξεργαστείτε όλα αυτά τα πεδία. Απλώς αλλάξτε το 14 σε 20 και τώρα μπορείτε να κάνετε λήψη ενός πλαισίου στο οποίο το προεπιλεγμένο μέγεθος γραμματοσειράς είναι 20 pixel. Αντίστοιχα, μπορείτε να προσαρμόσετε αμέσως το μέγεθος των επικεφαλίδων κ.λπ.
Ρύθμιση του πλέγματοςΟι ρυθμίσεις του συστήματος πλέγματος είναι επίσης πολύ ενδιαφέρουσες για εμάς, εδώ είναι:
Όπως μπορείτε να δείτε, μπορείτε να αλλάξετε τον αριθμό των στηλών και το πλάτος των εσοχών μεταξύ τους σε λίγα δευτερόλεπτα. Η μεταβλητή grid-float-breakpoint ορίζει το σημείο στο οποίο το μενού του κινητού συμπτύσσεται σε ένα εικονίδιο.
Εάν αλλάξετε την τιμή, για παράδειγμα, σε @screen-md-min, τότε ήδη σε πλάτος 991 pixel ή λιγότερο, θα εμφανιστεί σύμπτυξη. Μπορείτε επίσης να αφαιρέσετε αυτήν τη μεταβλητή και να γράψετε την τιμή σε pixel. Για παράδειγμα, 520 pixel. Στη συνέχεια, η σύμπτυξη του μενού θα συμβεί μόνο σε smartphone και κινητά τηλέφωνα.
Στην πραγματικότητα, η σελίδα προσαρμογής Bootstrap έχει πολλές ρυθμίσεις, αλλά γενικά αυτή η μέθοδος προσαρμογής (χρησιμοποιώντας τη σελίδα Προσαρμογή στον επίσημο ιστότοπο) δεν είναι η πιο γρήγορη και βολική. Στη συνέχεια θα σας δείξω τον πιο γρήγορο τρόπο.
Χρησιμοποιήστε τη σελίδα Προσαρμογή όταν χρειάζεται να κάνετε 2-10 αλλαγές στο πλαίσιο ή απλά να απενεργοποιήσετε τα απαραίτητα στοιχεία. Εάν πρόκειται να αλλάξετε πολλές περισσότερες τιμές, πρέπει να χρησιμοποιήσετε διαφορετική μέθοδο.
Στην πραγματικότητα, όταν διαμορφώνετε την έκδοση του πλαισίου σας, κάντε κλικ στο μεγάλο κουμπί στο κάτω μέρος της σελίδας. Θα μεταγλωττίσει μια έκδοση του Bootstrap για εσάς και θα το κατεβάσει στον υπολογιστή σας. Τότε το μόνο που έχετε να κάνετε είναι να συνδεθείτε και να χρησιμοποιήσετε. Έχω ήδη μιλήσει για τη σύνδεση σε προηγούμενα άρθρα (συμπεριλαμβανομένου του πώς να το κάνετε στο WordPress).
Λήψη πηγών Less και επεξεργασία τουςΌπως είπα ήδη, αν χρειάζεται να κάνετε πολλές αλλαγές στον πηγαίο κώδικα του πλαισίου και θέλετε να δείτε τις αλλαγές αμέσως, τότε θα χρειαστείτε λιγότερες πηγές. Μπορείτε να τα κατεβάσετε στο ίδιο μέρος με την πλήρη έκδοση του πλαισίου - στην ενότητα Ξεκινώντας.
Για να εργαστείτε με τις πηγές Less και να τις επεξεργαστείτε χρειάζεστε:
Τουλάχιστον κάποιες γνώσεις css και λιγότερο ή άλλο προεπεξεργαστή
Λιγότερος μεταγλωττιστής (μπορείτε να το κατεβάσετε δωρεάν)
Στην πραγματικότητα, δεν θα σταθώ λεπτομερώς στην προσαρμογή μέσω λιγότερων πηγών, αλλά αυτή είναι η καλύτερη μέθοδος, επειδή δεν θα χρειαστεί να μεταβείτε στη σελίδα Προσαρμογή 100 φορές και να συντάξετε όλο και περισσότερες νέες εκδόσεις του πλαισίου.
Θέμα εκκίνησης ή αλλαγή της εμφάνισης στοιχείωνΑπό προεπιλογή, στην πλήρη έκδοση του πλαισίου, μπορείτε επίσης να βρείτε το αρχείο bootstrap-theme.css στον φάκελο css. Δεν είναι απαραίτητο να το συνδέσετε στον ιστότοπο. Τι λειτουργίες εκτελεί; Το αρχείο χρειάζεται αποκλειστικά για να αλλάξετε, εάν είναι απαραίτητο, τα στυλ για τα στοιχεία που χρειάζεστε.
Αυτός ο ίδιος ρόλος μπορεί να εκπληρωθεί από το δικό σας style.css, στο οποίο μπορείτε επίσης να παρακάμψετε στυλ. Το bootstrap-theme δεν είναι απαραίτητο αρχείο, χρησιμοποιείται μάλλον για παραγγελία. Για παράδειγμα, έχετε 3 αρχεία:
bootstrap.css – φυσικά, αυτός είναι ο κώδικας του ίδιου του πλαισίου.
bootstrap-theme.css – εδώ παρακάμπτετε στυλ για στοιχεία εκκίνησης.
style.css – γράψτε στυλ για τα στοιχεία σας σε αυτό το αρχείο.
Τότε θα έχετε σειρά στον κώδικα και στη δομή του έργου. Αλλά κανείς δεν σας απαγορεύει να εκτελέσετε όλες τις λειτουργίες σε ένα μόνο αρχείο - style.css και να μην χρησιμοποιήσετε καθόλου το αρχείο θέματος.
Το πιο σημαντικό πράγμα είναι να συμπεριλάβετε το αρχείο θέματος και το δικό σας css στη σήμανση html αργότερα από το αρχείο με τον κώδικα πλαισίου, έτσι ώστε τα στυλ να παρακαμφθούν με επιτυχία.
Ένα παράδειγμα για το πώς λειτουργεί η θεματοποίησηΌπως είπα ήδη, από προεπιλογή το Bootstrap περιλαμβάνει ένα αρχείο θέματος εκκίνησης. Δοκιμάστε να το συνδέσετε. Σημειώνω, συνδεθείτε μετά το κύριο αρχείο.
Από προεπιλογή, τα κουμπιά στο Bootstrap μοιάζουν με αυτό:
Και κάπως έτσι αλλάζει η εμφάνισή τους μετά τη σύνδεση του αρχείου με το θέμα:
Όπως μπορείτε να δείτε, εμφανίζεται μια μικρή κλίση. Αντίστοιχα, μπορείτε να ξαναγράψετε τον κώδικα στο αρχείο bootstrap-theme και να αποκτήσετε τα δικά σας στυλ για τα κουμπιά. Αλλά μπορείτε να ρωτήσετε, γιατί να μην κάνετε αυτές τις αλλαγές απευθείας στο bootstrap.css; Λοιπόν, το γεγονός είναι ότι νέες εκδόσεις του πλαισίου κυκλοφορούν συνεχώς και αν αποφασίσετε να κάνετε αναβάθμιση, θα είναι δύσκολο να εφαρμόσετε τις αλλαγές σας στη νέα έκδοση. Θεωρείται καλή μορφή για έναν προγραμματιστή να μην αγγίζει τον πηγαίο κώδικα όταν μπορείτε να δημιουργήσετε ένα ξεχωριστό αρχείο και να περιγράψετε τις αλλαγές εκεί. Είναι πολύ πιο έξυπνο και πιο βολικό.
Πώς να εγκαταστήσετε νέα θέματα Bootstrap που έχετε λάβει από το Διαδίκτυο;Υπάρχουν πάρα πολλοί ιστότοποι, κυρίως ξένοι, όπου μπορείτε να κατεβάσετε ένα σωρό θέματα και πρότυπα δωρεάν. Για να αποφύγουμε τη σύγχυση, ας θεωρήσουμε έναν ιστότοπο που έχει σχεδιαστεί χρησιμοποιώντας το Bootstrap ως πρότυπο και ένα θέμα ως ένα σύνολο κανόνων CSS που παρακάμπτουν την τυπική εμφάνιση των στοιχείων.
Τέτοια θέματα μπορούν να ληφθούν, για παράδειγμα, από το bootswatch.com/, και χρησιμοποιώντας μια μηχανή αναζήτησης μπορείτε να βρείτε δεκάδες άλλα.
Η γενική αρχή της εγκατάστασης τέτοιων θεμάτων εξαρτάται από τον ιστότοπο από τον οποίο τα κατεβάζετε. Αν μπορείτε να το κατεβάσετε σε μορφή bootstrap-theme, τέλεια, κατεβάστε το και συνδέστε το. Στο bootswatch, για παράδειγμα, πρέπει να κάνετε λήψη του bootstrap.css και να αντικαταστήσετε το τυπικό αρχείο στυλ πλαισίου με αυτό. Υπάρχει επίσης μια επιλογή με λιγότερες πηγές.
Ξεκινώντας με αυτό το άρθρο, θα αρχίσουμε να μελετάμε το πλαίσιο Twetter Bootstrap 3, το οποίο χρησιμοποιείται συχνότερα για τη δημιουργία ιστοσελίδων, πλαισίων διαχείρισης, σελίδων προορισμού και διαδικτυακών εφαρμογών, καθώς εξασφαλίζει ευκολία ανάπτυξης, σαφή δομή και προσαρμοστικότητα των σελίδων.
Εγκατάσταση προτύπου Basic Bootstrap 3Για να χρησιμοποιήσετε εργαλεία και μεθόδους Bootstrap 3, πρέπει να μεταβείτε στη διεύθυνση http://getbootstrap.com και να κάνετε λήψη του αρχείου με τους φακέλους css, τις γραμματοσειρές, τους φακέλους js και τα αντίστοιχα αρχεία μέσα σε αυτά.
Εάν δεν ξέρετε πώς να συνδέσετε στυλ CSS και σενάρια js, προτείνω να δείτε αυτό και αυτό το άρθρο και στην περίπτωσή μας, τα στυλ CSS συνδέονται σε ενότητες
και σενάρια πριν από την ετικέτα κλεισίματος
στο κάτω μέρος της σελίδας.Θα ήθελα επίσης να σημειώσω ότι η χρήση των αρχείων bootstrap.min.css και bootstrap.min.js θα ωφελήσει τον ιστότοπό σας, καθώς αυτά τα αρχεία είναι μικρότερα σε μέγεθος και θα έχουν θετική επίδραση στην ταχύτητα φόρτωσης.
Η σύνδεση γραμματοσειρών μπορεί να γίνει με δύο τρόπους:
Η δεύτερη επιλογή είναι προτιμότερη, αλλά ανεξάρτητα από τη μέθοδο που θα επιλέξετε, η σύνδεση θα προχωρήσει ως εξής
@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif;)
ή μάλλον στην ετικέτα στυλ για την πρώτη μέθοδο και εισαγάγετε όλο το κείμενο μέσα σε αυτήν στο αρχείο css για τη δεύτερη.
εγκατάσταση jqueryΓια να λειτουργήσει σωστά το Bootstrap 3, θα χρειαστεί επιπλέον να κατεβάσετε το αρχείο της βιβλιοθήκης jquery από τον επίσημο ιστότοπο jquery.com μέσω του συνδέσμου και να το τοποθετήσετε στο φάκελο js του ιστότοπού σας.
Η σύνδεση jquery γίνεται πριν από την ετικέτα κλεισίματος
Τα cookies μας διευκολύνουν να σας παρέχουμε τις υπηρεσίες μας. Με τη χρήση των υπηρεσιών μας, μας επιτρέπετε να χρησιμοποιούμε cookies.
, αλλά πριν από το αρχείο bootstrap.js
αφού το jquery θα πρέπει να φορτώσει πριν από την εκκίνηση.
Bootstrap 3 πλέγμα και μεγέθη οθόνηςΗ βάση του Bootstrap είναι ένα σύνολο κλάσεων πάνω στις οποίες είναι χτισμένο ένα πλέγμα 12 στηλών (col-). Εντός του πλέγματος υποστηρίζονται 5 τύποι οθονών -xs- -sm- -md- -lg- -xl-.
- -xs- μέγεθος οθόνης μικρότερο από 575 px.
- -sm- μέγεθος οθόνης μεγαλύτερο από 576 px και όχι περισσότερο από 767 px.
- -md- μέγεθος οθόνης μεγαλύτερο από 768 px και όχι περισσότερο από 991 px.
- -lg- μέγεθος οθόνης μεγαλύτερο από 992 px και όχι περισσότερο από 1199 px.
- -xl- μέγεθος οθόνης μεγαλύτερο από 1200 px.
Έτσι, ένα div με κλάση col-lg-12 σημαίνει ότι σε μια μεγάλη οθόνη η στήλη div θα καταλαμβάνει 12 στήλες ή το 100% του πλάτους, ομοίως ένα div col-sm-6 σε μια οθόνη smartphone θα καταλαμβάνει 6 στήλες ή 50% του πλάτους.
Τύποι διχτυωτών δοχείων. Σχέδιο διάταξης από καουτσούκΟι κύριοι τύποι δοχείων για ένα πλέγμα είναι οι κατηγορίες δοχείων και δοχείων-ρευστών.
Όταν χρησιμοποιείται μέσα σε ένα κοντέινερ, το πλέγμα σας θα καταλαμβάνει οπτικά το ένα τρίτο της οθόνης στο κέντρο, με και τις 12 στήλες να βρίσκονται σε αυτήν την περιοχή.
Τοποθετώντας το πλέγμα στην κατηγορία δοχείου-ρευστού, όλα τα στοιχεία διάταξης θα βρίσκονται σε ολόκληρη την οθόνη, όπως ένα ελαστικό, και καθώς μειώνεται το πλάτος, θα μετακινούνται το ένα προς το άλλο.
Δεν υπάρχει συγκεκριμένη σύσταση για τη χρήση κοντέινερ και υγρού κοντέινερ, καθώς τα πάντα εξαρτώνται από τη διάταξη σχεδίασης και τον σκοπό της διάταξης, ωστόσο, είναι σκόπιμο να χρησιμοποιηθεί υγρό δοχείου για τον πίνακα διαχείρισης μιας τοποθεσίας και κοντέινερ.
Επιπλέον, η κλάση -fluid μπορεί να εφαρμοστεί όχι μόνο στην κλάση κοντέινερ, αλλά και στη συμβολοσειρά της σειράς, για να τακτοποιήσει στοιχεία σε μια σειρά. Ωστόσο, εάν τοποθετήσετε το υγρό σειράς σε ένα κανονικό δοχείο, δεν θα παρατηρήσετε τη διαφορά. Αυτός ο συνδυασμός χρησιμοποιείται καλύτερα εκτός του div.container, ως εξής:
Γεια, είμαι ένα πρότυπο Bootstrap 3
Το δοχείο μου δεν είναι ρευστό!
Και είμαι ρευστός!Γραμμές για την τοποθέτηση στοιχείωνΗ κλάση γραμμών χρησιμοποιείται για την τοποθέτηση στοιχείων πλέγματος σε μία σειρά, αυτό σας επιτρέπει να τα τακτοποιήσετε οριζόντια, αλλά πρέπει να λάβετε υπόψη ότι το άθροισμα των δεικτών στη σειρά δεν πρέπει να είναι μεγαλύτερο από 12, διαφορετικά το τελευταίο στοιχείο θα είναι μετατοπίστηκε στη δεύτερη σειρά.
Επικεφαλίδα 1 Επικεφαλίδα 2 Επικεφαλίδα 3
Εάν μειώσετε το μέγεθος της σελίδας του προγράμματος περιήγησης, οι επικεφαλίδες θα ευθυγραμμιστούν σε μια κατακόρυφη λίστα από μια οριζόντια σειρά.
Κατηγορίες ορατότητας στοιχείωνΤο σύστημα διάταξης Bootstrap 3 παρέχει πρόσθετες κατηγορίες για εμφάνιση ή απόκρυψη στοιχείων σε διαφορετικές συσκευές και οθόνες. Ορίζονται ως ορατά-*-* και κρυφά-*.
Η κλάση για την εμφάνιση ορατού-*-* μετά την πρώτη παύλα υπάρχει συνήθως ένα αναγνωριστικό τύπου οθόνης (xs, sm, md, lg, xl) και μετά τη δεύτερη παύλα το μέγεθος της στήλης (1-12). Για παράδειγμα, ορατό-lg-6 - το στοιχείο είναι ορατό σε μια μεγάλη οθόνη, πλάτους 6 στηλών.
Hiding class hidden-* Μετά την παύλα υπάρχει ένα αναγνωριστικό τύπου οθόνης (xs,sm,md,lg,xl), για παράδειγμα, ένα στοιχείο σήμανσης με την κλάση hidden-xs δεν θα είναι ορατό σε μικρές συσκευές (μέγεθος οθόνης μικρότερο από 575 εικονοστοιχεία).
Ο συνδυασμός αυτών των στοιχείων θα σας επιτρέψει να εμφανίσετε ή να αποκρύψετε κοντέινερ div:
Επικεφαλίδα 1 Επικεφαλίδα 2
Ο πρώτος τίτλος θα είναι ορατός σε μεγάλες συσκευές, ενώ ο δεύτερος θα εξαφανιστεί σε μικρές οθόνες. Για να το κάνετε αυτό, μειώστε το μέγεθος του παραθύρου του προγράμματος περιήγησης, ώστε το μέγεθος να είναι παρόμοιο σε πλάτος με την οθόνη μιας κινητής συσκευής.
Επίσης, στο κοντέινερ div στην κλάση, καθορίστε το show ή το hidden, αλλά σε αυτήν την περίπτωση οι ιδιότητες εμφάνισης δεν θα αλλάξουν όταν αλλάξει η οθόνη: εάν είναι ορατή, τότε είναι ορατή, εάν είναι κρυφή, τότε μόνο η αφαίρεση της λέξης που είναι κρυφή από την κλάση θα σας επιτρέπει να δείτε το επιθυμητό στοιχείο.
Ερωτήματα πολυμέσων στο Bootstrap 3Για να χρησιμοποιήσετε ερωτήματα μέσων CSS, πρέπει να καθορίσετε το ειδικό σύμβολο @media στο αρχείο css και το ελάχιστο ή/και μέγιστο πλάτος οθόνης σε αγκύλες. Εάν στην κανονική σήμανση css πρέπει να γράψετε μεγέθη οθόνης σε pixel, στο bootstrap 3 μπορείτε να γράψετε την ακόλουθη κατασκευή:
@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- λεπτά) (...)
Αλλαγή της σειράς των στοιχείωνΜια άλλη ενδιαφέρουσα κλάση που σας επιτρέπει να μετακινήσετε μπλοκ μέσα σε ένα κοντέινερ, η κατηγορία push θα μετακινήσει το στοιχείο προς τα δεξιά και η κλάση έλξης προς τα αριστερά.
Όταν συνδυάζετε από γειτονικά δοχεία, μπορείτε να αλλάξετε τη σειρά των τελευταίων όταν αλλάζετε μεγέθη οθόνης. Σε αυτό το παράδειγμα, σε μια μεγάλη οθόνη (-lg-) η Επικεφαλίδα 2 βρίσκεται στα αριστερά και η Επικεφαλίδα 1 στα δεξιά, όταν το πλάτος της οθόνης μειωθεί σε μεσαίο μέγεθος (-md-), τα στοιχεία θα μετατοπιστούν και η σειρά θα γίνονται διαδοχικά.
Επικεφαλίδα 1 Επικεφαλίδα 2
Επιτρέψτε μου να ολοκληρώσω αυτήν την πρώτη γνωριμία με το σύστημα διάταξης Bootstrap 3· έχετε μάθει πώς να εγκαθιστάτε στυλ και σενάρια προτύπων, βασικά στοιχεία πλέγματος, ερωτήματα πολυμέσων, τύπους κοντέινερ κ.λπ. Στα επόμενα άρθρα θα δούμε βοηθητικά και πρόσθετα στοιχεία: μενού, κουμπιά, ρυθμιστικά, εικονίδια και πολλά άλλα.
24 Φεβρουαρίου 2012 στις 09:25 μ.μ. Twitter για αρχάριους- Σχεδιασμός ιστοσελίδων
Εισαγωγικά Στον ελεύθερο χρόνο μου, ως χόμπι, αναπτύσσω έναν μονοσέλιδο αθροιστή με ενδιαφέροντες τίτλους ειδήσεων. Κάποια στιγμή, η βασική λειτουργικότητα του πρωτοτύπου ήταν έτοιμη, το μόνο που έλειπε ήταν το πλαίσιο ελέγχου δίπλα στην εργασία "Σχεδιασμός". Δήλωση του προβλήματος Για να αποκτήσετε ένα όμορφο περιβάλλον χρήστη χωρίς να καταλάβετε τη μαγεία ενός σχεδιαστή (έχετε μόνο βασικά γνώση paint) και προγραμματιστή (έχετε μόνο βασικές γνώσεις html και css) .
Η σελίδα αποτελείται από τα ακόλουθα στοιχεία
- Ονομα
- Φόρμα για αποστολή συνδέσμου προς τις ειδήσεις
- Φόρμα για αποστολή μοναδικού κωδικού αναγνώστη μέσω e-mail
- Μοναδική φόρμα εισαγωγής κωδικού αναγνώστη
- Λίστα ειδήσεων ομαδοποιημένες κατά ημερομηνία (ημερομηνία, ώρα, σύνδεσμος τίτλου, αριθμός κλικ, ειδήσεις μπορούν να διαβαστούν ή νέες)
- Σύνδεσμος στο rss
- Σύνδεσμος στην επέκταση chrome
- αναγνωριστικό έκδοσης
- email σχολίων
... ...
Η δεύτερη γραμμή είναι απαραίτητη για την αυτόματη προσαρμογή της διεπαφής σε συσκευές που υποστηρίζονται από το Bootstrap Βήμα 2. Σχεδιάστε το «κρέας». Με τον όρο «κρέας» εννοώ τη λίστα ειδήσεων. Ο ευκολότερος τρόπος για να το κάνετε αυτό είναι να χρησιμοποιήσετε έναν πίνακα με απενεργοποιημένα πλαίσια. Η πρώτη στήλη είναι η ημερομηνία (μόνο μία φορά ανά ομάδα), η δεύτερη στήλη είναι η ώρα, η τρίτη είναι ο τίτλος και ο αριθμός των μεταβάσεων. Όλα αυτά, σύμφωνα με τους κανόνες του Bootstrap, πρέπει να συσκευάζονται σε ένα δοχείο:
| (Ημερομηνία) | (Χρόνος) | (Τίτλος) ((Αριθμός μεταβάσεων)) |
Για ανάγνωση ειδήσεων υποδεικνύουμε μια ειδική τάξη:
(Επικεφαλίδα) Βήμα 3. Φόρμα για την αποστολή συνδέσμου προς τις ειδήσεις. Και εδώ όλα είναι απλά, το Bootstrap παρέχει πολλά έτοιμα στυλ φόρμας: μια κανονική φόρμα, μια φόρμα μιας γραμμής, μια φόρμα αναζήτησης... Χρειαζόμαστε μια δεύτερη, προσθέστε την στο κοντέινερ μας μπροστά από τον πίνακα:
Προσθήκη ...
class="span10" - Το Bootstrap προϋποθέτει τη δημιουργία μιας διεπαφής που βασίζεται σε ένα πλέγμα 12 στηλών· τα στοιχεία μας μπορούν να ευθυγραμμιστούν κατά μήκος του. Μέσω της επιστημονικής μεθόδου δοκιμής και λάθους, έφτασα στο πλάτος του πεδίου εισόδου ίσο με 10. Βήμα 4,5,6. Ενα καπάκι. Οι ιδέες μου για το πώς πρέπει να φαίνεται ένας φιλικός προς τον χρήστη ιστότοπο υποδηλώνουν ένα μινιμαλιστικό στυλ: οτιδήποτε περιττό είναι κρυμμένο, ό,τι δεν μπορούσε να κρυφτεί είναι χλωμό. Κρύβουμε τις φόρμες σε ένα αναπτυσσόμενο μενού, κάνουμε συνδέσμους προς το rss και την επέκταση chrome χλωμό. Τα συσκευάζουμε όλα αυτά σε μια κεφαλίδα, την οποία κολλάμε στην κορυφή του ιστότοπου (class = "navbar navbar-fixed-top"):
*** ...
Οι ίδιες οι φόρμες:
... ×Στείλτε έναν μοναδικό κωδικό μέσω e-mail Ακύρωση αποστολής ×Εισαγάγετε έναν μοναδικό κωδικό αναγνώστη
Σας επιτρέπει να συγχρονίζετε ειδήσεις που διαβάζονται σε διαφορετικούς υπολογιστές.
Ακύρωση αποστολήςΣημαντικό σημείο. Για να λειτουργήσει αυτό, πρέπει να συνδέσετε μερικά σενάρια:
...
...
κυκλοφορία 2012/02/19 23:49 *****
ResultEpilogue Το Twitter Bootstrap έκανε δυνατό, χωρίς πολύ κόπο και γνώση, χωρίς να γράψετε ούτε μια γραμμή CSS και χωρίς πολύ σπάσιμο του κώδικα html, να αποκτήσετε ένα πολύ ωραίο πρωτότυπο περιβάλλον εργασίας που δεν ντρέπεστε να δείξετε στους ανθρώπους. Αν σας ενδιαφέρει, στο επόμενο άρθρο θα σας πω πώς, χωρίς βαθιά γνώση της PHP + MySQL (με μόνο βασικές δεξιότητες προγραμματισμού), μπορείτε να εφαρμόσετε λειτουργικότητα που σας επιτρέπει να δείξετε την ιδέα ενός εκατομμυρίου δολαρίων όχι μόνο σε χαρτί, αλλά με τη μορφή ενός λειτουργικού πρωτοτύπου.Σας ευχαριστώ για την προσοχή σας!
UPD: Δεν θέλω να αφαιρέσω το θέμα στο "I'm PR", αφαίρεσα όλους τους περιττούς συνδέσμους
Παιδιά, νομίζω ότι το Bootstrap είναι πολύ ωραίο πράγμα. Θα προσπαθήσω να εξηγήσω γιατί συμβαίνει αυτό σε αυτό το άρθρο. Λοιπόν, πάμε, ζητώ αμέσως συγγνώμη για το γεγονός ότι σχεδόν όλο το πρώτο μισό του άρθρου είναι γραμμένο χωρίς εικόνες, υπάρχει μόνο μια θεωρία, μια εξήγηση για το πώς λειτουργεί το πλέγμα. Αλλά αυτό είναι πολύ σημαντικό! Όποιος από εσάς το χρειάζεται θα το πάρει στα χέρια του, θα το διαβάσει και, ελπίζω, θα το καταλάβει. Το δεύτερο μισό του άρθρου γίνεται ήδη αντιληπτό πιο απλά, υπάρχουν περισσότερα παραδείγματα με στιγμιότυπα οθόνης.
Bootstrap - τι είναι;Ας ξεκινήσουμε λοιπόν με μια σημαντική ερώτηση. Το Bootstrap είναι ένα πλαίσιο CSS και JS, ουσιαστικά ένα σύνολο αρχείων με έτοιμο γραπτό κώδικα. Ο στόχος των προγραμματιστών σχεδόν οποιουδήποτε πλαισίου είναι να απλοποιήσουν την ανάπτυξη ιστότοπου για τους ίδιους και για άλλους που θα έχουν πρόσβαση στο εργαλείο. Στην περίπτωση του Bootstrap, είναι εντελώς δωρεάν, οπότε μπορείτε να το χρησιμοποιήσετε με οποιονδήποτε τρόπο, να επεξεργαστείτε τον πηγαίο κώδικα και να προσαρμόσετε το πλαίσιο με όποιον τρόπο θέλετε. Είναι τέλεια.
Εγκατάσταση BootstrapΕάν χρειάζεται απλώς να συνδέσετε τα αρχεία πλαισίου σε ένα έγγραφο HTML (για παράδειγμα, για εξάσκηση), απλώς κατεβάστε το πλαίσιο από τον επίσημο ιστότοπο getbootstrap.com, αντιγράψτε τα αρχεία του στο έργο και συνδέστε αυτά που χρειάζεστε. Επιτρέψτε μου να κάνω μια σύντομη επισκόπηση αυτών των αρχείων:
Αυτό είναι το τυπικό σύνολο του πλαισίου. Στην πραγματικότητα, μπορείτε εύκολα να το προσαρμόσετε και να το αλλάξετε για να σας ταιριάζει. Για παράδειγμα, μην χρησιμοποιείτε καθόλου σενάρια ή συνδέστε μόνο ένα πλέγμα. Σε γενικές γραμμές, θα μιλήσουμε και για αυτό.
Ρωσική τεκμηρίωση BootstrapΌταν επισκέπτεστε το getbootstrap, πιθανότατα παρατηρήσατε ότι όλα εδώ είναι στα αγγλικά. Θα μπορούσαμε να χρησιμοποιήσουμε τη ρωσική βοήθεια στο πλαίσιο. Είναι εύκολο να το βρεις. Για να το κάνετε αυτό, μεταβείτε από την κύρια σελίδα στην ενότητα Ξεκινώντας. Κάντε κύλιση στο κάτω μέρος, θα υπάρχει ένας σύνδεσμος προς τις μεταφράσεις. Ψάξτε για ρωσικά εκεί και κάντε κλικ σε αυτό. Αυτό ήταν, τώρα βρίσκεστε στη ρωσική έκδοση του ιστότοπου. Είναι αλήθεια ότι δεν έχουν μεταφραστεί όλα εδώ, αλλά κάπου γύρω στο 70-80% είναι ακριβή, οπότε θα καταλάβετε τα πάντα.
Πλέγμα εκκίνησηςΌ,τι και να πει κανείς, το κύριο στοιχείο του Bootstrap είναι το πλέγμα που αποκρίνεται. Γενικά, χωρίς αυτό, το πλαίσιο θα έχανε σχεδόν όλη την αξία του, επειδή χάρη στο πλέγμα μπορείτε να δημιουργήσετε γρήγορα προσαρμοστικά πρότυπα. Ταυτόχρονα, μπορεί να μην είστε καθόλου εξοικειωμένοι με τα ερωτήματα πολυμέσων· δεν τα χρειάζεστε, επειδή το πλαίσιο φροντίζει για την εφαρμογή της προσαρμοστικότητας· απλώς χρειάζεται να αντιστοιχίσετε τις σωστές κλάσεις στα μπλοκ.
Τι είναι αυτές οι τάξεις; Πάμε στην τεκμηρίωση, θα μας βοηθήσει πολύ. Μεταβείτε στην ενότητα CSS - Grid System. Οι γενικοί κανόνες για την εργασία με ένα πλέγμα είναι απλοί· θα τους απαριθμήσω τώρα.
Πώς να εργαστείτε με ένα πλέγμα;Σκεφτείτε το ως πίνακα html. Εάν έχετε γράψει ποτέ κώδικα HTML για πίνακες, γνωρίζετε ότι όλο το περιεχόμενο τοποθετείται στην ετικέτα πίνακα, μια σειρά τοποθετείται στην ετικέτα tr και, στη συνέχεια, τα κελιά τοποθετούνται σε αυτήν - td .
Έτσι, όλα είναι παρόμοια στο πλέγμα. Η κλάση κοντέινερ χρησιμεύει ως γενικό δοχείο για το πλέγμα. Υπάρχουν 2 επιλογές για το πλέγμα του bootstrap - εντελώς ελαστικό και εξακολουθούν να έχουν πεπερασμένο μέγιστο πλάτος. Έτσι, όταν στο γενικό μπλοκ δοθεί η κλάση κοντέινερ, η τοποθεσία θα έχει μέγιστο πλάτος 1170 εικονοστοιχείων. Δεν θα επεκταθεί άλλο. Φυσικά, το περιεχόμενο θα είναι κεντραρισμένο.
Εάν ορίσετε την κατηγορία δοχείου-υγρού, τότε το πλέγμα θα είναι εντελώς ελαστικό, δηλαδή δεν θα υπάρχουν περιορισμοί μεγέθους. Για παράδειγμα, εάν ένα άτομο ανοίξει έναν ιστότοπο σε μια οθόνη πλάτους 1920 pixel, θα τον δει σε πλήρες πλάτος.
Κατά συνέπεια, το πρώτο πράγμα κατά την ανάπτυξη ενός ιστότοπου είναι να αποφασίσετε πώς θα είναι το πρότυπο - εντελώς ελαστικό ή το πλάτος του πρέπει ακόμα να περιοριστεί.
Ωραία, το μπλοκ κοντέινερ πρέπει να περιέχει μια σειρά πλέγματος. Πρέπει να τοποθετήσετε όλα τα μπλοκ που βρίσκονται σε μία γραμμή σε αυτό. Δηλαδή, αν πάρουμε το πιο χαρακτηριστικό πρότυπο: κεφαλίδα, κύριο μέρος, δεξιά στήλη και υποσέλιδο, τότε υπάρχουν 3 στήλες. Το πρώτο θα έχει μόνο την κεφαλίδα, το δεύτερο θα έχει το περιεχόμενο και την πλαϊνή γραμμή και το τελευταίο θα έχει το υποσέλιδο. Η σήμανση για έναν τέτοιο ιστότοπο θα ήταν κάπως έτσι:
Περιεχόμενο κεφαλίδας... και πλευρική γραμμή υποσέλιδου
Αλλά προς το παρόν αυτό είναι λάθος σήμανση, γιατί λείπει... τι; Σωστά, κελιά! Στην περίπτωση του Bootstrap, ονομάζονται επίσης στήλες. Το πλέγμα bootstrap αποτελείται από 12 στήλες. Μπορεί να ενσωματωθεί σε οποιοδήποτε μπλοκ οποιουδήποτε πλάτους, τουλάχιστον 1200 pixel, τουλάχιστον 100. Όλα αυτά είναι επειδή το πλάτος των στηλών δεν καθορίζεται σε pixel, αλλά σε ποσοστά.
Πώς λειτουργεί αυτό το σύστημα 12 στηλών;Έτσι, ερχόμαστε στο πιο σημαντικό θέμα που σχετίζεται με το πλαίσιο. Πιστέψτε με, αν το καταλαβαίνετε αυτό, όλα τα άλλα είναι ανοησίες. Το κύριο πράγμα είναι να κατανοήσετε πώς λειτουργεί το πλέγμα και η διαδρομή για γρήγορη προσαρμοστική διάταξη θα είναι ανοιχτή για εσάς.
Για να το κάνετε αυτό, μετακινηθείτε στην τεκμηρίωση ακριβώς από κάτω, εκεί θα βρείτε έναν πίνακα που περιέχει σημαντικές ιδιότητες πλέγματος.
Παρεμπιπτόντως, οι ίδιες οι στήλες επισημαίνονται στο Bootstrap με την κλάση, αλλά αυτή είναι μια σύνθετη κλάση, επομένως δεν γράφουν ποτέ απλώς col-. Το Bootstrap έχει 4 ειδικές κατηγορίες που έχουν σχεδιαστεί για να ελέγχουν το μέγεθος των μπλοκ σε διαφορετικά πλάτη, εδώ είναι:
Αυτές είναι οι 4 κατηγορίες, αλλά για τον έλεγχο του μεγέθους των στοιχείων, χρησιμοποιούνται αριθμοί από το 1 έως το 12, επειδή, όπως θυμάστε, υπάρχουν ακριβώς 12 στήλες στο πλέγμα.
Υποσέλιδο πλευρικής γραμμής περιεχομένου κεφαλίδας
Είναι αρκετά εύκολο να το καταλάβεις. Πρώτα απ 'όλα, δημιουργούμε μια κεφαλίδα, η οποία δεν χρειάζεται να τοποθετηθεί καθόλου στο πλέγμα, αφού σε κάθε περίπτωση θα καταλαμβάνει το 100% του πλάτους (συνήθως). Αλλά θα το βάλουμε ούτως ή άλλως. Τι είναι αυτή η κατηγορία col-md-12; Όπως σας είπα ήδη, κανείς δεν γράφει απλά col-, με αυτήν την κλάση ουσιαστικά λέμε στο πρόγραμμα περιήγησης:
Αυτό είναι ένα κελί | στήλη
Σε μεσαίες συσκευές (κατηγορία md), το πλάτος του πρέπει να είναι 12 στήλες από τις 12, δηλαδή το 100% του πλάτους της σειράς.
Τι γίνεται όμως με το πλάτος σε άλλες συσκευές; Σε μεγάλες οθόνες (lg) θα είναι επίσης 100%, επειδή οι τιμές για τις μεγάλες οθόνες κληρονομούνται, αλλά για τις μικρότερες δεν κληρονομούνται. Είναι απλό: αν γράφατε col-xs-4 , τότε το πλάτος της στήλης θα ήταν 33% σε όλες τις συσκευές και αν col-lg-4 , τότε μόνο σε μεγάλες. Αυτό είναι το χαρακτηριστικό, θυμηθείτε το.
Λοιπόν, εάν η τιμή του πλάτους δεν αποθηκεύεται σε μικρότερες οθόνες, τότε τι συμβαίνει; Μηδενίζεται. Να πώς συμβαίνει:
col-sm-4 - στις μικρές οθόνες το μπλοκ θα καταλαμβάνει το 33% του πλάτους, θα είναι το ίδιο στις οθόνες md και lg, αλλά στις xs, δηλαδή στις μικρότερες, το πλάτος θα επαναφερθεί στο 100%. Λοιπόν, θυμηθείτε έναν ακόμη απλό κανόνα: Εάν δεν έχει καθοριστεί τίποτα για μικρότερες οθόνες, τότε το μπλοκ θα εμφανίζεται σε αυτές σε πλάτος 100%.
Πλαϊνή γραμμή περιεχομένου
Ουσιαστικά λέμε στο πρόγραμμα περιήγησης:
Αφήστε το μπλοκ περιεχομένου να έχει πλάτος 8 από τις 12 στήλες και αυτή η κατάσταση θα είναι σε μικρές, μεσαίες και μεγάλες οθόνες (αρκεί να καθορίσετε για μικρές, για μεγάλες οθόνες, όπως θυμάστε, η τιμή κληρονομείται). Αλλά στις μικρότερες οθόνες το μπλοκ θα είναι κατειλημμένο 100%. Αυτό είναι σωστό. Συνήθως, σε κινητές συσκευές, οι ιστότοποι εμφανίζονται σε 1 στήλη.
Αφήστε την πλαϊνή στήλη να είναι το ένα τρίτο του πλάτους της σειράς στις ίδιες μικρές, μεσαίες και μεγάλες οθόνες. Λοιπόν, στις πιο μικρές, όπως ήδη καταλάβατε, το πλάτος της επαναφέρεται επίσης στο 100%. Είναι τόσο απλό.
Λοιπόν, δεν υπάρχει τίποτα να ασχοληθεί με το υποσέλιδο. Λοιπόν, καλύψαμε τις βασικές αρχές για το πώς λειτουργεί το πλέγμα, αλλά πρέπει ακόμα να δούμε πώς λειτουργεί...
Bootstrap Nested GridΤο γεγονός είναι ότι τώρα έχουμε χωρίσει το πρότυπο μόνο σε κύρια μπλοκ, αλλά στο εσωτερικό μπορούν επίσης να χωριστούν σε στήλες. Για παράδειγμα, το περιεχόμενο μπορεί να εμφανίζει προϊόντα σε πολλές στήλες. Τι πρέπει να κάνω? Είναι πολύ απλό - δημιουργούμε ακριβώς το ίδιο πλέγμα μέσα. Θα είναι ένθετο, αλλά περιέχει και 12 στήλες. Αν συνοψίσουμε όλα αυτά, τότε καταλήγουμε στο εξής συμπέρασμα:
Μπορεί να υπάρχει απεριόριστος αριθμός πλεγμάτων μέσα σε οποιοδήποτε μπλοκ. Για παράδειγμα, σε ένα μπλοκ με προϊόντα υπάρχει ένα πλέγμα για τον διαχωρισμό προϊόντων· στο μπλοκ με ένα ίδιο προϊόν, μπορείτε να δημιουργήσετε ένα άλλο πλέγμα, για παράδειγμα, για να διαχωρίσετε τιμές, πληροφορίες διαθεσιμότητας και πρόσθετες πληροφορίες. πληροφορίες.
Τώρα θα προσπαθήσουμε να δημιουργήσουμε ένα άλλο πλέγμα μέσα στο μπλοκ περιεχομένου για να τακτοποιήσουμε τα προϊόντα σε 3 στήλες. Λοιπόν, ας πάρουμε το μπλοκ στο οποίο έχουμε περιεχόμενο:
Περιεχόμενο
Και γράφουμε σε αυτό:
Κατάλογος προϊόντων: Όνομα προϊόντος 
Περιγραφή προϊόντος
Όπως μπορείτε να δείτε, δημιουργήσαμε ένα νέο πλέγμα μέσα στο περιεχόμενο - βάλαμε μια σειρά μέσα και στη σειρά θα υπάρχουν ήδη 3 μπλοκ με προϊόντα. Απλώς αντιγράψτε το μπλοκ col-sm-4 με την κάρτα προϊόντος και επικολλήστε το άλλες 2 φορές, αυτό είναι που λαμβάνετε (μπορείτε να τραβήξετε οποιαδήποτε φωτογραφία προϊόντος, έβγαλα μια μεγάλη):
Έχασα ένα άλλο σημαντικό σημείο: για να προσαρμοστούν οι εικόνες στα μπλοκ στα οποία βρίσκονται, σε καθένα από αυτά πρέπει να δοθεί η κλάση img-responsive. Εάν εσείς, όπως εγώ, πιστεύετε ότι είναι άβολο να το κάνετε αυτό, τότε απλώς γράψτε με το δικό σας στυλ.css ως εξής:
Img (μέγιστο πλάτος: 100%, ύψος: αυτόματο, οθόνη: μπλοκ; )
Αυτό είναι όλο, αποθηκεύστε αυτόν τον κώδικα και συνδέστε το αρχείο css σας στο έργο. Τώρα οι εικόνες θα είναι προσαρμοστικές από προεπιλογή.
Λοιπόν, βγήκε αρκετά ομαλά; Ναι, αλλά χωρίς το bootstrap θα έπρεπε να υποφέρετε περισσότερο. Το μόνο πράγμα είναι ότι όταν δημιουργείτε ένα πλέγμα μέσα σε οποιοδήποτε μπλοκ, δεν χρειάζεται πλέον να δημιουργείτε ένα μπλοκ με την κλάση κοντέινερ σε αυτό. Γιατί αυτό δεν είναι απαραίτητο; Ναι, επειδή το μπλοκ στο οποίο δημιουργείται το πλέγμα χρησιμεύει ως κοντέινερ.
Έτσι, μπορείτε να δημιουργήσετε όσες στήλες θέλετε σε οποιοδήποτε μπλοκ και να δημιουργήσετε ένα πρότυπο οποιασδήποτε πολυπλοκότητας. Και όλα αυτά είναι πολύ πιο γρήγορα από ό,τι χωρίς το Bootstrap, γιατί πρέπει να γράψετε όλα τα css από την αρχή.
Αποκριτικά βοηθητικά προγράμματαΑυτό είναι ένα άλλο εξαιρετικό χαρακτηριστικό του bootstrap. Συνίσταται στο γεγονός ότι μπορείτε να κρύψετε ή να κάνετε ορατά τυχόν μπλοκ στο πλάτος που χρειάζεστε. Για παράδειγμα, αποκρύψτε εντελώς την πλαϊνή στήλη σε στενές οθόνες, προσθέστε μερικά νέα στοιχεία σε κινητές συσκευές, προσθέστε μια στήλη σε μεγάλες οθόνες κ.λπ.
Υπάρχουν πολλές επιλογές εφαρμογής, αλλά δεν σας είπα για το πιο σημαντικό πράγμα: πώς να χρησιμοποιήσετε αυτά τα βοηθητικά προγράμματα; Για να το κάνετε αυτό, απλώς προσθέστε κλάσεις στο επιθυμητό μπλοκ. Εάν πρέπει να το αποκρύψετε, απλώς καθορίστε την ακόλουθη κλάση:
Υποσέλιδο
Τι θα κάνει η κλάση hidden-xs σε αυτήν την περίπτωση; Θα κρύψει το υποσέλιδο σε πολύ μικρές συσκευές. Σε όλα τα άλλα το μπλοκ θα είναι ορατό.
Εάν, αντίθετα, πρέπει να το εμφανίσετε μόνο στις μικρότερες οθόνες, πρέπει να χρησιμοποιήσετε την κλάση ορατό-xs-block. Σε αυτήν την περίπτωση, το μπλοκ θα είναι κρυφό σε όλες εκτός από τις πιο στενές οθόνες. Έτσι, οι προσαρμοστικές τάξεις χρησιμότητας γράφονται ως εξής:
Λοιπόν, μερικά παραδείγματα για να γίνει ξεκάθαρο:
Έτσι λειτουργούν όλα. Αυτό ακριβώς είναι και όχι αλλιώς. Ελπίζω να το καταλαβαίνεις αυτό. Ας το κάνουμε πράξη. Έχουμε ένα πρότυπο δοκιμής, αν και πολύ πρωτόγονο.
Εργασία: εξαφάνιση της πλαϊνής στήλης στις μικρές οθόνες, καθώς και ενός προϊόντος στις μικρότερες οθόνες. Και έτσι ώστε στις συσκευές xs τα προϊόντα να είναι ήδη σε 2 στήλες, όχι σε 3.
Προσπαθήστε να το κάνετε μόνοι σας, επεξεργάζοντας μόνο τον κώδικα html. Οτι χρειάζεται να γίνει? Αρχικά, ας δούμε τη στήλη, για να την αποκρύψετε σε οθόνες sm, απλά πρέπει να προσθέσετε την κλάση hidden-sm σε αυτήν.
Τέλεια, τώρα το τρίτο προϊόν πρέπει να προσθέσει την κλάση hidden-xs και θα εξαφανιστεί στις μικρότερες οθόνες. Λοιπόν, οι κατηγορίες των υπόλοιπων δύο αγαθών θα είναι οι εξής:
Δηλαδή, σε μεσαίες συσκευές το μπλοκ θα καταλαμβάνει 4 στήλες από τις 12, οι οποίες μπορούν να μεταφραστούν στο 33,33% του πλάτους και σε πολύ μικρές συσκευές - το 50%. Και επειδή ένα μπλοκ με ένα προϊόν θα εξαφανιστεί σε αυτό το πλάτος, και τα δύο μπλοκ με προϊόντα θα είναι τακτοποιημένα σε 1 σειρά, ως εξής:
Εξαιρετική! Έχοντας καταλάβει αυτό, μπορείτε ήδη να χειριστείτε τα μπλοκ στην ιστοσελίδα σχεδόν με όποιον τρόπο θέλετε. Προσπαθήστε να βρείτε εργασίες για τον εαυτό σας και να τις εφαρμόσετε.
Κουνήστε με σε όλη τη διαδρομήΣτη συνέχεια θα σας δείξω ένα άλλο πολύ καλό κόλπο - τη δυνατότητα να μετακινήσετε ένα μπλοκ προς τα δεξιά ή προς τα αριστερά. Ας πούμε ότι δεν έχουμε 3 προϊόντα στη σειρά, αλλά 1. Και δεν καταλαμβάνει όλο το πλάτος. Και το καθήκον σας είναι να το ευθυγραμμίσετε στο κέντρο. Αυτό είναι εύκολο να το κάνετε εάν έχετε κατά νου ότι εργάζεστε με ένα σύστημα 12 στηλών.
Ας αφήσουμε ένα μπλοκ με το προϊόν:
Αρκεί να κάνετε απλούς υπολογισμούς για να καταλάβετε πόσο πρέπει να μετακινήσετε το μπλοκ για να το κεντράρετε. Πρέπει να μετακινηθεί 4 στήλες προς τα αριστερά σε μεσαίες και μεγάλες οθόνες και 3 στήλες σε μικρές. Έτσι φαίνεται:
Η κλάση col-md-offset-4 λέει: σε μεσαίες και μεγάλες οθόνες, μετατοπίστε το μπλοκ προς τα αριστερά κατά 33% του πλάτους του γονικού κοντέινερ (1/3 αριστερή μετατόπιση, 1/3 πλάτος μπλοκ, ⅓ δεξιά μετατόπιση, με αποτέλεσμα να κεντράρουμε).
Κατηγορία col-xs-offset-6: Σε πολύ μικρές και μικρές οθόνες, μετακινηθείτε αριστερά κατά 25% (¼ γέμιση αριστερά, ½ πλάτος μπλοκ, ¼ γέμιση δεξιά).
Ελπίζω να καταλαβαίνετε την ουσία και να χρησιμοποιήσετε αυτές τις τάξεις εάν είναι απαραίτητο.
Στοιχεία Bootstrap και παραδείγματα χρήσης τουςΣε συγχαίρω. Μόλις καλύψαμε το πιο σημαντικό θέμα που σχετίζεται με το πλαίσιο. Είναι το πλέγμα και η συνεργασία με αυτό που είναι σημαντικό. Η εργασία με εξαρτήματα σημαίνει ήδη ότι απλώς πηγαίνετε στην τεκμηρίωση, αντιγράφετε τον κωδικό του επιθυμητού στοιχείου εκεί και, εάν χρειάζεται, τον αλλάζετε για να ταιριάζει στις ανάγκες σας. Αλλά θα συνεχίσω να δώσω παρακάτω μερικά παραδείγματα για το πώς να χρησιμοποιήσετε τα εξαρτήματα.
Γρήγορες επιπλέουν και ακύρωση περιτυλίγματοςΟι κλάσεις pull-left και pull-right σας επιτρέπουν να κάνετε γρήγορα οποιοδήποτε μπλοκ να επιπλέει στέλνοντάς το προς τα αριστερά ή προς τα δεξιά. Μην ξεχάσετε να ακυρώσετε τη ροή. Μπορείτε να χρησιμοποιήσετε την κλάση clearfix για αυτό.
Bootstrap: Μενού οριζόντιας απόκρισης (κινητά).Θα προσθέσουμε τα παρακάτω στοιχεία απευθείας στο πρότυπο, οπότε αν θέλετε να εργαστείτε με τον κώδικα και όχι απλώς να διαβάσετε, ακολουθήστε όλα τα βήματα μετά από εμένα.
Στην πραγματικότητα, με το Bootstrap μπορείτε πολύ εύκολα να δημιουργήσετε όχι απλώς ένα προσαρμοστικό μενού, αλλά ένα λεγόμενο κινητό, το οποίο είναι εντελώς συμπαγές σε μικρές οθόνες και κρυμμένο κάτω από ένα κουμπί. Αυτή η τεχνική μπορεί να δει κανείς σε πολλά αποκριτικά πρότυπα και είναι στην πραγματικότητα πολύ εύκολη στην εφαρμογή. Το παράδειγμα κωδικού μενού για κινητά βρίσκεται στην τεκμηρίωση, θα το πάρω από εκεί και θα το ξανακάνω λίγο.
Έτσι, το πρώτο πράγμα που θα κάνω είναι να αφαιρέσω το μπλοκ με την κεφαλίδα, γιατί το μενού μας, στην πραγματικότητα, θα είναι η κεφαλίδα στην περίπτωση του προτύπου μου. Ο κωδικός μενού πρέπει να τοποθετηθεί πριν από όλο το περιεχόμενο του ιστότοπου, ακόμη και πριν από το μπλοκ κοντέινερ. Γιατί; Ναι, τώρα θα δείτε μόνοι σας ότι το πλέγμα είναι ήδη ενσωματωμένο στη γραμμή πλοήγησης. Ορίστε λοιπόν ο κωδικός:
Λογότυπο/Όνομα κουμπιού εναλλαγής
Αναζήτηση
Μην σας ανησυχεί το γεγονός ότι υπάρχει πολύς κώδικας. Αυτή είναι η εμφάνιση του ιστότοπου τώρα:
Αλλά αν το μενού σας δεν καταλαμβάνει όλο το πλάτος της οθόνης, είναι λογικό να το κεντράρετε. Για να το κάνετε αυτό, θα πρέπει στη συνέχεια να δημιουργήσετε ένα πρόσθετο μπλοκ περιτυλίγματος για το μενού, το οποίο θα πρέπει να τοποθετηθεί μετά το μπλοκ με την κλάση container-fluid. Μην ξεχάσετε να κλείσετε αυτό το μπλοκ. Του έδωσα την κατηγορία navbar-wrap. Εδώ είναι τα στυλ για αυτό:
Δηλαδή, μπορείτε απλά να περιορίσετε το πλάτος και να το κεντράρετε. Ή αντικαταστήστε αρχικά το δοχείο-ρευστό με δοχείο .
Όπως μπορείτε να δείτε, προσθέσαμε ένα λογότυπο, δύο απλά στοιχεία, ένα αναπτυσσόμενο στοιχείο και μια φόρμα αναζήτησης στο μενού. Δηλαδή, υπήρχαν πολλά στοιχεία. Μπορείτε εύκολα να προσαρμόσετε το μενού για τον εαυτό σας προσθέτοντας τις δικές σας τάξεις σε αυτό. Αλλά προς το παρόν ο στόχος μου είναι απλώς να σας δείξω αυτό το στοιχείο.
Έτσι θα φαίνεται το μενού σε συσκευές με πλάτος οθόνης μικρότερο από 768 pixel:
Όπως μπορείτε να δείτε, το μενού έχει καταρρεύσει. Ανοίγει όταν κάνετε κλικ στο κουμπί στην επάνω δεξιά γωνία. Μόνο το λογότυπο παρέμεινε στην οθόνη.
Πτυσώμενο μενούΤαυτόχρονα, από το παραπάνω παράδειγμα μπορείτε να καταλάβετε πώς δημιουργείται ένα στοιχείο του αναπτυσσόμενου μενού στο Bootstrap. Ας εξαγάγουμε αυτόν τον κώδικα για μια πιο λεπτομερή ματιά:
Έτσι, το κοντέινερ για ένα αναπτυσσόμενο στοιχείο είναι ένα κανονικό στοιχείο λίστας με την αναπτυσσόμενη κλάση. Μέσα σε αυτό βρίσκεται ο κύριος σύνδεσμος, κάνοντας κλικ στον οποίο ανοίγει ένα αναπτυσσόμενο μενού. Είναι πολύ σημαντικό να του εκχωρήσετε ένα χαρακτηριστικό δεδομένων, το οποίο βλέπετε στον κώδικα· χωρίς αυτό, τίποτα δεν θα λειτουργήσει. Θα πρέπει επίσης να βεβαιωθείτε ότι το αρχείο bootstrap.js είναι συνδεδεμένο με τις ιστοσελίδες.
Ένα διάστημα με την κλάση caret δεν είναι τίποτα άλλο από ένα βέλος, χάρη στο οποίο μπορείτε να καταλάβετε ότι το στοιχείο είναι ένα αναπτυσσόμενο στοιχείο και κάτω από το ίδιο το μενού σχηματίζεται χρησιμοποιώντας μια τυπική λίστα με κουκκίδες. Αυτό είναι όλο, όλα είναι αρκετά απλά, μπορείτε να χρησιμοποιήσετε αυτόν τον κώδικα για να εφαρμόσετε αναπτυσσόμενα στοιχεία.
Προσθήκη Breadcrumbs (Breadcrumbs) Χρησιμοποιώντας BootstrapΣε πολλά καταστήματα μπορείτε να βρείτε ένα λεγόμενο μπλοκ ψίχουλα ψωμιού, το οποίο περιέχει την πλήρη διαδρομή προς την τρέχουσα σελίδα. Αυτό είναι επίσης εύκολο να γίνει χρησιμοποιώντας το πλαίσιο, δείτε τον κώδικα:
Στην πραγματικότητα, αρκεί να καθορίσετε την κλάση breadcrumb για μια αριθμημένη λίστα και να εισαγάγετε τα συνήθη στοιχεία λίστας σε αυτήν. Παρεμπιπτόντως, θα κεντρίσω τις επικεφαλίδες δεύτερου επιπέδου στο πρότυπο (αυτό πρέπει να γραφτεί στο css):
H2 (στοίχιση κειμένου: κέντρο; )
Εάν θέλετε να αλλάξετε με κάποιο τρόπο την εμφάνιση των ψωμιών, απλώς χρησιμοποιήστε τον επιλογέα .breadcrumb στο CSS. Για παράδειγμα, μπορείτε να αφαιρέσετε το χρώμα φόντου ως εξής:
Breadcrumb (φόντο: διαφανές;)
Αυτή είναι η εμφάνιση του ιστότοπου τώρα:
Από προεπιλογή, ο πίνακας θα εκτείνεται σε ολόκληρο το παράθυρο, επομένως τυλίξτε τον σε ένα πλαίσιο με περιορισμένο πλάτος για να περιορίσετε τις διαστάσεις. Από προεπιλογή φαίνεται τρομερό, αλλά αν προσθέσετε την κατηγορία πίνακα στην ετικέτα πίνακα, όλα θα είναι πολύ πιο όμορφα:
