Front-end Web Developer

I am a Mid Front-end Web Developer and IT Trainer

Bootstrap Design 3

Categories
Δεξιότητες HTML, CSS, Bootstrap Framework
Εργαλείο ανάπτυξης Notepadd++, Sublime

Σχετικά με το boostrap design 3

Το Bootstrap Design 3 είναι ένα έργο βασισμένο στο bootstrap framework ως εφαρμογή στο web design.

 

Πως προέκυψε το bootstrap design 3

Αυτό είναι ένα ακόμα έργο στα πλαίσια του εκπαιδευτικού προγράμματος του udacity.com. Σχετίζεται τόσο με το Bootstrap Design 2 όσο και με το Bootstrap Design 1.

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

 

Τι Web Development τεχνολογίες χρησιμοποιήθηκαν

HTML και CSS

Όπως στα παρόμοια προηγούμενα έργα, έτσι και σε αυτό χρησιμοποιήθηκαν οι τεχνολογίες HTML (Hyper Text Markup Language) και τα CSS (Cascading Style Sheets). Με την HTML ορίζεται η διάρθρωση της σελίδας ενώ με τα CSS, το στυλ της.

Bootstrap framework

Στο bootstrap design 3 χρησιμοποιήθηκε το bootstrap framework. Πρόκειται για ένα πλαίσιο εργασίας το οποίο κάνει χρήση των τεχνολογιών HTML και CSS. Αποτελείται από έτοιμα κομμάτια κώδικα κάθε ένα από τα οποία κάνει μια λειτουργία και τα οποία παραμετροποιούνται.

 

Πως υλοποιήθηκε

Η βάση για την σχεδίαση του έργου αυτού είναι ένα mockup το οποίο δόθηκε σε μορφή pdf. Το σχέδιο αποτελείται από μια εικόνα στο πάνω μέρος. Ακολουθεί μια πράσινη οριζόντια μπάρα. Έπειτα ακολουθεί ένα κεντρικό κείμενο σε λευκό φόντο με γκρι κενό εκατέρωθεν αυτού.

Με την βοήθεια του bootstrap ορίστηκε ένα κουτί αποτελούμενο από 2 γραμμές. Στην πάνω γραμμή ενσωματώθηκε η εικόνα στο πλήρες πλάτος του κουτιού. Στην κάτω γραμμή ορίστηκαν 3 υπό-κουτιά στο 1/3 του συνολικού πλάτους του κουτιού. Στο μεσαίο κουτί, μπήκε το ενδεικτικό κείμενο.

Επειδή το bootstrap ορίζει κατά κύριο λόγο την δομή, ορίστηκε ένα custom.css αρχείο. Στο αρχείο αυτό, προστέθηκαν κλάσεις οι οποίες ορίζουν το χρώμα παρασκηνίου, την μπάρα, τις κατακόρυφες αποστάσεις, το λευκό παρασκήνιο του κειμένου καθώς και τα χρώματα αυτού.

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

 

Κλείνοντας με το bootstrap design 3

Το bootstrap design 3 είναι ακόμα ένα παράδειγμα σχεδίου ιστοσελίδας βασισμένο στο bootstrap framework.