Λειτουργίες Bootstrap

Σε αυτό το δεύτερο άρθρο της σειράς Ας ασχοληθούμε με τις δυνατότητες του Bootstrap. Είναι μια πλήρης βιβλιοθήκη πόρων για το σχεδιασμό ιστοσελίδων και εφαρμογών, συμπεριλαμβανομένων προτύπων και στοιχείων για φόρμες, γραμματοσειρές και μενού, μεταξύ άλλων.

Στην προηγούμενο άρθρο υποστηρίξαμε ότι υπάρχουν φορές που οι διαχειριστές περιεχομένου δεν είναι η καλύτερη επιλογή και αυτό Η σύνταξη κώδικα από την αρχή για έναν ιστότοπο είναι η σωστή εναλλακτική. Ωστόσο, αυτό δεν σημαίνει ότι πρέπει να επανεφεύρουμε τον τροχό. Η χρήση πλαισίων όπως το Bootstrap μειώνει σημαντικά τον χρόνο σχεδιασμού και διευκολύνει τη λήψη αποτελεσμάτων.

Λειτουργίες Bootstrap

Για να κατανοήσουμε τα χαρακτηριστικά του Bootstrap, πρέπει να καταλάβουμε η αλλαγή παραδείγματος στο σχεδιασμό ιστοσελίδων.

όταν εμφανίστηκαν οι ιστότοποι έπρεπε απλώς να προσαρμοστούν στα διαφορετικά μεγέθη των οθονών. Όμως, με την πάροδο του χρόνου, τα κινητά τηλέφωνα και τα tablet γίνονται όλο και περισσότερο το προτιμώμενο μέσο πρόσβασης για τους χρήστες. Η πρόκληση ήταν να προσαρμοστούν οι σελίδες στις διαφορετικές οθόνες χωρίς ο χρήστης να χρειάζεται να μεγεθύνει, να συρρικνώσει ή να μετακινήσει το περιεχόμενο για να μπορέσει να το δει.

Κατ' αρχήν υιοθετήθηκαν οι ακόλουθες προσεγγίσεις:

• Ανταποκρίσιμος σχεδιασμός: Ο σχεδιασμός είναι ο ίδιος αλλά προσαρμόζεται αυτόματα στο μέγεθος της οθόνης. Αυτή η προσέγγιση έχει ορισμένα προβλήματα, όπως ο χρήστης μπορεί να αναγκαστεί να κάνει μεγέθυνση σε ορισμένα τμήματα της σελίδας για να τα δει.
• Προοδευτική πρόοδος: Ξεκινά με το σχεδιασμό του ιστότοπου για τη συσκευή με λιγότερους πόρους (γενικά το κινητό τηλέφωνο επειδή έχει μικρότερη οθόνη, πρόγραμμα περιήγησης με λιγότερη συμβατότητα για προηγμένες λειτουργίες και συχνά απαιτεί τη χρήση σχεδίου δεδομένων για τη σύνδεση). Μόλις ολοκληρωθεί, με βάση αυτό το σχέδιο, προστίθενται δυνατότητες για να αποκτήσετε την έκδοση για tablet, φορητούς υπολογιστές και επιτραπέζιους υπολογιστές.
• Σταδιακή υποβάθμιση: Είναι η αντίστροφη πορεία. Πρώτα δημιουργείται ο ιστότοπος για επιτραπέζιους υπολογιστές και οι λειτουργίες καταργούνται έως ότου αποκτηθεί μια έκδοση φιλική για κινητά.

Καθώς είναι πάντα πιο εύκολο να προσθέσετε παρά να αφαιρέσετε, η προοδευτική πρόοδος είναι η τάση που κατάφερε να επικρατήσει. ΣΙ.Το ootstrap, για παράδειγμα, ακολουθεί την προσέγγιση «πρώτα το κινητό»., δηλαδή ότι η βάση του σχεδίου είναι πάντα η έκδοση που πρόκειται να εμφανιστεί στο μικρότερο μέγεθος οθόνης και, στη συνέχεια, καθορίζονται οι τροποποιήσεις που θα γίνουν καθώς περνά στα μεγέθη που ακολουθούν.

Ένα επιπλέον πλεονέκτημα της χρήσης Bootstrap έχει να κάνει με το γεγονός ότι Η Google δίνει προτεραιότητα σε ιστότοπους φιλικούς προς κινητά στις αναζητήσεις της.

Μια άλλη έννοια που πρέπει να λάβουμε υπόψη είναι η διαφορά μεταξύ σχεδιασμού frontend και backend. Ο σχεδιασμός του front-end φροντίζει για όλα όσα βλέπει ο χρήστης και όλα όσα αλληλεπιδρούν. Το Backend ομαδοποιεί τι γίνεται στον διακομιστή. Ένα παράδειγμα του πρώτου είναι αυτό μιας φόρμας ιστού. Η εμφάνιση μιας σειράς επιλογών εμφανίζεται ως ένα αναπτυσσόμενο μενού είναι σχεδιασμός διεπαφής, ότι η επιλεγμένη επιλογή αποστέλλεται ταχυδρομικώς ή προστίθεται σε μια βάση δεδομένων είναι σχεδιασμός υποστήριξης.

Το Bootstrap είναι ένα πλαίσιο που συνδυάζει στοιχεία στυλ CSS και προγραμματισμό Javascript για τον έλεγχο της απόδοσης και την παροχή διαδραστικότητας σε όλα τα στοιχεία μιας σελίδας που έχει αναπτυχθεί σε HTML5.

Μεταξύ των πραγμάτων που μπορούμε να ελέγξουμε με το Bootstrap είναι:

• Προσβασιμότητα: Στοιχεία όπως μενού ή παράθυρα διαλόγου είναι συμβατά με προγράμματα ανάγνωσης οθόνης ή κατάλληλα για χρήση από άτομα με μειωμένη κινητικότητα.
• Κουμπιά: Συμπεριλαμβανομένων μέτρων, στυλ, καταστάσεων και ομαδοποίησης.
• Έντυπα:  Συμπεριλαμβανομένης της απόδοσης, των τύπων στοιχείων ελέγχου και της επικύρωσης εισόδου.
• Εικόνες: Ελέγχει την προέλευση, τη στοίχιση και το μέγεθος οθόνης των εικόνων που έχουν εισαχθεί.
• Στοιχεία πλοήγησης: Για παράδειγμα, πλευρικές γραμμές με δυνατότητα απόκρυψης ή κάθετα ή οριζόντια μενού ανάλογα με τη συσκευή.
• Τυπογραφία: Ελέγξτε πώς εμφανίζονται τα διάφορα μέρη του κειμένου.
• Διάταξη: Προσαρμογή απόδοσης περιεχομένου ανάλογα με τη συσκευή

Σε επόμενο άρθρο θα δούμε μερικά πρακτικά παραδείγματα χρήσης του.