Bootstrap Simple Site

Σχετικά με το bootstrap simple site

Το έργο αυτό αφορά την κατασκευή ενός πολύ απλού site με χρήση του γνωστού css framework το οποίο είναι γνωστό με το όνομα bootstrap. Για τον λόγο αυτό το έργο ονομάζεται bootstrap simple site.

Πως προέκυψε

Το Εθνικό Καποδιστριακό Πανεπιστήμιο Αθηνών κάνει μια σειρά από online προγράμματα σπουδών. Ένα από αυτά είναι το Advanced Web Development και Εφαρμογή σε Mobile Friendly και e-Commerce Web Sites μέσα από το οποίο καλύπτονται θέματα όπως οι τεχνολογίες jquery, php και άλλες με σκοπό την δημιουργία ενός e-shop αλλά και δυναμικών γενικότερα ιστοχώρων και εφαρμογών.

Οι τεχνολογίες του έργου αυτού

HTML και CSS

Σε αυτό το bootstrap simple site χρησιμοποιήθηκαν οι τεχνολογίες αυτές μέσα από τις οποίες προβάλλεται στον φυλλομετρητή, browser, μια ιστοσελίδα την οποία επισκεπτόμαστε. Η HTML αφορά την δομή της ιστοσελίδας όπως είναι το μενού, το κυρίως περιεχόμενο κ.α. Τα CSS αφορούν το στυλ της όπως τα χρώματα, η μορφοποίηση του κειμένου κ.α.

Bootstrap

Ένας τρόπος για να φτιάξουμε έναν ιστοχώρο είναι να ξεκινήσουμε από το μηδέν. Να φτιάξουμε δηλαδή την διάρθρωση του με την html και να το μορφοποιήσουμε με τα CSS. Μια τέτοια διαδικασία είναι αρκετά χρονοβόρα όμως. Μια λύση αξιόπιστη είναι η χρήση μιας έτοιμης δομής ή αλλιώς ενός framework. Το bootstrap είναι ένα αρκετά γνωστό και αξιόπιστο framework το οποίο χρησιμοποιεί τις δύο αυτές τεχνολογίες. Τα πλεονεκτήματα μιας τέτοιας λύσης είναι αρκετά όπως:

• Ταχύτερο αποτέλεσμα αφού δεν τα φτιάχνουμε όλα από την αρχή,
• Αξιοπιστία λόγω χρήσης αξιόπιστων δομών.
• Εμφάνιση σε κάθε τύπο οθόνης (Responsive website)

Τα χαρακτηριστικά του έργου αυτού

Το bootstrap simple site αποτελείται από 3 σελίδες. Κάθε σελίδα είναι ένα ή περισσότερα κουτιά, container, το οποίο περιλαμβάνει:

• Μια επικεφαλίδα,
• Το κυρίως περιεχόμενο,
• Υποσέλιδο

Το κύριο χαρακτηριστικό του bootstrap framework είναι ότι διαιρεί την σελίδα σε γραμμές και σε στήλες, 12 σε κάθε γραμμή.

Έτσι λοιπόν για παράδειγμα, η πρώτη σελίδα αποτελείται από μια γραμμή για την επικεφαλίδα και μια γραμμή για την μπάρα πλοήγησης, όλες πλάτους 12 στηλών. Στην συνέχεια υπάρχει μια γραμμή για το κυρίως περιεχόμενο το οποίο αποτελείται από 2 μέρη, ένα 4 και ένα 8 στηλών.

Τέλος στο κάτω μέρος υπάρχει μια γραμμή, πλάτους 12 στηλών, η οποία αποτελεί το υποσέλιδο.

Αξίζει να σημειώσουμε το responsiveness του site την προσαρμοστικότητα του δηλαδή σε κάθε τύπο οθόνης. Έτσι λοιπόν, όταν το πλάτος της οθόνης γίνει μικρότερο από 768 pixels παρατηρούμε τις εξής αλλαγές:

• Η μπάρα πλοήγησης αντικαθίσταται από ένα κουμπί στο δεξί μέρος της οθόνης το οποίο ενεργοποιεί το μενού – hamburger icon.
• Το πλάτος το στηλών συρρικνώνεται σε μια στήλη ώστε να χωράνε στο μικρό πλάτος οθόνης.

Επίλογος

Το bootstrap simple site είναι ένα απλό δείγμα για την δυνατότητα χρήσης του bootstrap framework στην κατασκευή ωραίων και προσαρμόσιμων sites σε κάθε τύπο οθόνης. Αξίζει να σημειωθεί ότι τα αρχεία του framework τροποποιούνται δίνοντας με τον τρόπο αυτό να μορφοποιήσουμε το site μας σύμφωνα με τις ανάγκες μας.