Σε αυτή την ανάρτηση θα δούμε τη διάταξη ενός ιστότοπου Bootstrap για να παρουσιάσει τις εκπληκτικές δυνατότητες αυτού του πλαισίου ανοιχτού κώδικα. Σε προηγούμενα άρθρα είχαμε εγκαταστήσει ένα περιβάλλον ανάπτυξης και τα απαραίτητα πρόσθετα για να διευκολύνουμε τη δουλειά μας.
Να θυμάστε ότι ως διαχειριστής περιεχομένου του Linux Adictos Δεν μου επιτρέπει να εισαγάγω τον κώδικα των παραδειγμάτων που ανέβασα στο GitHub. Για να τα κατεβάσετε πρέπει να εγκαταστήσετε το πακέτο Git στη διανομή σας και στη συνέχεια να γράψετε τις ακόλουθες εντολές:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Θα χρειαστεί να εκτελείτε αυτές τις δύο εντολές περιοδικά για να κάνετε λήψη των νέων αρχείων.
Αναλύοντας τον κώδικα
Τώρα στον εξερευνητή αρχείων ανοίξτε το example2.html με VSCodium. (Άνοιγμα με το δεξί κουμπί) Βλέπουμε τα εξής:
- Στη γραμμή 1 λέμε στο πρόγραμμα περιήγησης τον τύπο του εγγράφου, ώστε να ξέρει πώς να το αποδώσει.
- Η γραμμή 2 υποδεικνύει τη γλώσσα του ιστότοπου, η οποία λέει στο πρόγραμμα περιήγησης πώς να αναπαριστά ορισμένους χαρακτήρες και τη γλώσσα του περιεχομένου στις μηχανές αναζήτησης, γεγονός που διευκολύνει την τοποθέτηση. Στον κώδικά μας ορίζεται ως es αλλά υπάρχουν τοπικές παραλλαγές όπως es_ES για τα Ισπανικά από την Ισπανία ή es_AR για τα Ισπανικά από την Αργεντινή.
- Από τη γραμμή 3 έχουμε ένα κοντέινερ μεταδεδομένων που βρίσκεται ανάμεσα στις ετικέτες Υ . Τα μεταδεδομένα παρέχουν πληροφορίες για το έγγραφο. Στο παράδειγμά μας:
- Η γραμμή 4 υποδεικνύει το πρότυπο που χρησιμοποιείται για την κωδικοποίηση χαρακτήρων. Ίσως έχετε δει κατά καιρούς ότι αντί για τονισμένους χαρακτήρες ή ειδικά σύμβολα, εμφανίζεται ένα ερωτηματικό μέσα σε ένα διαμάντι. Αυτό συμβαίνει επειδή το πρόγραμμα περιήγησης χρησιμοποιεί ακατάλληλη κωδικοποίηση. Η δήλωση στη γραμμή 8 το αποφεύγει αυτό δηλώνοντάς το ρητά.
- Στη γραμμή 5 λέμε στο πρόγραμμα περιήγησης πώς πρέπει να προσαρμοστεί σε διαφορετικές μορφές οθόνης.
- Ο τίτλος που ορίσαμε στη γραμμή 6 θα εμφανίζεται στην επάνω γραμμή του προγράμματος περιήγησης και στις μηχανές αναζήτησης.
- Στη γραμμή 7 λέμε στο πρόγραμμα περιήγησης πού να βρει τα στοιχεία πλαισίου Bootstrap που σχετίζονται με το στυλ.
- Από τη γραμμή 10 ξεκινά το δοχείο. Το σώμα περιλαμβάνει το περιεχόμενο της ιστοσελίδας και τον σύνδεσμο προς τα σενάρια Bootstrap που θα δώσουν διαδραστικότητα στον ιστότοπό μας.
- Η γραμμή 13 υποδεικνύει το τέλος του εγγράφου.
Διάταξη τοποθεσίας Bootstrap
Βασικές έννοιες για τη διάταξη ενός ιστότοπου Bootstrap
Όπως είπαμε σε προηγούμενα άρθρα, Το Bootstrap ακολουθεί την πρώτη προσέγγιση για κινητά. Όταν εφαρμόζεται αυτή η προσέγγιση, η σχεδίαση γίνεται έχοντας κατά νου τη συσκευή με το μικρότερο μέγεθος οθόνης και, στη συνέχεια, προστίθενται επίπεδα για την προσαρμογή της στα μεγέθη που ακολουθούν.
Εδώ πρέπει να λάβουμε υπόψη δύο βασικές έννοιες:
- Ορια ΑΝΤΟΧΗΣ.
- Διαβούλευση με τα ΜΜΕ.
Τα σημεία διακοπής υποδεικνύουν από ποιο πλάτος οθόνης τροποποιείται η διάταξη., Τα ερωτήματα πολυμέσων εφαρμόζουν παραμέτρους στυλ με βάση ορισμένα χαρακτηριστικά του προγράμματος περιήγησης και του λειτουργικού συστήματος. Με άλλα λόγια, κάθε σημείο διακοπής θα έχει ένα αντίστοιχο στυλ.
Το Bootstrap έρχεται με έξι προκαθορισμένα σημεία διακοπής που μπορούν να τροποποιηθούν από πιο προχωρημένους προγραμματιστές. Τα προεπιλεγμένα σημεία είναι:
- Extra Small: Δεν έχει προκαθορισμένο αναγνωριστικό και ισχύει για οθόνες με πλάτος μικρότερο από 576 pixel.
- Small: Ταυτίζεται με sm και χρησιμοποιείται για οθόνες από 576 pixel.
- Medium: Ταυτίζεται με md και χρησιμοποιείται για οθόνες από 768 pixel.
- Μήκος: Προσδιορίζεται ως lg χρησιμοποιείται για οθόνες από 992 pixel.
- Extra long: Έχει το αναγνωριστικό lg και εφαρμόζει τα στυλ σε οθόνες από 1200 pixel.
- Extra extra long: Σημειώνεται με το αναγνωριστικό xxl, χρησιμοποιείται για την εφαρμογή της σχεδίασης σε οθόνες από 1400 pixel.
Αυτά τα μεγέθη δεν επιλέχθηκαν τυχαία ως καθένα από τα σημεία διακοπής μπορεί να περιέχει δοχεία των οποίων τα πλάτη είναι πολλαπλάσια του 12. Επίσης, δεν στοχεύουν σε μια συγκεκριμένη συσκευή, αλλά προσαρμόζονται σε διαφορετικές κατηγορίες συσκευών και μεγέθη οθόνης.
Μέσα στα διαφορετικά μεγέθη οθόνης βρίσκουμε τα δοχεία. Αυτοί είναι υπεύθυνοι για τη φιλοξενία, τη συμπλήρωση και την ευθυγράμμιση του περιεχομένου του ιστότοπου σε μια συγκεκριμένη συσκευή ή παράθυρο γραφικών.
;