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

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

 

Δοκιμάστε!

 

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

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

 

Δοκιμάστε!

 

Bootstrap Affix

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

 

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

Δοκιμάστε!

 
 

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

Δοκιμάστε!

 

Bootstrap Scrollspy

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

 

Δοκιμάστε!

 

Bootstrap Tooltip, Popover

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

 

Δοκιμάστε!

 

Bootstrap Inputs

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

 

Δοκιμάστε!

 

Bootstrap Forms

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

 

Δοκιμάστε!

 

Bootstrap Collapse

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

 

Δοκιμάστε!

 

Bootstrap Panels

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

 

Δοκιμάστε!

 

Bootstrap List Groups

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

 

Δοκιμάστε!

 

Bootstrap Pagination, Breadcrumbs, Pager

Pagination

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

 

Δοκιμάστε!

 

Breadcrumbs

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

 

Δοκιμάστε!

 

Pager

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

 

Δοκιμάστε!

 

Bootstrap Progress Bars

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

 

Δοκιμάστε!

 

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

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

 

Δοκιμάστε!

 

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

 

Δοκιμάστε!

 

Bootstrap Glyphicons

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

 

Δοκιμάστε!

 

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

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

 

Δοκιμάστε!

 

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

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

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

Δοκιμάστε!

 

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(στρογγυλεμένες γωνίες, κύκλοι, μικρογραφίες).

 

Δοκιμάστε!

 

Responsive

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

 

Δοκιμάστε!

 

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

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

 

Δοκιμάστε!

 

Bootstrap Grids

Bootstrap Grids

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

 

Δοκιμάστε!

 

Bootstrap

Bootstrap

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

 

Δοκιμάστε!