Σήμερα θα δούμε: Οι αληθινοί γνώστες της μουσικής γνωρίζουν ότι για την ποιότητα...
Νομίζω ότι αυτό είναι ένα απαραίτητο σύνολο εξαρτημάτων για ενσωματωμένη επεξεργασία. Υποστηρίζει διάφορες εκδόσεις του Bootstrap και λειτουργεί τέλεια χωρίς αυτό (στο jQuery).
Jasny
Ένα μικρό σύνολο πρόσθετων στοιχείων για το Bootstrap. Περιλαμβάνει ένα πλευρικό μενού, κουμπιά λειτουργιών, μάσκες εισόδου κ.λπ.
Βοηθός φόρμας εκκίνησης
Ένα άλλο ενδιαφέρον σύνολο στοιχείων. Η premium έκδοση περιλαμβάνει στοιχεία όπως εισόδους για την επιλογή νομισμάτων, χωρών, ζωνών ώρας, γλωσσών κ.λπ.
Leapstrap
Ένα σύνολο στοιχείων για την υποστήριξη της προσθήκης ελεγκτή Leapstrap. Αυτό είναι πολύ ασυνήθιστο πράγμα, γι 'αυτό το συμπεριλαμβάνω σε αυτήν τη λίστα.
Μεμονωμένα Εξαρτήματα
jQuery Bootpag
Ένα επιπλέον στοιχείο που συχνά λείπει από το τυπικό κιτ Bootstrap είναι η Σελιδοποίηση. Ιδιαίτερο χαρακτηριστικό είναι η δυνατότητα δυναμικής επεξεργασίας.
Tocify
Στοιχείο για παρακολούθηση περιεχομένου σελίδας. Πολύ συχνά αυτό είναι το στοιχείο που λείπει για τη δημιουργία σύγχρονων ιστοσελίδων.
Προεπισκόπηση συνδέσμου Bootstrap
Ένα μικρό και πολύ εύχρηστο στοιχείο για προεπισκόπηση περιεχομένου μέσω συνδέσμου (όπως προεπισκόπηση Facebook).
Flippant.js
Ένα μικρό σενάριο για τη δημιουργία μπλοκ "δύο όψεων". Ιδανικό για τη δημιουργία φορμών, καρτών χαρτοφυλακίου κ.λπ.
Bootstrap Tour
Μια εξαιρετική προσθήκη στο Bootstrap που σας επιτρέπει να δημιουργήσετε μια περιήγηση βήμα προς βήμα για νέους επισκέπτες στον ιστότοπό σας.
Bootstro.js
Παραλλαγή του προηγούμενου εργαλείου. Προορίζεται επίσης για τη δημιουργία μιας περιήγησης βήμα προς βήμα για τον ιστότοπο ή την εφαρμογή Ιστού σας.
Ακόμα ένα MegaMenu (YAMM)
Ένα στοιχείο απαραίτητο για σχεδόν κάθε σύγχρονο ιστότοπο. Σας επιτρέπει να δημιουργήσετε ένα κύριο μενού πλοήγησης σχεδόν κάθε πολυπλοκότητας.
Βελτίωση αναπτυσσόμενων μενού
Προσθήκη σε τυπικό μενού Bootstrap. Περιλαμβάνει λειτουργίες όπως τοποθέτηση μενού, εμφάνιση εισόδων ραδιοφώνου και πλαισίου ελέγχου στο μενού και πολλά άλλα.
Bootstrap Tree View
Μια απλή λύση για την εμφάνιση μιας δομής δέντρου. Αυτό το συστατικόυποστηρίζει τυπικά εικονίδια γλυφών.
GTreeTable
Μια άλλη προσθήκη που σας επιτρέπει να δημιουργήσετε μια δομή δέντρου. Διαθέτει μια πληθώρα λειτουργιών: Drag&Drop, επεξεργασία κ.λπ.
Βαθμολογία με αστέρια Bootstrap
Gridmanager.js
Επεξεργαστής περιεχομένου με βάση τις γραμμές και τις στήλες του πλαισίου Bootstrap. Δεν έχω βρει ακόμα πώς να το κάνω πράξη. Δημοσίευσα περισσότερα ως παράδειγμα υλοποίησης.
Στοιχεία για Φόρμες
Ετικέτες Bootstrap
Εξάρτημα για εύκολη δημιουργία ετικετών. Πολύ εύκολο στη χρήση και επίσης εύκολο στην προσαρμογή. Λειτουργεί με όλες τις εκδόσεις του Bootstrap.
Διακόπτης Bootstrap
Εξάρτημα για τη δημιουργία τακτοποιημένων διακοπτών. Κατάλληλο για οποιοδήποτε σχέδιο ιστότοπου και όλες οι παράμετροι προσαρμόζονται εύκολα εδώ: διαστάσεις, κινούμενα σχέδια, χρώμα κ.λπ.
Μέγιστο μήκος εκκίνησης
Ένας καλός "περιοριστής" για πεδία εισαγωγής κειμένου. Εύκολο στη χρήση, μερικές φορές είναι απλώς μια απαραίτητη προσθήκη.
Επιλέξτε Bootstrap
Ένα πολύ ελαφρύ εξάρτημα που σας επιτρέπει να επεκτείνετε σημαντικά τη λειτουργικότητα τακτική λίστα. Ακολουθήστε τον παρακάτω σύνδεσμο για να δείτε όλες τις περιπτώσεις χρήσης.
Εκλεκτός
Ένα πολύ απλό σενάριο για σημαντική βελτίωσησύνθετα κουτιά. Υποστηρίζει πολλές επιλογές και παραλλαγές για τη χρήση αυτού του πεδίου.
Πολλαπλή επιλογή εκκίνησης
Μια άλλη επιλογή για την επέκταση του πεδίου λίστας. Αυτό το σενάριοεπεξεργάζεται συμβάντα κατά το άνοιγμα/κλείσιμο/επιλογή κ.λπ. Ποτέ δεν ξέρεις τι θα ζητήσει ο πελάτης...
Bootstrap Validator
Ένα απαραίτητο στοιχείο κατά την εργασία με φόρμες στο πλαίσιο Bootstrap. Εξοικονομεί πολύ χρόνο: εκτός από τον έλεγχο, περιέχει ήδη έτοιμο σχέδιοπεδία φόρμας.
jqBootstrapValidation
Ένα άλλο στοιχείο (επιλογή) για την επικύρωση φορμών στο πλαίσιο Bootstrap. Περιέχει μεγάλο αριθμόεπιλογές για τη δημιουργία επικύρωσης εισόδου χρήστη.
Μεταφόρτωση αρχείου jQuery
Ένα καλό στοιχείο που μπορεί να εξοικονομήσει πολύ χρόνο εάν χρειαστεί να προσθέσετε ένα πεδίο για τη μεταφόρτωση αρχείων. Υποστηρίζει πολλές πλατφόρμες διακομιστών.
Αυτόματη συμπλήρωση ετικέτας Bootstrap
Εξάρτημα για εύκολη δημιουργία αυτόματης συμπλήρωσης. Πολύ εύκολο στη χρήση και ελαφρύ (σε βάρος) σενάριο. Νομίζω ότι αξίζει να προστεθεί στην εργαλειοθήκη σας.
Tokenfield για Bootstrap
Εξάρτημα για εύκολη δημιουργία ετικετών. Πλήρως διακοσμημένο, έχει πολλές επιλογές. Υποστηρίζει είσοδο τόσο από το πληκτρολόγιο όσο και από το πρόχειρο.
Ετικέτα στη θέση του
Ένα ελαφρύ σενάριο για τη δημιουργία ενός ασυνήθιστου εφέ συνδυασμού ενός στοιχείου ετικέτας με ένα πεδίο εισαγωγής. Έχει πολλές επιλογές. Μερικές φορές μπορεί ακόμη και να φανεί χρήσιμο :).
Μετρητής αντοχής
Στοιχείο για τον προσδιορισμό της πολυπλοκότητας του εισαγόμενου κωδικού πρόσβασης. Μια απλή λύση σε ένα κοινό πρόβλημα. Περιλαμβάνει πολλές επιλογές και έτοιμο σχέδιο.
Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θα ήθελα να συνεχίσω να δίνω παραδείγματα χρήσης προς όφελος της απλοποίησης και της τυποποίησης της διάταξης του ιστότοπου. Φυσικά, δεν πρόκειται για πρόγραμμα δημιουργίας ιστοτόπων, όπου τα απαραίτητα στοιχεία ιστότοπου μπορούν να συρθούν με το ποντίκι στο σωστό μέροςκαι για εργασία με την οποία δεν απαιτούνται ειδικές γνώσεις. Οχι. Αλλά αυτό το πράγμα επιτρέπει δημιουργήστε "δικτυακούς τόπους δοκιμών" για όλουςποιος θα κυριαρχήσει μικρό σετ«κόλπα».
Προς απογοήτευση των περισσότερων, πρέπει να παραδεχτούμε ότι το Bootstrap είναι επίσης απαραίτητο όταν μαθαίνετε χωρίς αυτούς, όλα αυτά θα είναι μια πλήρης ανοησία για εσάς. Αλλά δεν θα σας ζητηθεί να έχετε κάποια φιλιγκράν τεχνογνωσία στο στυλ - θα χρειαστεί απλώς να μάθετε πώς να συνδέσετε τις δυνατότητες αυτού του πλαισίου για να πραγματοποιήσετε τις ιδέες σας σε «επαγγελματικό» επίπεδο. Και τότε όλα θα πάνε όπως τα σχεδίασε…
Λίγο νωρίτερα, εσύ κι εγώ μιλήσαμε ήδη για κάτι, μάθαμε κάτι και είχαμε ακόμη και την επιθυμία να καταλάβουμε περαιτέρω. Το τελευταίο είναι αξιέπαινο, αλλά για όσους εντάχθηκαν μόλις τώρα, θα σας προσφέρω προηγούμενα έργα σχετικά με το θέμα του mastering Bootstrap, τα οποία θα ήταν καλό να μελετήσετε (και κατά προτίμηση με τη δεδομένη σειρά):
Σήμερα έχουμε μια σειρά στο σχεδιασμό χρησιμοποιώντας τη λειτουργία Bootstrap διάφορα στοιχείαπλοήγηση- ψίχα ψωμιού, κάθετη και οριζόντια μενού, καθώς και ένα αναπτυσσόμενο μενού. Τίποτα από αυτά δεν είναι δύσκολο, αλλά συνήθως είναι πιο εύκολο να μάθεις από παραδείγματα. Λοιπόν, στο επόμενο άρθρο θα εξετάσουμε τη δημιουργία εναλλασσόμενων καρτελών με περιεχόμενο σε οριζόντια και κάθετη σχεδίαση (σαν ακορντεόν). Λοιπόν, σήμερα η πλοήγηση και όλα όσα σχετίζονται με αυτήν. Πάμε...
Σχεδιασμός φρυγανιάς χρησιμοποιώντας Bootstrap
Για άλλη μια φορά, θα ήθελα να επιστήσω την προσοχή σας στο γεγονός ότι αυτό το πλαίσιο δίνει στον ιστότοπό σας μια «αριστοκρατική» εμφάνιση, η οποία σας επιτρέπει να κάνετε την αντίληψη του περιεχομένου του ιστότοπου πιο απλή και πιο φυσική για τους επισκέπτες του. Θα συνεχίσουμε να εξετάζουμε τη χρήση του σε κάποιο ανάλογο απλούστερο HTMLμια τοποθεσία για την οποία δεν χρησιμοποιείται κινητήρας. Εκείνοι. σε αυτό αντιπροσωπεύουν μεμονωμένες σελίδες του ιστότοπου ξεχωριστό HTMLαρχεία στα οποία είναι συνδεδεμένο το Bootstrap χρησιμοποιώντας τα μέσα που περιγράφονται στο πρώτο άρθρο, έτσι ώστε να μην φαίνονται χειρότερα από αυτά των ανθρώπων.
Αυτό δεν σημαίνει ότι το Bootstrap δεν μπορεί να συνδεθεί στον κινητήρα. Είναι δυνατό, και αν υπάρχει χρόνος και επιθυμία, θα μιλήσουμε για αυτό χρησιμοποιώντας το Joomla ως παράδειγμα. Αλλά είναι πιο βολικό να εξηγήσουμε τις αρχές χρήσης αυτού του πλαισίου χρησιμοποιώντας το παράδειγμα μεμονωμένων σελίδων ενός συγκεκριμένου απλού ιστότοπου Html, για τη δημιουργία του οποίου και τη σύνδεση του Bootstrap σε αυτό μιλήσαμε στα πρώτα άρθρα αυτής της σειράς. Ωστόσο, ας ασχοληθούμε.
Σήμερα λοιπόν έχουμε πλοήγηση στον ιστότοπο. Το Bootstrap προσφέρει πολλές λύσεις σε αυτό το θέμα, όπως καρτέλες, κουμπιά πλοήγησης, αναπτυσσόμενα μενού, λίστες, γραμμές πλοήγησης, ψίχουλα, ακόμα και σελιδοποίηση. Όλα αυτά είναι πραγματικά πολύ σημαντικά, γιατί χωρίς σωστά διαμορφωμένη και καλά σχεδιασμένη πλοήγηση, οι επισκέπτες θα χαθούν στον ιστότοπό σας, γεγονός που μπορεί να οδηγήσει σε χειρότερους παράγοντες συμπεριφοράς.
Ορισμένα στοιχεία απαιτούν συνεργασία με ένα σενάριο Java (για παράδειγμα, αναπτυσσόμενα μενού ή εναλλαγή καρτελών με περιεχόμενο). Αλλά σε αυτό το πλαίσιο, όλα αυτά επιτυγχάνονται με στοιχειώδη τρόπο - απλά προσθέτοντας την απαιτούμενη κλάση ή αναγνωριστικό στο επιθυμητό στοιχείο HTMLκώδικας. Λοιπόν, θα το δείτε μόνοι σας (σε αυτό το άρθρο, χρησιμοποιώντας τα αναπτυσσόμενα μενού ως παράδειγμα και στο επόμενο άρθρο, χρησιμοποιώντας τις καρτέλες ως παράδειγμα).
Ας ξεκινήσουμε με κάτι πιο απλό, δηλαδή με. Στον συγκεκριμένο σύνδεσμο θα βρείτε ένα παράδειγμα εφαρμογής τους στο WordPress και σήμερα δεν μιλάμε για την υλοποίησή τους σε καμία μηχανή, αλλά μάλλον για να τους δώσουμε μια «πιστωτική» εμφάνιση. Η ίδια η ανάγκη χρήσης τέτοιων στοιχείων πλοήγησης σε έναν ιστότοπο, νομίζω, δεν χρειάζεται να δικαιολογηθεί.
Συνήθως, τα ψίχουλα βρίσκονται στην κορυφή των ιστοσελίδων και χρησιμεύουν για να κατανοήσουν γρήγορα πού βρίσκεται ο χρήστης αυτή τη στιγμή(σε σχέση με την παγκόσμια ιεραρχία ιστοτόπων). Με άλλα λόγια, προσθέτουν διαδραστικότητα στο έργο σας.
Εκείνοι. καταλαβαίνετε σε ποια ενότητα περιλαμβάνεται αυτό το άρθρο (προϊόν, υπηρεσία) και μπορείτε να μεταβείτε απευθείας σε αυτό για να δείτε τις υπόλοιπες προσφορές. Ας τους μιμηθούμε. Σε κώδικα Html, αυτό θα μορφοποιηθεί ως μια απλή λίστα, στην οποία είναι σημαντική η σειρά των στοιχείων.
Για καλύτερη κατανόηση, ας δημιουργήσουμε σελίδα HTML, θυμίζει κάπως πραγματική ιστοσελίδα με πρότυπο για ψίχουλα ψωμιού. Λοιπόν, μετά από αυτό θα επισημάνουμε αυτό το πολύ κενό χρησιμοποιώντας τις τάξεις Bootstrap 3, έτσι ώστε το μάτι να είναι ευχαριστημένο.
Πιο συγκεκριμένα, θα δημιουργήσω το πρότυπο μόνος μου και θα σας προσφέρω μόνο, κατ' αναλογία με προηγούμενα άρθρα αυτής της ενότητας, να κατεβάσετε το αρχείο sait-7.html(για αυτό, επιλέξτε το στοιχείο "Αποθήκευση ως..." από το μενού περιβάλλοντος) ώστε να μπορείτε στη συνέχεια να προσθέσετε τις απαραίτητες κλάσεις bootstrap σε αυτό το "ψάρι". Θα χρειαστεί επίσης να τοποθετηθεί στο φάκελο Bootstrap (στην ρίζα του).
Αν κοιτάξεις πηγαίος κώδικαςαρχείο sait-7.html, θα δείτε ότι το Bootstrap και το jquery είναι ήδη συνδεδεμένα σε αυτό και έχει επίσης προστεθεί περιεχόμενο για την προσομοίωση των περιεχομένων της σελίδας. Ναι, θα χρειαστείτε επίσης ένα φάκελο με τις εικόνες που χρησιμοποιούνται σε αυτήν τη σελίδα. Μπορείτε να το κατεβάσετε από εδώ - img-6.zip. Απλώς αποσυμπιέστε το αρχείο και τοποθετήστε τις εικόνες που περιέχει στον φάκελο img. Η δομή θα μοιάζει με αυτό:
Το τεμάχιο εργασίας μας αυτή τη στιγμή φαίνεται μάλλον απαράμιλλο - μια συνηθισμένη αριθμημένη λίστα που σε καμία περίπτωση δεν ενθαρρύνει τον χρήστη να σκεφτεί ότι αυτά είναι τα περίφημα ψίχουλα ψωμιού:
Αλλά μην ανησυχείς, όλα θα πάνε καλά τώρα. Θα χρειαστεί μόνο να προσθέσετε τις απαραίτητες κλάσεις στα στοιχεία αυτής της λίστας (θα είναι δυνατά, και ταυτόχρονα γράφεται για τη σελιδοποίηση ακριβώς από κάτω) και θα αστράφτει με νέα χρώματα. Βρήκατε τις ετικέτες λίστας στον κώδικα του αρχείου sait-7.html; Τέλεια, τώρα προσθέστε την κλάση breadcrumb στην ετικέτα OL και επίσης σημειώστε με την ενεργή κλάση το LI (τελευταίο) στοιχείο που αντιπροσωπεύει τρέχουσα τοποθεσίαχρήστη στην πλοήγηση του ιστότοπου.
Ως αποτέλεσμα, ο κώδικας θα πρέπει να μοιάζει κάπως έτσι:
Λοιπόν, στην πειραματική μας σελίδα όλα θα γίνουν επίσης πολύ όμορφα και θα μοιάζουν με αληθινά ψίχουλα (ακολουθία πλοήγησης) σχεδιασμένα με χρήση Bootstrap:
Είναι σαφές ότι εάν το Bootsrap είναι συνδεδεμένο σε έναν προσαρμοσμένο ή δημοσίως διαθέσιμο κινητήρα, τότε αυτές οι κλάσεις θα πρέπει να εισαχθούν σε εκείνα τα αρχεία προτύπων όπου περιγράφεται η εργασία του breadcrumbs. Στην περίπτωσή μας, υπάρχει ένας τετριμμένος ιστότοπος Html με μικρό αριθμό σελίδων, όπου τα πάντα γράφονται χειροκίνητα (συμπεριλαμβανομένης της ακολουθίας πλοήγησης) για κάθε σελίδα. Κατ 'αρχήν, ένα μικρό έργο μπορεί να γίνει ακριβώς με αυτόν τον τρόπο, επειδή το βίδωμα του κινητήρα δεν είναι πάντα σκόπιμο.
Πώς να αλλάξετε το διαχωριστικό σε ψίχουλα ψωμιού;
Ωστόσο, ας επιστρέψουμε στα πρόβατά μας. Αθέτηση Η κάθετο χρησιμοποιείται ως διαχωριστικό(αυτό ορίζεται στα στυλ CSS του Bootstrap). Δεν θα πω ότι αυτό είναι κακό (μου αρέσει), αλλά αν έχετε μια απολύτως υγιή επιθυμία να πειραματιστείτε, τότε με λίγα λόγια θα περιγράψω τα βήματα που θα πρέπει να γίνουν για αυτό. Για παράδειγμα, αντί για κάθετο, ας προσθέσουμε κάτι κατάλληλο σε νόημα (ένα βέλος ή κάτι άλλο), το οποίο έχουμε ήδη συζητήσει σε ένα από τα προηγούμενα άρθρα. Ας;
Γενικά, στο αρχείο CSS από το bootstrap (bootstrap.css ή bootstrap.min.css - ανάλογα με το ποιο έχετε συνδέσει), αυτό το διαχωριστικό προστίθεται χρησιμοποιώντας Δεν υπάρχει κώδικας HTML). Για παράδειγμα, στην κορυφή αυτής της σελίδας μπορείτε να δείτε τον πίνακα περιεχομένων της, αλλά δεν θα μπορείτε να αντιγράψετε τη λέξη "Πίνακας περιεχομένων" στο πρόχειρο, επειδή δεν υπάρχει στο περιεχόμενο (προστίθεται μέσω CSS ως στοιχείο σχεδίασης). Αλλά δεν είναι αυτό το θέμα.
Απλώς θα χρειαστεί να βρούμε αυτό το μέρος στο αρχείο στυλ Bootstrap bootstrap.css και χρησιμοποιώντας την αναζήτηση σελίδας να αναζητήσουμε breadcrumb. Αυτό που θα βρείτε θα μοιάζει κάπως έτσι:
Breadcrumb > li + li:before ( padding: 0 5px; χρώμα: #cccc; περιεχόμενο: "/\00a0"; )
Είναι ένα τρομακτικό σχέδιο, αλλά το μόνο που χρειάζεται να κάνουμε είναι να απενεργοποιήσουμε την προσθήκη καθέτων. Ωστόσο, σας συμβουλεύω να μην κάνετε αλλαγές απευθείας στο bootstrap.css. Για να προσθέσετε τα δικά σας στυλ, αν θυμάστε, δημιουργήσαμε ειδικά και συνδέσαμε (διαβάστε) το αρχείο ανάλογα manual.css. Σε αυτό (στο τέλος) θα προσθέσουμε κάτι σαν αυτό:
Breadcrumb > li + li:before ( περιεχόμενο: κανένα; )
Αφού αποθηκεύσετε τις αλλαγές, ενημερώστε ανοιχτή σελίδακαι θα δείτε ότι το διαχωριστικό στα ψίχουλα έχει εξαφανιστεί χωρίς ίχνος:
Η μισή μάχη έγινε. Το μόνο που μένει είναι να προσθέσετε τα εικονίδια γλυφών. Είναι εύκολο να το κάνετε αυτό - όπου πρέπει να είναι το διαχωριστικό, βάλτε το εκεί Ετικέτα SPANμε την κλάση του επιθυμητού εικονιδίου γλυφής. Για παράδειγμα, όπως αυτό:
Κατέληξε να μοιάζει με αυτό:
Έχουμε ήδη συζητήσει πώς να βάλετε ένα διαφορετικό εικονίδιο ή να αλλάξετε το χρώμα του στο προηγούμενο άρθρο. Ας προχωρήσουμε.
Σχεδιασμός μενού ως καρτέλες ή κουμπιά πλοήγησης
Είναι ίσως δύσκολο να βρεις τώρα έναν ιστότοπο που να μην έχει γραμμή πλοήγησης (μενού). Είναι αυτό που συνδέει όλες τις σελίδες μεταξύ τους και επιτρέπει στον επισκέπτη να περιηγηθεί σε αυτές χωρίς κανένα πρόβλημα. Ο αξιοπρεπής σχεδιασμός μενού είναι επίσης μια πολύ σημαντική εργασία, την οποία το Bootstrap μπορεί να διευκολύνει σημαντικά χωρίς να χάσει την ποιότητα.
Για να μην ταλαιπωρηθείτε πολύ να μιμηθείτε το μενού, απλώς προσθέστε το sait-7.html στο ήδη υπάρχον αρχείο, αμέσως μετά ετικέτα divμε την κλάση κοντέινερ, την ακόλουθη κατασκευή, η οποία είναι ουσιαστικά μια λίστα που θα τοποθετηθεί σε ξεχωριστή σειρά του πλέγματος Bootstrap (θα καταλαμβάνει και τις 12 στήλες σε πλάτος):
Εδώ, όμως, ήμουν παρεστραμμένος και αντί για το συνηθισμένο κοντέινερ DIV με την κλάση σειρών, έγραψα την ετικέτα σημασιολογική σήμανση NAV (που αντιπροσωπεύει τη βασική πλοήγηση ιστότοπου στην προδιαγραφή Html 5). Ουσιαστικά αυτό είναι το ίδιο DIV, αλλά με μια υπόδειξη για τις μηχανές αναζήτησης ότι αυτό είναι ένα μενού. Μην δίνετε πολλή σημασία σε αυτό. Αυτή η λίσταΧωρίς σωστό σχεδιασμό φαίνεται αρκετά φτωχό:
Ας το βελτιώσουμε (στυλ) χρησιμοποιώντας τις δυνατότητες του Bootstrap 3. Το μόνο που χρειάζεστε για αυτό είναι θα βρείτε σε αυτή την ενότητα της βοήθειας, και απλά θα φέρω συγκεκριμένα παραδείγματαεφαρμογή αυτών των οδηγιών.
Για να δημιουργήσετε μενού σε στυλ καρτέλας, θα αρκεί να προσθέσετε την κλάση nav-tabs στην ετικέτα λίστας και στην ετικέτα LI που αντιστοιχεί στην τρέχουσα σελίδα, θα χρειαστεί να προσθέσετε παραδοσιακά την ενεργή τάξη (ώστε ο χρήστης να γνωρίζει την απάντηση στην ερώτηση: «και πού είμαι»).
Ως αποτέλεσμα, μια λίστα χωρίς νόημα, με το κύμα ενός μαγικού ραβδιού, μετατρέπεται σε ένα μενού αντάξιο της ματιάς του επισκέπτη:
Cool, σωστά; Μου αρέσει το Bootstrap.
Εάν πρέπει να σχεδιάσετε ένα κατακόρυφο μενού, τότε χρειάζεται μόνο να προσθέσετε μία ακόμη κλάση: nav-stacked . Θα λάβετε κάτι σαν:
Είναι αλήθεια ότι στην περίπτωσή μας αυτό θα είναι περιττό, αλλά πολύ συχνά προστίθενται μη βασικά στοιχεία πλοήγησης σε κάθετα μενού (περικλείοντάς τα στην αριστερή ή τη δεξιά στήλη του ιστότοπου), επομένως πρέπει να καταλάβετε πώς μπορούν να σχεδιαστούν.
Παρεμπιπτόντως, η επιλογή καρτελών στην περίπτωση κατακόρυφων μενού δεν φαίνεται εξαιρετική στο Bootstrap, επομένως είναι καλύτερα σε αυτήν την περίπτωση χρησιμοποιήστε τα κουμπιά πλοήγησης, τα οποία καθορίζονται αντικαθιστώντας την κατηγορία nav-tabs με nav-pills:
Σε έναν πραγματικό ιστότοπο μπορεί να μοιάζει κάπως έτσι:
Η τρέχουσα ανοιχτή σελίδα στο μενού επισημαίνεται ξανά προσθέτοντας την ενεργή κλάση στην επιθυμητή ετικέτα LI. Αποδεικνύεται, όπως μπορείτε να δείτε, όλα είναι πολύ ευπαρουσίαστα και χωρίς κανένα πρόβλημα. Έχουμε ήδη συζητήσει πώς να αλλάζετε χρώματα ώστε να ταιριάζουν με το στυλ του ιστότοπού σας σε προηγούμενα άρθρα.
Στην πραγματικότητα, και επάνω μενούμπορεί επίσης να γίνει με τη μορφή κουμπιών πλοήγησης αντικαθιστώντας απλώς τις κλάσεις (nav-tabs με nav-pills) στην ετικέτα λίστας, η οποία ορίζει αυτό ακριβώς το μενού στον κώδικα Html της σελίδας. Θα αποδειχθεί, για παράδειγμα, ως εξής:
Είναι αλήθεια ότι το επάνω μενού από προεπιλογή δεν εκτείνεται σε όλο το πλάτος της σελίδας. Σε κάποιους αρέσει, αλλά σε άλλους θα θέλουν περισσότερα. Γενικά, να τεντώστε το μενού στο Bootstrap 3 σε όλο το διαθέσιμο πλάτος(για εμάς αυτό είναι ολόκληρο το πλάτος της διάταξης, επειδή στη γραμμή μενού καταλαμβάνει όλες τις στήλες του αόρατου πλέγματος), θα χρειαστεί και πάλι να προσθέσετε μια άλλη κατηγορία nav-justified:
Θα μοιάζει κάπως έτσι:
Έτσι, χρησιμοποιώντας τα τακούνια των τάξεων που περιγράφονται παραπάνω, μπορείτε να αλλάξετε την εμφάνιση (και ακόμη και τον προσανατολισμό) της γραμμής πλοήγησης με λίγα μόνο κλικ.
Πώς να προετοιμάσετε ένα μενού για προβολή σε μικρές οθόνες;
Μπορείτε να βρείτε όλες τις επιλογές για το σχεδιασμό του πίνακα πλοήγησης σε αυτήν την ενότητα της βοήθειας. Υπάρχουν πολλά που περιγράφονται εκεί, αλλά απλά δεν υπάρχει χρόνος να τα δείξουμε όλα. Ας φτιάξουμε λοιπόν κάτι ως παράδειγμα, και νομίζω ότι τα υπόλοιπα θα τα καταφέρετε μόνοι σας.
Το Bootstrap 3 είναι κατά κύριο λόγο μια σχεδίαση με απόκριση (αυτό συμβαίνει όταν αλλάζει το μέγεθος της οθόνης, χρησιμοποιούνται διαφορετικά μοντέλα για τη δημιουργία περιεχομένου για να γίνει πιο εύκολα αντιληπτό). Κατ 'αρχήν, το μενού θα προσαρμοστεί στο μέγεθος της οθόνης από προεπιλογή, αλλά μπορείτε να το κάνετε έτσι για smartphone θα εμφανιζόταν ως μόνο ένα κουμπί(με τρεις οριζόντιες ρίγες), με αποτέλεσμα να μην καταλαμβάνει ολόκληρη την πρώτη οθόνη. Δεν είναι τόσο δύσκολο να γίνει.
Αντικαταστήστε τις γραμμές:
Για μια "ελαφρώς" τροποποιημένη έκδοση:
Ας δούμε τι έγινε και μετά θα εξηγήσω εν συντομία τι είναι τι. Έτσι, στις οθόνες των οθονών και των φορητών υπολογιστών, οι χρήστες θα δουν αυτό το μενού:
Λοιπόν, πρώτα απ 'όλα, είναι εντυπωσιακό ότι έχει γίνει μαύρο, και το κείμενο των σημείων, αντίθετα, είναι λευκό. Στην πραγματικότητα, η προσθήκη της κλάσης navbar-inverse είναι υπεύθυνη για αυτό. Αλλά αυτό δεν είναι το κύριο πράγμα. Εάν μειώσετε την περιοχή προβολής (παράθυρο προγράμματος περιήγησης), τότε ορισμένη στιγμήΑπό ολόκληρο το μενού θα υπάρχει μόνο ένα κουμπί με τρεις λωρίδες:
Όπως ανέφερα ήδη, θα είναι βολικό κατά την προβολή ιστότοπου από smartphone. Κάνοντας κλικ σε αυτό το κουμπί, ο χρήστης θα δει τα περιεχόμενα του μενού σε αυτή τη μορφή:
Νομίζω ότι βγήκε ωραίο. Εάν θέλετε το κουμπί να εμφανίζει τέσσερις οριζόντιες λωρίδες, προσθέστε μια άλλη γραμμή:
Γενικά ο σχεδιασμός:
είναι υπεύθυνος για την εμφάνιση αυτού του κουμπιού με τρεις λωρίδες κατά την επόμενη κατάρρευση του συστήματος πλέγματος Bootstrap. Τα χαρακτηριστικά που ξεκινούν με δεδομένα είναι υπεύθυνα για την αλληλεπίδραση Html και Javascript.
είναι υπεύθυνος για τη μετακίνηση στοιχείων μενού "κάτω από το κουμπί" κατά την προβολή του ιστότοπου σε αναλύσεις μικρής οθόνης. Απλώς δεν υπάρχει αρκετός χρόνος για να εξηγηθεί με περισσότερες λεπτομέρειες και το άρθρο θα φουσκώσει υπερβολικά. Απλώς δοκιμάστε αυτήν τη μέθοδο βελτιστοποίησης μενού Bootstrap αν σας αρέσει. Και αν όχι, ξέχνα…
Πώς να δημιουργήσετε ένα σταθερό μενού χρησιμοποιώντας το Bootstrap;
Τι εννοώ με τον όρο σταθερό μενού; Λοιπόν, είναι όπως σε αυτό το ιστολόγιο - το επάνω μενού, όταν ξεκινάτε να κάνετε κύλιση στη σελίδα, φαίνεται να κολλάει στην κορυφή της περιοχής προβολής και παραμένει στο οπτικό πεδίο του επισκέπτη για όλη την ώρα που βρίσκεται στον ιστότοπο. Μπορεί κανείς να διαφωνήσει σχετικά με τη χρησιμότητα αυτής της προσέγγισης, αλλά θα περιγράψω μόνο τον τρόπο εφαρμογής μιας τέτοιας δυνατότητας στο Bootstram 3 (ειδικά επειδή δεν χρειάζεται να κάνετε κάτι ιδιαίτερο για αυτό - απλώς προσθέστε μια κλάση).
Στην πραγματικότητα, το έχω ήδη αφήσει να ξεφύγει για να επισυνάψετε ένα μενού, απλά πρέπει να προσθέσετε την κλάση navbar-fixed-top ώστε να είναι σταθερή στην επάνω θύρα προβολής. Ταυτόχρονα, θα τεντωθεί σε όλο το πλάτος της οθόνης για να φαίνεται πιο οργανικό.
Το μόνο πράγμα είναι ότι στην αρχή, όταν ο επισκέπτης δεν έχει αρχίσει ακόμα να κάνει κύλιση στη σελίδα, στο μενού μπλοκάρει την πάνω περιοχή.
Δεν είναι δύσκολο να διορθώσετε αυτό το πρόβλημα. Στο δικό μας αρχείο στυλ manual.css, το οποίο δημιουργήσαμε και συνδέσαμε με σύνεση σε όλες τις σελίδες του ιστότοπου, θα χρειαστεί να προσθέσουμε μόνο ένα πράγμα στην αρχή πρόσθετος κανόναςγια την ορατή περιοχή του ιστότοπου (ετικέτα σώματος):
Σώμα ( padding-top: 70px; )
Μετά από αυτό όλα φαίνονται απλά υπέροχα:
Λοιπόν, κατά την κύλιση της σελίδας, το μενού, όπως συμφωνήθηκε, θα παραμείνει πατημένο στην κορυφή της περιοχής προβολής (σταθερό).
Πώς να οργανώσετε ένα αναπτυσσόμενο μενού στο Bootstrap 3;
Εν κατακλείδι, θα ήθελα να δώσω τις απαραίτητες εξηγήσεις σχετικά με τη δημιουργία αναπτυσσόμενων μενού χρησιμοποιώντας το Bootstrap. Δεν χρειάζεται να μιλήσουμε για τα πλεονεκτήματα των αναπτυσσόμενων μενού, ειδικά σε τοποθεσίες όπου μπορεί να είναι πολύ δύσκολο να δημιουργηθεί βολική χρηστικότητα χωρίς εκτεταμένη πλοήγηση. Γενικά όποιος το χρειάζεται θα το εκτιμήσει.
Όλες οι πληροφορίες που χρειάζεστε για να δημιουργήσετε ένα αναπτυσσόμενο μενού περιέχονται σε αυτήν την ενότητα της βοήθειας για το Bootstrap. Θα εξετάσουμε ένα παράδειγμα εφαρμογής αυτής της γνώσης σε έναν πίνακα πλοήγησης που δημιουργήθηκε προηγουμένως. Ας προσθέσουμε απλώς πολλά υποστοιχεία σε ένα υπάρχον μενού για ένα από τα στοιχεία εισάγοντας μια ένθετη λίστα. Θα μοιάζει κάπως έτσι στον κώδικα:
Αλλά μόλις προσθέσουμε την αναπτυσσόμενη κλάση στην ετικέτα LI (το στοιχείο μενού από το οποίο θα εξαφανιστούν τα υπο-στοιχεία που προστέθηκαν πρόσφατα) και... Δεν θα γίνει τίποτα. Ας κάνουμε λίγη περισσότερη μαγεία για να έχουμε ένα παρόμοιο σχέδιο:
Τότε όλα θα παίξουν όπως πρέπει. Ή όχι; Όλα θα πάνε όπως πρέπει:
Τώρα μια μικρή διευκρίνηση. Σε τι χρησιμεύει το απόσπασμα που φαίνεται παρακάτω;
Είναι σωστό να προσθέσετε ένα τόσο υπέροχο τρίγωνο με κατεύθυνση προς τα κάτω δίπλα σε ένα στοιχείο μενού που έχει αναπτυσσόμενα υποστοιχεία. Αυτό θα βοηθήσει τους επισκέπτες να το μαντέψουν εύκολα. Λοιπόν, ολόκληρο το αναπτυσσόμενο μηχάνημα εκκινείται από το χαρακτηριστικό data-toggle="dropdown", χρησιμοποιώντας τις δυνατότητες της Javascript για αυτό το θέμα.
Τελευταία ενημέρωση: 31/10/2015
Το Bootstrap έχει έναν αριθμό στοιχείων που υπερβαίνουν τα τυπικά κουμπιά ή τα πεδία κειμένου για να παρέχουν πιο σύνθετα στοιχεία. Μπορείτε να βρείτε μια πλήρη λίστα των στοιχείων Bootstrap στην επίσημη σελίδα του έργου http://getbootstrap.com/components/. Ας δούμε εν συντομία μερικά από αυτά.
Μπάρες πλοήγησης
Το πρώτο στοιχείο Bootstrap που συναντάμε στο έργο είναι η γραμμή πλοήγησης. Αυτό το στοιχείο βρίσκεται στην κύρια σελίδα _Layout:
Και ακόμα κι αν περιορίσουμε τα όρια του προγράμματος περιήγησης ιστού ή εκκινήσουμε τον ιστότοπο σε μια κινητή συσκευή, θα δούμε ότι η γραμμή πλοήγησης παραμένει αρκετά λειτουργική:
Ένα συστατικό αντιπροσωπεύει μια κλάση Navbar. Για να παραμείνει σταθερή η γραμμή στο επάνω μέρος της σελίδας, χρησιμοποιείται επίσης η κλάση navbar-fixed-top. Αν, αντίθετα, θέλαμε να διορθώσουμε τον πίνακα στο κάτω μέρος, τότε σε αυτήν την περίπτωση θα χρησιμοποιούσαμε την κλάση navbar-fixed-bottom
Επίσης, η κλάση navbar-inverse χρησιμοποιείται στη δήλωση μπλοκ πλοήγησης, η οποία αντιστρέφει τα προεπιλεγμένα χρώματα. Θα μπορούσαμε να χρησιμοποιήσουμε το navbar-default αντί για αυτήν την κλάση, οπότε θα είχαμε ένα μενού με τυπικά ανοιχτά χρώματα.
Η κλάση nav χρησιμοποιείται για τη δημιουργία συνδέσμων πλοήγησης. Το Bootstrap εισάγει διάφορες κατηγορίες για το στυλ συνδέσμων πλοήγησης. Η προεπιλεγμένη κλάση είναι το navbar-nav, αλλά μπορούμε να χρησιμοποιήσουμε άλλες επιλογές.
Για να δημιουργήσετε πλοήγηση τύπου καρτέλας, χρησιμοποιήστε την κλάση nav-tabs. Για παράδειγμα, το ακόλουθο μενού:
θα δώσει αυτό το αποτέλεσμα:
Μια άλλη επιλογή για τη δημιουργία μιας γραμμής συνδέσμων είναι η κατηγορία nav-pills:
Και συνδυάζοντας τις τάξεις nav-pills και nav-stacked classes, μπορούμε να δημιουργήσουμε ένα κατακόρυφο μενού:
Σελιδοποίηση
Η κλάση σελιδοποίησης σάς επιτρέπει να δημιουργήσετε μια γραμμή συνδέσμων με τη μορφή πλοήγησης σελίδας:
- «
- 1
- 2
- 3
- 4
- 5
- »
Τίτλοι
Για να δημιουργήσετε συνδέσμους κεφαλίδας, χρησιμοποιήστε την κλάση breadcrumb:
Κουμπιά
Για να δημιουργήσετε κουμπιά, το Bootstrap έχει την κλάση btn. Συνήθως, τα κουμπιά ομαδοποιούνται χρησιμοποιώντας την κατηγορία btn-group:
Αναπτυσσόμενο κουμπί
Για να δημιουργήσουμε μια αναπτυσσόμενη λίστα χρησιμοποιώντας το παράδειγμα ενός στοιχείου, πρέπει να χρησιμοποιήσουμε ένα κουμπί μαζί με μια λίστα, η οποία θα πρέπει να έχει μια κλάση αναπτυσσόμενου μενού:
Ετικέτες
Για να σχεδιάσουμε κομμάτια κειμένου ως ετικέτες, μπορούμε να χρησιμοποιήσουμε την κλάση ετικετών. Μπορούμε επίσης να χρησιμοποιήσουμε πρόσθετες κατηγορίες ετικετών για να καθορίσουμε τον τύπο μηνύματος:
Αθέτηση Πρωταρχικός Επιτυχία Πληροφορίες Προειδοποίηση Κίνδυνος
Η κατηγορία ειδοποίησης προσφέρει παρόμοια λειτουργικότητα:
Η εργασία ολοκληρώθηκε με επιτυχία
Πρόσθετες πληροφορίες
Προσοχή!
Επικίνδυνος!
Αυτά είναι μερικά μόνο από τα στοιχεία που προσφέρει το Bootstrap. Αλλά ήδη από αυτά μπορείτε να δείτε ότι το Bootstrap είναι αρκετά ευέλικτο, και ακόμη και δομικά πολύπλοκα εξαρτήματα μπορούν εύκολα να προσαρμοστούν και να προσαρμοστούν σε συγκεκριμένες συσκευές.
Από τον συγγραφέα:Αυτό το άρθρο σας καθοδηγεί στον τρόπο ρύθμισης του Bootstrap πριν από τη λήψη και καλύπτει ορισμένες πτυχές της επιλογής στοιχείων. Θα μάθετε ποιες δυνατότητες αυτού του πλαισίου χρειάζεστε και ποιες όχι, ανάλογα με τις ανάγκες σας.
Από το προηγούμενο άρθρο, γνωρίζετε ήδη τι είναι, πότε πρέπει να χρησιμοποιείται και επίσης από τι αποτελείται. Τώρα θα μάθετε πώς να επιλέγετε στοιχεία για το έργο σας, πώς να προσαρμόζετε το πλαίσιο για να ταιριάζει στις εργασίες σας, πώς να αφαιρείτε όλα τα περιττά πράγματα και να μην μπερδεύεστε. Αυτό αρχικό στάδιοπρακτική εργασία με το Bootstrap και οποιαδήποτε βασικό σχέδιοξεκινά από αυτό το στάδιο.
Γιατί να προσαρμόσετε το Bootstrap
Αυτή είναι μια πολύ καλή ερώτηση, καθώς μπορείτε απλά να κάνετε λήψη ολόκληρου του αρχείου χωρίς να το ρυθμίσετε και να εργαστείτε με αυτό. Υπάρχουν δύο λόγοι: πρώτον, πιθανότατα δεν θα τους χρειαστείτε όλους. Στοιχεία Bootstrap, και, δεύτερον, το μέγεθος ολόκληρου του πλαισίου δεν είναι τόσο ασήμαντο (ακόμη και σε συμπιεσμένη μορφή) - 525 KB. Το Plus jQuery ζυγίζει 95 KB, γιατί χωρίς αυτό το πλαίσιο δεν θα λειτουργήσει. Κανένας προγραμματιστής front-end δεν μπορεί να αντέξει οικονομικά αυτήν την πολυτέλεια, επομένως πρέπει να αφαιρέσετε όλα τα περιττά πράγματα. Σε κάθε περίπτωση, διαγράψτε πάντα περιττά εξαρτήματα.
Επιλογή εξαρτημάτων
Στη σελίδα λήψης Bootstrap θα δείτε μια φόρμα με πλαίσια ελέγχου. Εδώ πρέπει να σημειώσετε εκείνα τα στοιχεία που θα σας φανούν χρήσιμα κατά την εργασία στο έργο. Και ας ρίξουμε τώρα μια ματιά σε μερικά από τα στοιχεία του Bootstrap και τον σκοπό τους.
Βασικό CSS (Κοινό CSS)
Αυτό είναι ένα σύνολο βασικών στοιχείων που απαιτούνται για τη βασική σήμανση. Συνιστάται πάντα να το αφήνετε ελεγμένο.
στυλ έντυπων μέσων
Αυτά είναι στυλ που χρησιμοποιούνται από προγράμματα περιήγησης πριν από την εκτύπωση των σελίδων. Μπορείτε να τα προσαρμόσετε όπως θέλετε χρησιμοποιώντας την ακόλουθη καταχώρηση:
@media print ( /* τα στυλ σας */ )
Τυπογραφία
Βασικός σχεδιασμός κειμένου: διάφορες εσοχές, παράγραφοι, εισαγωγικά, επισήμανση κώδικα, μορφοποιημένο κείμενο, επικεφαλίδες, ευρετήρια - όλα αυτά σχεδιάζονται χρησιμοποιώντας αυτά τα στυλ.
Ακόμα κι αν δεν χρησιμοποιείτε προκαθορισμένες κλάσεις στη σελίδα, το περιεχόμενό της θα αποδίδεται σε στυλ Bootstrap. Αυτό είναι χρήσιμο για όσους δεν μπορούν ή δεν θέλουν να εμβαθύνουν στον παλιό κώδικα. Απλώς συνδέστε τη βιβλιοθήκη για να κάνετε το κείμενο πιο ελκυστικό.
Δείτε πώς μπορείτε να αλλάξετε το απλό κείμενο χωρίς τη χρήση πρόσθετων στυλ:
Κώδικας
Μορφοποίηση κώδικα σε σελίδες. Φυσικά, δεν θα υπάρχει επισήμανση σύνταξης εδώ. Για να το κάνετε αυτό θα χρειαστεί να χρησιμοποιήσετε ένα πρόσθετο τρίτου μέρους (που δεν σχετίζεται με το Bootstrap). Αλλά το πλαίσιο θα σας επιτρέψει να διακρίνετε τον κώδικα από το απλό κείμενο χρησιμοποιώντας ετικέτες κώδικα, pre ή kdb.
Σύστημα πλέγματος
Η μαγεία που αξιοποιούν τα πλαίσια CSS εξακολουθεί να εμπνέει δέος στους έμπειρους προγραμματιστές που ξεκίνησαν πριν από 10 χρόνια και έπρεπε να επιλέξουν μεταξύ διάταξης βάσει πίνακα ή διάταξης που βασίζεται σε μπλοκ πριν ξεκινήσουν ένα έργο. Και σήμερα, προσθέτοντας μόνο τις κατάλληλες τάξεις, λαμβάνετε μια αποκριτική διάταξη για τον ιστότοπό σας σε μόλις 10 λεπτά.
Ας δούμε ένα παράδειγμα για το πώς μπορεί να μοιάζει αυτό:
Πίνακες
Η διάταξη πίνακα ανήκει στο παρελθόν, αλλά τα δεδομένα πίνακα θα πρέπει να εμφανίζονται κατάλληλα εάν δεν παρέχεται τίποτα άλλο. Χωρίς ένα καλά επιλεγμένο σχέδιο, τα δεδομένα δεν θα φαίνονται πολύ ελκυστικά. Προσπαθήστε να αποφύγετε την ακόλουθη οθόνη:
Αφού προσθέσετε απλώς το Bootstrap, χωρίς να κάνετε αλλαγές στο HTML, ο πίνακας θα μοιάζει με αυτό:
Έντυπα
Εάν χρειάζεται να δημιουργήσετε φόρμες, μπορείτε να χρησιμοποιήσετε το Bootstrap:
Επιλέξτε το πλαίσιο ελέγχου "Φόρμα" εάν θέλετε να δημιουργήσετε μια φόρμα.
Κουμπιά
Τα κουμπιά Bootstrap αξίζουν μια ξεχωριστή συζήτηση: από προεπιλογή διατίθενται σε 4 μεγέθη και 7 διαφορετικών τύπων. Επιπλέον, υπάρχει ένα κουμπί με ένα αναπτυσσόμενο μενού, κουμπιά αποκλεισμού κ.λπ. Από προεπιλογή, τα κουμπιά στο Bootstrap μοιάζουν με αυτό:
Αποκριτικά βοηθητικά προγράμματα
Το Bootstrap έχει ένα σετ χρήσιμα εργαλείαγια να δημιουργήσετε γρήγορα και εύκολα μια διάταξη για κινητές συσκευές. Χάρη σε αυτά τα εργαλεία μπορείτε να κρύψετε και να εμφανίσετε ορισμένα στοιχεία διαφορετικές συσκευές, αλλάξτε τα μεγέθη τους, ξεχωριστά για μεγάλες, μεσαίες και μικρές οθόνες. Αυτό το στοιχείο μειώνει σημαντικά την ποσότητα του κώδικα και αποτελείται από τις ακόλουθες κλάσεις:
Όπως μπορείτε να δείτε, το ίδιο μπλοκ μπορεί να είναι κρυφό σε ένα tablet, αλλά ορατό σε επιτραπέζιο ή φορητή συσκευή.
εξαρτήματα
Εδώ δίνεται μόνο μια σύντομη εξήγηση επειδή τα ίδια τα εξαρτήματα είναι μικρά και μπορείτε εύκολα να καταλάβετε τον σκοπό τους από το όνομα.
1. Γλυφικά εικονίδια(Γλυφικά). Εικονίδιο γραμματοσειρά. Ζυγίζει περίπου 250 KB και χρησιμοποιείται σπάνια. Επομένως, εάν δεν το χρειάζεστε, απενεργοποιήστε το.
2. Ομάδες κουμπιών(Ομάδες κουμπιών). Μπλοκ που αποτελούνται από ένα ζευγάρι κουμπιά.
3.Ομάδες πεδίων εισαγωγής(Ομάδες εισαγωγής). Επέκταση για μπλοκ κειμένου και πεδία, για παράδειγμα, "Όνομα χρήστη":
4. Πλοήγηση(Navs). Πλοήγηση μέσω καρτελών (καρτέλες). Για να το χρησιμοποιήσετε πρέπει να συνδέσετε τη μονάδα js.
5. Γραμμή πλοήγησης (Navbar). Πλοήγηση για το κύριο μενού. μπορεί να είναι σταθερό, ανοιχτό ή σκοτεινό.
6. "ψωμάκια"(ψωμάκια). Επιτρέπει στους χρήστες να παρακολουθούν την τοποθεσία στον ιστότοπο.
7. Πλοήγηση στη σελίδα(Σελιδοποίηση). Εμφανίζει τον αριθμό των σελίδων σε έναν ιστότοπο. Ιδιαίτερα χρήσιμο για blogs.
8. Εναλλαγή σελίδας(Πατζέρ). Κουμπιά εμπρός και πίσω.
9. Ετικέτες(Ετικέτες). Υπάρχουν 6 τύποι:
10. Σήματα(Σήματα). Χρησιμοποιείται, για παράδειγμα, για την εμφάνιση της ποσότητας μη αναγνωσμένα μηνύματα.
11. Μπλοκ καλωσορίσματος(Jumbotron). Μεγάλο μπλοκμε εισαγωγικό κείμενο. Συνήθως χρησιμοποιείται σε ιστότοπους προώθησης και περιέχει μια σύντομη περιγραφή του έργου.
12. Μινιατούρες(Μικρογραφίες). Υπεύθυνος για την εμφάνιση εκδόσεων μικρογραφιών εικόνων.
13. Προειδοποιήσεις(Ειδοποιήσεις). Υποδεικνύει επιτυχία, σφάλμα, πληροφορίες ή υπόδειξη.
14. Ένδειξη διαδικασίας(Γραμμές προόδου). Η πρόοδος εμφανίζεται ως ποσοστό. Επιπλέον, μπορείτε να εφαρμόσετε κινούμενα σχέδια και να προσθέσετε ένα ριγέ φόντο.
15. Αντικείμενα πολυμέσων(Στοιχεία ΜΜΕ). Μορφοποίηση μπλοκ με σχόλια, tweets κ.λπ. Αυτές είναι συνήθως λίστες με ένθετα στοιχεία, τα οποία μπορεί να έχουν διαφορετική αριστερή εσοχή, όπως τα παραδοσιακά σχόλια δέντρων.
16. Λίστα ομάδων(Λίστα ομάδων). Μορφοποίηση λιστών με πρόσθετα χαρακτηριστικά: υποσημειώσεις, σύνδεσμοι, σημειώσεις, σημειώσεις (βλ. «ετικέτες»).
17.Πάνελ(Πάνελ). Μπλοκ με κεφαλίδα, κύριο περιεχόμενο και υποσέλιδο. Μπορεί να χρησιμοποιηθεί για προηγμένες ειδοποιήσεις καθώς και για στοιχεία ελέγχου ή φόρμες.
18. Ενσωμάτωση αποκριτικών στοιχείων(Αποκριτική ενσωμάτωση). Τα αποκριτικά αντικείμενα μπορούν να επεκταθούν και να προσαρμοστούν διαφορετικά μεγέθηοθόνη για προβολή βίντεο στις απαιτούμενες αναλογίες και χωρίς να προσδιορίσετε άμεσα το μέγεθος.
19. Καταθλιπτικά στοιχεία(Πηγάδια). Μπλοκ με συμβουλές, εναλλακτικό σχέδιο για εισαγωγικά κ.λπ.
20. Κλείσιμο εικονίδιο(Εικονίδιο κλεισίματος). Ο σκοπός πρέπει να είναι ξεκάθαρος από το όνομα.
Στοιχεία JavaScript
Το Bootstrap επεκτείνει τις δυνατότητες των δυναμικών χαρακτηριστικών. Αυτή η ενότητα του πλαισίου βασίζεται στο jQuery και πρέπει να συνδεθεί στο bootstrap.min.js. Αυτή η ενότητα αποτελείται από τα ακόλουθα στοιχεία:
1. Στοιχείο Κινούμενα σχέδια(Component animations) (για JS). Ομαλές μεταβάσεις, κινούμενα σχέδια.
2. Αναπτυσσόμενα στοιχεία(Dropdowns). Αναπτυσσόμενες λίστες.
3. Συμβουλές εργαλείων(Συμβουλές εργαλείων). Μικρά αναδυόμενα μηνύματα.
4. Αναδυόμενα στοιχεία(Popovers). Ουσιαστικά οι ίδιες συμβουλές εργαλείων, στις οποίες μπορείτε να προσθέσετε δυναμικό περιεχόμενο, κεφαλίδα και κείμενο σώματος:
5. Τροπικά παράθυρα (Modals). Αναδυόμενα παράθυρα. Μπορείτε να αλλάξετε το μέγεθός τους, να προσθέσετε κεφαλίδα, κείμενο σώματος, υποσέλιδο, να τα αλλάξετε όπως θέλετε. Από προεπιλογή μοιάζουν με αυτό:
6. Στροβιλοδρόμιο(Στροβιλοδρόμιο). Ένα απλό ρυθμιστικό με επιλογή κινούμενων εικόνων.
Ρύθμιση μεταβλητών
Μπορείτε να αλλάξετε τις προεπιλεγμένες ρυθμίσεις με βάση τις ανάγκες σας. Μπορείτε να δημιουργήσετε δικό του θέμαγια το Bootstrap με δύο τρόπους:
Δημιουργήστε το αρχείο style.css και ορίστε στυλ σε αυτό που θα «αντικαταστήσουν» τα προεπιλεγμένα στυλ.
Στο μπλοκ με λιγότερες μεταβλητές, μπορείτε να αλλάξετε τις παραμέτρους σε αυτές που πραγματικά χρειάζεστε και να κάνετε λήψη του αρχείου που έχει τροποποιηθεί για εσάς από το Bootstrap.
Λήψη
Μόλις ολοκληρώσετε την αλλαγή των ρυθμίσεων, κάντε κλικ στο κουμπί «Συμπλήρωση και λήψη». Το ληφθέν αρχείο θα περιέχει μόνο τα στοιχεία που έχουμε επιλέξει. Για σύγκριση: ένα μικρό έργο χρησιμοποιεί μόνο μέρος της λειτουργικότητας, επομένως το μέγεθος του πλαισίου είναι πολύ εύκολο να μειωθεί από 600 KB σε 100 KB. Τα αρχεία που προκύπτουν μπορούν να αποθηκευτούν στο φάκελο του έργου και στη συνέχεια να συμπεριληφθούν το bootstrap.min.css και (αν χρειάζεται) το bootstrap.min.js.
Παιδιά, νομίζω ότι το Bootstrap είναι πολύ ωραίο πράγμα. Θα προσπαθήσω να εξηγήσω γιατί συμβαίνει αυτό σε αυτό το άρθρο. Λοιπόν, ας πάμε, ζητώ αμέσως συγγνώμη για το γεγονός ότι σχεδόν όλο το πρώτο μισό του άρθρου είναι γραμμένο χωρίς εικόνες, υπάρχει μόνο μια θεωρία, μια εξήγηση για το πώς λειτουργεί το πλέγμα. Αλλά αυτό είναι πολύ σημαντικό!Όποιος από εσάς το χρειάζεται θα το πάρει στα χέρια του, θα το διαβάσει και, ελπίζω, θα το καταλάβει. Το δεύτερο μισό του άρθρου γίνεται ήδη αντιληπτό πιο απλά, υπάρχουν περισσότερα παραδείγματα με στιγμιότυπα οθόνης.
Bootstrap - τι είναι;
Ας ξεκινήσουμε λοιπόν με μια σημαντική ερώτηση. Το Bootstrap είναι ένα πλαίσιο CSS και JS, ουσιαστικά ένα σύνολο αρχείων με έτοιμο γραπτό κώδικα. Ο στόχος των προγραμματιστών σχεδόν οποιουδήποτε πλαισίου είναι να απλοποιήσουν την ανάπτυξη ιστότοπου για τους ίδιους και για άλλους που θα έχουν πρόσβαση στο εργαλείο. Στην περίπτωση του Bootstrap, είναι εντελώς δωρεάν, οπότε μπορείτε να το χρησιμοποιήσετε με οποιονδήποτε τρόπο, να επεξεργαστείτε τον πηγαίο κώδικα και να προσαρμόσετε το πλαίσιο με όποιον τρόπο θέλετε. Αυτό είναι υπέροχο.
Εγκατάσταση Bootstrap
Εάν χρειάζεται απλώς να συνδέσετε τα αρχεία πλαισίου σε ένα έγγραφο HTML (για παράδειγμα, για εξάσκηση), απλώς κατεβάστε το πλαίσιο από τον επίσημο ιστότοπο getbootstrap.com, αντιγράψτε τα αρχεία του στο έργο και συνδέστε αυτά που χρειάζεστε. θα το κάνω σύντομη επισκόπησηαυτά τα αρχεία:
- bootstrap.css και bootstrap.min.css - μη συμπιεσμένες και συμπιεσμένες εκδόσεις του κώδικα CSS του πλαισίου. Συνιστάται η σύνδεση στο έργο εργασίας συμπιεσμένο αρχείο, με αυτόν τον τρόπο θα βελτιώσετε ελαφρώς την ταχύτητα λήψης σας. Αλλά αν σκοπεύετε να δείτε τον κώδικα σε ένα αρχείο, συνδέστε την ασυμπίεστη έκδοση.
- bootstrap.js και bootstrap.min.js - αρχείο με σενάρια
- ο φάκελος γραμματοσειρών και τα αρχεία glyphicons σε αυτόν είναι η γραμματοσειρά του εικονιδίου Bootstrap. Έχει περίπου 200 εικονίδια. Στις περισσότερες περιπτώσεις θα έχετε αρκετά από αυτά, μερικές φορές χρειάζεται να συνδέσετε άλλους. Θα μιλήσουμε για τη γραμματοσειρά εικονιδίων αργότερα.
Αυτό είναι το τυπικό σύνολο του πλαισίου. Στην πραγματικότητα, μπορείτε εύκολα να το προσαρμόσετε και να το αλλάξετε για να σας ταιριάζει. Για παράδειγμα, μην χρησιμοποιείτε καθόλου σενάρια ή συνδέστε μόνο ένα πλέγμα. Σε γενικές γραμμές, θα μιλήσουμε και για αυτό.
Ρωσική τεκμηρίωση Bootstrap
Πηγαίνοντας στο getbootstrapΜάλλον προσέξατε ότι όλα εδώ είναι στα αγγλικά. Θα μπορούσαμε να χρησιμοποιήσουμε τη ρωσική βοήθεια στο πλαίσιο. Είναι εύκολο να το βρεις. Για να το κάνετε αυτό, πηγαίνετε από αρχική σελίδαστο τμήμα Ξεκινώντας. Κάντε κύλιση στο κάτω μέρος, θα υπάρχει ένας σύνδεσμος προς τις μεταφράσεις. Ψάξτε για ρωσικά εκεί και κάντε κλικ σε αυτό. Αυτό είναι, τώρα είσαι στο Ρωσική έκδοσητοποθεσία. Είναι αλήθεια ότι δεν έχουν μεταφραστεί όλα εδώ, αλλά κάπου γύρω στο 70-80% είναι ακριβή, οπότε θα καταλάβετε τα πάντα.
Πλέγμα εκκίνησης
Ό,τι και να πει κανείς, το κύριο στοιχείο του Bootstrap είναι προσαρμοστικό πλέγμα. Γενικά, χωρίς αυτό, το πλαίσιο θα έχανε σχεδόν όλη την αξία του, επειδή χάρη στο πλέγμα μπορείτε να δημιουργήσετε γρήγορα προσαρμοστικά πρότυπα. Ταυτόχρονα, μπορεί να μην είστε εξοικειωμένοι με τα ερωτήματα πολυμέσων, γιατί το πλαίσιο φροντίζει για την εφαρμογή της προσαρμοστικότητας.
Τι είναι αυτές οι τάξεις; Πάμε στην τεκμηρίωση, θα μας βοηθήσει πολύ. Μεταβείτε στην ενότητα CSS - Σύστημα Πλέγματος. Γενικοί κανόνεςΗ εργασία με ένα πλέγμα είναι απλή, θα τα αναφέρω τώρα.
Πώς να εργαστείτε με ένα πλέγμα;
Σκεφτείτε το ως πίνακα html. Εάν έχετε γράψει ποτέ κώδικα HTML για πίνακες, γνωρίζετε ότι όλο το περιεχόμενο τοποθετείται στην ετικέτα πίνακα, μια σειρά τοποθετείται στην ετικέτα tr και, στη συνέχεια, τα κελιά τοποθετούνται σε αυτήν - td .
Έτσι, όλα είναι παρόμοια στο πλέγμα. Η κλάση κοντέινερ χρησιμεύει ως γενικό δοχείο για το πλέγμα. Υπάρχουν 2 επιλογές για το πλέγμα του bootstrap - εντελώς ελαστικό και εξακολουθούν να έχουν πεπερασμένο μέγιστο πλάτος. Έτσι, όταν στο γενικό μπλοκ δοθεί η κλάση κοντέινερ, η τοποθεσία θα έχει μέγιστο πλάτος 1170 εικονοστοιχείων. Δεν θα επεκταθεί άλλο. Φυσικά, το περιεχόμενο θα είναι κεντραρισμένο.
Εάν ορίσετε την κατηγορία δοχείου-υγρού, τότε το πλέγμα θα είναι εντελώς ελαστικό, δηλαδή δεν θα υπάρχουν περιορισμοί μεγέθους. Για παράδειγμα, εάν ένα άτομο ανοίξει έναν ιστότοπο σε μια οθόνη πλάτους 1920 pixel, θα τον δει σε όλο το πλάτος.
Κατά συνέπεια, το πρώτο πράγμα κατά την ανάπτυξη ενός ιστότοπου είναι να αποφασίσετε πώς θα είναι το πρότυπο - εντελώς ελαστικό ή το πλάτος του πρέπει ακόμα να περιοριστεί.
Ωραία, το μπλοκ κοντέινερ πρέπει να περιέχει μια σειρά πλέγματος. Πρέπει να τοποθετήσετε όλα τα μπλοκ που βρίσκονται στην ίδια γραμμή σε αυτό. Δηλαδή, αν πάρουμε το πιο χαρακτηριστικό πρότυπο: κεφαλίδα, κύριο μέρος, δεξιά στήλη και υποσέλιδο, τότε υπάρχουν 3 στήλες. Το πρώτο θα έχει μόνο την κεφαλίδα, το δεύτερο θα έχει το περιεχόμενο και την πλαϊνή γραμμή και το τελευταίο θα έχει το υποσέλιδο. Η σήμανση για έναν τέτοιο ιστότοπο θα ήταν κάπως έτσι:
Καπάκι
Περιεχόμενο... και πλαϊνή γραμμή
Υποσέλιδο
Αλλά προς το παρόν αυτό είναι λάθος σήμανση, γιατί λείπει... τι; Σωστά, κύτταρα! Στην περίπτωση του Bootstrap, ονομάζονται επίσης στήλες. Το πλέγμα bootstrap αποτελείται από 12 στήλες. Μπορεί να ενσωματωθεί σε οποιοδήποτε μπλοκ οποιουδήποτε πλάτους, τουλάχιστον 1200 pixel, τουλάχιστον 100. Όλα αυτά είναι επειδή το πλάτος των στηλών δεν καθορίζεται σε pixel, αλλά σε ποσοστά.
Πώς λειτουργεί αυτό το σύστημα 12 στηλών;
Έτσι, ερχόμαστε στο πιο σημαντικό θέμα που σχετίζεται με το πλαίσιο. Πιστέψτε με, αν το καταλαβαίνετε αυτό, όλα τα άλλα είναι ανοησίες. Το κύριο πράγμα είναι να κατανοήσετε πώς λειτουργεί το πλέγμα και η διαδρομή για γρήγορη προσαρμοστική διάταξη θα είναι ανοιχτή για εσάς.
Για να το κάνετε αυτό, μετακινηθείτε στην τεκμηρίωση ακριβώς από κάτω, εκεί θα βρείτε έναν πίνακα που περιέχει σημαντικές ιδιότητες πλέγματος.
Παρεμπιπτόντως, οι ίδιες οι στήλες επισημαίνονται στο Bootstrap με την κλάση, αλλά αυτή είναι μια σύνθετη κλάση, επομένως ποτέ δεν γράφουν απλώς col-. Το Bootstrap έχει 4 ειδικές κατηγορίες που έχουν σχεδιαστεί για να ελέγχουν το μέγεθος των μπλοκ σε διαφορετικά πλάτη, εδώ είναι:
- ld - για μεγάλες οθόνες, πλάτους άνω των 1200 pixel (επιτραπέζιοι υπολογιστές).
- md - για μεσαίες οθόνες, πλάτος από 992 έως 1199 (υπολογιστές, netbook).
- sm - για μικρές οθόνες, πλάτος από 768 έως 991 pixel (tablet).
- xs - πολύ μικρές οθόνες, πλάτος μικρότερο από 768 px.
Αυτές είναι οι 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, sm, md ή lg που υποδεικνύει σε ποιες οθόνες να αποκρύψετε ή να εμφανίσετε το μπλοκ.
- Για ορατό, πρέπει επίσης να προσθέσετε μία από τις τρεις τιμές: μπλοκ - εμφάνιση του στοιχείου ως στοιχείο μπλοκ, ενσωματωμένο μπλοκ - ως στοιχείο ενσωματωμένο μπλοκ, ενσωματωμένο - ενσωματωμένο.
Λοιπόν, μερικά παραδείγματα για να γίνει ξεκάθαρο:
- hidden-xs hidden-lg - θα κρύψει το στοιχείο στις μικρότερες και μεγαλύτερες οθόνες. Όπως μπορείτε να δείτε, μπορείτε να καθορίσετε πολλές κλάσεις που χωρίζονται από ένα κενό.
- ορατό-xs-inline ορατό-md-block - σε μικρές και μεγάλες οθόνες το στοιχείο δεν θα εμφανίζεται καθόλου. Σε εξαιρετικά μικρά θα είναι πεζά και σε μεσαία θα είναι μπλοκ.
- visual-lg-block - το στοιχείο θα είναι ορατό μόνο στις μεγαλύτερες οθόνες, σε όλες τις άλλες θα είναι κρυφό
Έτσι λειτουργούν όλα. Αυτό ακριβώς είναι και όχι αλλιώς. Ελπίζω να το καταλαβαίνεις αυτό. Ας το κάνουμε πράξη. Έχουμε ένα πρότυπο δοκιμής, αν και πολύ πρωτόγονο.
Εργο:εξαφανίστε την πλαϊνή στήλη στις μικρές οθόνες, καθώς και ένα προϊόν στις μικρότερες οθόνες. Και έτσι ώστε στις συσκευές xs τα προϊόντα να είναι ήδη σε 2 στήλες, όχι σε 3.
Προσπαθήστε να το κάνετε μόνοι σας, επεξεργάζοντας μόνο τον κώδικα html. Τι πρέπει να γίνει; Αρχικά, ας δούμε τη στήλη, για να την αποκρύψετε σε οθόνες sm, απλά πρέπει να προσθέσετε την κλάση hidden-sm σε αυτήν.
Τέλεια, τώρα το τρίτο προϊόν πρέπει να προσθέσει την κλάση hidden-xs και θα εξαφανιστεί στις μικρότερες οθόνες. Λοιπόν, οι κατηγορίες των υπόλοιπων δύο προϊόντων θα είναι οι εξής:
Δηλαδή, σε μεσαίες συσκευές το μπλοκ θα καταλαμβάνει 4 στήλες από τις 12, οι οποίες μπορούν να μεταφραστούν στο 33,33% του πλάτους και σε πολύ μικρές συσκευές - το 50%. Και επειδή ένα μπλοκ με ένα προϊόν θα εξαφανιστεί σε αυτό το πλάτος, και τα δύο μπλοκ με προϊόντα θα είναι τακτοποιημένα σε 1 σειρά, ως εξής:
Μεγάλος! Έχοντας καταλάβει αυτό, μπορείτε ήδη να χειριστείτε τα μπλοκ στην ιστοσελίδα σχεδόν με όποιον τρόπο θέλετε. Προσπαθήστε να επινοήσετε εργασίες για τον εαυτό σας και να τις εφαρμόσετε.
Κουνήστε με σε όλη τη διαδρομή
Στη συνέχεια θα δείξω 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 (φόντο: διαφανές;)
Αυτή είναι η εμφάνιση του ιστότοπου τώρα:
Τραπέζια bootstrap
Από προεπιλογή, ο πίνακας θα εκτείνεται σε ολόκληρο το παράθυρο, επομένως τυλίξτε τον σε ένα πλαίσιο με περιορισμένο πλάτος για να περιορίσετε τις διαστάσεις. Από προεπιλογή φαίνεται τρομερό, αλλά αν προσθέσετε την κατηγορία πίνακα στην ετικέτα πίνακα, όλα θα είναι πολύ πιο όμορφα:
