Bootstrap

Bootstrap

Στα προηγούμενα μαθήματα μιλήσαμε για την HTML, CSS και JAVASCRIPT. Θα συνεχίσουμε με το Bootstrap, το πιο δημοφιλή HTML, CSS και Javascript framework για την ανάπτυξη responsive ιστοσελίδων.
Το Bootstrap είναι δωρεάν για να το κατεβάσετε και να το χρησιμοποιήσετε! Εάν δεν θέλετε να το κατεβάσετε μπορείτε να τo συμπεριλάβετε στον κώδικα σας από ένα CDN (Content Delivery Network).Θα αναφερθούμε στην έκδοση 3.0 του Bootstrap.

 

Δοκιμάστε!

 

Bootstrap Grids

Bootstrap Grids

Το Bootstrap Grid επιτρέπει έως και 12 στήλες κατά μήκος της σελίδας, αν δεν θέλετε να χρησιμοποιήσετε και τις 12 στήλες ξεχωριστά, μπορείτε να τις ομαδοποιήσετε. Το Bootstrap Grid είναι responsive, και το πλάτος των στηλών ρυθμίζεται αυτόματα ανάλογα με το πλάτος της οθόνης. Έχει τέσσερις κατηγορίες: xs(για κινητά), sm(για τα tablets), md(για επιτραπέζιους υπολογιστές), lg(για μεγαλύτερες επιφάνειες εργασίας).

 

Δοκιμάστε!

 

Bootstrap εικόνες, βίντεο

Σχήματα

Μπορούμε να αλλάξουμε πολύ εύκολα τα σχήματα από τις εικόνες μας με το Bootstrap(στρογγυλεμένες γωνίες, κύκλοι, μικρογραφίες).

 

Δοκιμάστε!

 

Responsive

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

 

Δοκιμάστε!

 

Συλλογή εικόνων

Μπορούμε επίσης να χρησιμοποιήσουμε το Bootstrap για να δημιουργήσουμε εύκολα μια συλλογή εικόνων.

 

Δοκιμάστε!

 

Bootstrap Jumbotron, Wells, Alerts, κουμπιά

Jumbotron

Το Jumbotron είναι μία μεγάλη περιοχή για να προκαλέσει επιπλέον προσοχή με ειδικό περιεχόμενο ή πληροφορίες.

 

Δοκιμάστε!

 

Wells

Η class .well προσθέτει στρογγυλεμένο περίγραμμα γύρω από ένα στοιχείο με γκρι χρώμα και padding

 

Δοκιμάστε!

 

Alerts

Το Bootstrap παρέχει έναν εύκολο τρόπο για να δημιουργήσουμε μηνύματα ειδοποίησης(alerts).

 

Δοκιμάστε!

 

Κουμπιά

Το Bootstrap έχει επτά διαφορετικά στυλ κουμπιών(btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link) και τέσσερα διαφορετικά μεγέθη( btn-lg, btn-md, btn-sm, btn-xs).

 

Δοκιμάστε!

 

Bootstrap μπάρα πλοήγησης

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

Οι μπάρες πλοήγησης μπορούν να περιέχουν drop down μενού.

Δοκιμάστε!

 

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

Δοκιμάστε!

 

Bootstrap ομάδες κουμπιών

Με το Bootstrap μπορούμε να ομαδοποιήσουμε μια σειρά από κουμπιά και να δημιουργήσουμε οριζόντιες, κάθετες, justified και nested ομάδες κουμπιών.

 

Δοκιμάστε!

 

Bootstrap Glyphicons

Το Bootstrap παρέχει 260 glyphicons από το σύνολο Glyphicons Halflings. Τα Glyphicons μπορούν να χρησιμοποιηθούν σε κείμενο, κουμπιά, γραμμές εργαλείων, πλοήγηση, έντυπα, κλπ.

 

Δοκιμάστε!

 

Bootstrap σήματα και ετικέτες

Τα Bootstrap σήματα είναι αριθμητικές ενδείξεις για το πόσα στοιχεία συνδέονται με έναν σύνδεσμο.

 

Δοκιμάστε!

 

Οι Bootstrap ετικέτες χρησιμοποιούνται για την παροχή πρόσθετων πληροφοριών σχετικά με κάτι.

 

Δοκιμάστε!

 

Bootstrap Progress Bars

Μια γραμμή προόδου(Progress Bar) μπορεί να χρησιμοποιηθεί για να δείξει πόσο διαρκεί μια διαδικασία. Το Bootstrap παρέχει διάφορους τύπους progress bars.

 

Δοκιμάστε!

 

Bootstrap Pagination, Breadcrumbs, Pager

Pagination

Αν έχετε μια ιστοσελίδα με πολλές σελίδες, μπορεί να προσθέσετε κάποιο είδος σελιδοποίησης.

 

Δοκιμάστε!

 

Breadcrumbs

Μια άλλη μορφή σελιδοποίησης, είναι τα Breadcrumbs:

 

Δοκιμάστε!

 

Pager

Το Pager είναι επίσης μια μορφή σελιδοποίησης που παρέχει κουμπιά (links) για την προηγούμενη και επόμενη σελίδα.

 

Δοκιμάστε!

 

Bootstrap List Groups

Η πιο βασική List Group είναι μια μη διατεταγμένη λίστα με στοιχεία. Μπορούμε επίσης να προσθέσουμε Badges σε μια List Group που θα τοποθετηθούν δεξιά. Τα στοιχεία σε μια List Group μπορεί να είναι ακόμα υπερ-συνδέσεις, όταν ο χρήστης περάσει το ποντίκι από πάνω(hover) προσθέτει γκρι χρώμα φόντου. Ακόμη μπορούμε να χρησιμοποιήσουμε Contextual Classes για να δώσουμε χρώμα στα στοιχεία της List Group. Γενικά μπορούμε να προσθέσουμε σχεδόν οποιοδήποτε HTML κώδικα μέσα σε ένα στοιχείο της List Group.

 

Δοκιμάστε!

 

Bootstrap Panels

Ένα panel είναι ένα οροθετημένο κουτί με περιθώριο γύρω από το περιεχόμενό του. Υπάρχουν τα εξής panel το βασικό(.panel-default), το heading(.panel-heading), το footer(.panel-footer) και το group(.panel-group).

 

Δοκιμάστε!

 

Bootstrap Collapse

Όταν θέλουμε να αποκρύψουμε ή να δείξουμε κάποιο κείμενο μπορούμε να το κάνουμε με το Bootstrap Collapse.

 

Δοκιμάστε!

 

Bootstrap Forms

Στο Bootstrap μπορούμε να δημιουργήσουμε στυλ για τα στοιχεία input, textarea, και select με τη χρήση της class .form-control.

 

Δοκιμάστε!

 

Bootstrap Inputs

Το Bootstrap υποστηρίζει όλους τους τύπους input(εισόδου) HTML5 : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

 

Δοκιμάστε!

 

Bootstrap Tooltip, Popover

Το tooltip είναι μικρό pop-up παράθυρο που εμφανίζεται όταν ο χρήστης μετακινεί το δείκτη του ποντικιού πάνω από ένα στοιχείο. Το popover είναι παρόμοιο με το tooltip, η διαφορά είναι ότι το popover μπορεί να περιέχει πολύ περισσότερο περιεχόμενο.

 

Δοκιμάστε!

 

Bootstrap Scrollspy

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

 

Δοκιμάστε!

 

Bootstrap Affix

Το Affix επιτρέπει σε ένα στοιχείο να είναι σταθερό σε μια ιστοσελίδα. Χρησιμοποιείται συχνά στα μενού πλοήγησης ή στα social κουμπιά, για να παραμένουν σταθερά σε μια συγκεκριμένη περιοχή ανεξάρτητα από την κύλιση πάνω ή κάτω στη ιστοσελίδα.

 

Σταθερό οριζόντιο μενού πλοήγησης.

Δοκιμάστε!

 
 

Σταθερό κάθετο μενού πλοήγησης.

Δοκιμάστε!

 

Σχεδιασμός ιστοσελίδας με το Bootstrap.

Έχουμε καλύψει τις βασικές έννοιες του Bootstrap framework, html, css και javascript και ήρθε η ώρα για να σχεδιάσουμε την πρώτη ιστοσελίδα μας, η οποία είναι responsive(για όλες τις συσκευές desktop, laptop, tablet, smartphone) και περιέχει τέσσερα τμήματα(sections). Δείτε τα σχόλια στο κώδικα για να κατανοήσετε τα επιμέρους τμήματα της σελίδας. Μπορείτε να αντιγράψτε να τροποποιήστε και να χρησιμοποιήστε το θέμα για τις δικές σας ιστοσελίδες.

 

Δοκιμάστε!

 

Φιλοξενία ιστοσελίδων και ονόματα(domains).

 

it-838384_1280

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

 

Τι είναι το World Wide Web?
Το Web είναι ένα δίκτυο υπολογιστών σε όλο τον κόσμο. Όλοι οι υπολογιστές μπορούν να επικοινωνούν μεταξύ τους και χρησιμοποιούν ένα πρωτόκολλο επικοινωνίας που ονομάζεται HTTP.

 

Πως λειτουργεί το WWW?
Οι Web πληροφορίες είναι έγγραφα που ονομάζονται ιστοσελίδες και είναι αποθηκευμένες σε υπολογιστές που ονομάζονται διακομιστές. Οι υπολογιστές που βλέπουν τις ιστοσελίδες ονομάζονται πελάτες και βλέπουν τις ιστοσελίδες με τους web browsers. Δημοφιλείς web browsers είναι ο Google Chrome, Firefox και Internet Explorer.

 

Πως ένας web browser ζητάει μία ιστοσελίδα;
Ένας web browser ζητάει μια σελίδα από ένα web server(διακομιστή) με μια τυποποιημένη αίτηση HTTP που περιέχει μια διεύθυνση σε αυτή τη μορφή: http://plinet.net/index.html

 

Πως ένας web browser εμφανίζει μία ιστοσελίδα;
Όλες οι ιστοσελίδες περιέχουν οδηγίες, ο web browser εμφανίζει την ιστοσελίδα διαβάζοντας αυτές τις οδηγίες. Οι πιο κοινές οδηγίες είναι οι ετικέτες HTML(δείτε τα μαθήματα HTML).

 

Τι είναι ένας Web Server?
Για να δημοσιεύσουμε την ιστοσελίδα σας, θα πρέπει να την αντιγράψουμε σε έναν web server και να καταχωρίσουμε το όνομα της ιστοσελίδας μας(domain).

 

Ας δούμε πως μπορούμε να αποθηκεύσουμε την ιστοσελίδα μας και να έχουμε το δικό μας όνομα στο ΠΣΔ(δωρεάν για εκπαιδευτικούς και σχολικές μονάδες). Θα χρειαστούμε δύο προγράμματα, ένα απλό κειμενογράφο για την επεξεργασία του κώδικα της ιστοσελίδας μας, σας προτείνω το Notepad++, και ένα πρόγραμμα για την μεταφορά της ιστοσελίδας μας από τον υπολογιστή μας στο web server, σας προτείνω το filezilla.

 

1. Αν δεν έχετε, ανοίξτε λογαριασμό στο ΠΣΔ.
%ce%ba%ce%b1%cf%84%ce%b1%ce%b3%cf%81%ce%b1%cf%86%ce%ae1

 

2. Δημιουργείστε ένα φάκελο στον υπολογιστή σας(myweb). Ανοίξτε το Notepad++ και γράψτε στην πρώτη γραμμή <!DOCTYPE html> (δηλώνουμε την HTML), επιλέξτε και αντιγράψτε τον κώδικα της ιστοσελίδας που έχουμε αποθηκεύσει στο codepen.io και επικολλήσετε τον κώδικα κάτω από τη γραμμή που γράψατε. Αποθηκεύστε το αρχείο στο φάκελο με το όνομα index.html(όνομα αρχικής ιστοσελίδας).

capture5

3. Συνδεθείτε στο λογαριασμό σας στο ΠΣΔ, και επιλέξτε MySch > Πίνακας Ελέγχου > Στοιχεία δικτυακού τόπου. Μπορείτε να δείτε την Διεύθυνση δικτυακού τόπου(http://users.sch.gr/το όνομα σας) και το FTP url(users.sch.gr/το όνομα σας).

capture1

4. Ανοίξτε τον filezilla επιλέξτε τον Διαχειριστή τοποθεσιών για να δηλώσετε τον web server του ΠΣΔ. Πατήστε ‘Νέα τοποθεσία’, δηλώστε τα στοιχεία όπως φαίνονται στην παρακάτω εικόνα και πατήστε ‘Σύνδεση’.

capture6

5. Στο αριστερό παράθυρο βρίσκονται τα αρχεία του υπολογιστή σας και στο δεξί τα αρχεία του web server. Βρείτε το φάκελο σας στο αριστερό παράθυρο επιλέξτε το αρχείο index.html και κάντε διπλό κλικ για να σταλεί στον web server. Συγχαρητήρια, μόλις ανεβάσατε την πρώτη ιστοσελίδα σας, μπορείτε να τη δείτε στην διεύθυνση ‘http://users.sch.gr/το όνομα σας’.

capture3

Σχεδιασμός ιστοσελίδας με Angularjs και Bootstrap.

Έχουμε καλύψει τις βασικές έννοιες της Angularjs και θα αλλάξουμε την ιστοσελίδα που είχαμε σχεδιάσει με το Bootstrap έτσι ώστε να φορτώνει ορισμένα από τα δεδομένα της με τη χρήση της Angularjs. Δείτε τα σχόλια στο κώδικα για να κατανοήσετε τα επιμέρους τμήματα της σελίδας. Μπορείτε να αντιγράψτε να τροποποιήστε και να χρησιμοποιήστε το θέμα για τις δικές σας ιστοσελίδες.

 

Δοκιμάστε!