Μια εισαγωγή στο Bootstrap

Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ

Προγραμματιςτικά Περιβάλλοντα
Για web developing
1. HTML 5
2. CSS 3
3. JAVASCRIPT
4. JQUERY
Client-Side: Server-Side:
1. PHP
2. MYSQL
3. PYTHON - DJANGO
4. JEE
5. RUBY – RUBY ON RAILS

ΜέθοδοιΑνάπτυξησ
web εφαρμογών
1. Απόλυτος έλεγχος του κώδικα
2. Εύκολα Επεκτάσιμα
3. Εύκολα στη Διόρθωση
4. Βέλτιστο μέγεθος κώδικα
Μέθοδος 0: Αυτόνομη Ανάπτυξη του Λογιςμικού
Θετικά: Αρνητικά:
1. Απαιτείται μεγάλη εμπειρία
2. Κίνδυνος για μέτριας αισθητικής
αποτέλεσμα
3. Πολύ καλή γνώση των προγραμματιστικών
περιβαλλόντων.

1. Εγγύηση για την αισθητική
2. Εγγύηση καλής λειτουργίας
Μέθοδος 1: Χρήςη ΈτοιμουTemplate
1. Δεν υπάρχει έλεγχος του κώδικα
2. Δύσκολα επεκτάσιμος
3. Δύσκολα τροποποιήσιμος

2. Εγγύηση καλής λειτουργίας
3. Δεν απαιτείται γνώση
προγραμματισμού.
Μέθοδος 2: Χρήςη Γεννήτριασ Κώδικα
WYSIWYG
1. Δεν υπάρχει έλεγχος του κώδικα
2. Μεγάλος όγκος αυτόματου κώδικα
3. Συγκεκριμένης αισθητικής
Αυτόματη παραγωγή κώδικα μέςω ενόσ
γραφικού περιβάλλοντοσ

2. Καλός έλεγχος του κώδικα
3. Επεκτασιμότητα
4. Έυκολη διόρθωση
1. Συγκεκριμένης αισθητικής αποτέλεσμα
2. Καλή γνώση τουλάχιστον HTML
Χρήςη ςτατικών βιβλιοθηκών έτοιμου Κώδικα
Μέθοδος 3: Χρήςη ενόσ front-end Framework

«Bootstrap is a framework you give a Web developer who is not an
expert in CSS so he can do something that a CSS developer won't
kill him for.»
Twitter Bootstrap 3 Front-end
framework

framework
Τι είναι το Bootstrap
 Καλαίςθητο, ιςχυρό front-end framework για ταχύτερη και ευκολότερη ανάπτυξη
ιςτοςελίδων.
 Βαςίζεται ςτισ HTML, CSS, JavaScript.
 Υποςτηρίζει όλουσ τουσ γνωςτούσ browsers και όλεσ ςχεδόν τισ εκδόςεισ τουσ.

framework
Λίγα ιςτορικά…
 Το Bootstrap αναπτύχθηκε από τουσ Mark Otto και Jacob
Thornton για λογαριαςμό τουTwitter ωσ ένα framework για
την εξαςφάλιςη μιασ ενιαίασ αιςθητικήσ ςτισ διάφορεσ
λειτουργίεσ του .
 ΤονΑύγουςτο του 2011 εκδόθηκε ςαν project ανοιχτού
κώδικα και το Φεβρουάριο του 2011 έγινε το ποιο
δημομοφιλέσ του GitHub.
 Μέχρι τον Μαρτιο του 2014 έχει λάβει 65.000 stars και έχουν
γίνει 23.800 forks ςτο GitHub.

framework
Γιατί χρηςιμοποιούμε το Bootstrap
 Εύκολο ςτην εγκατάςταςη και ςτη χρήςη. Άρα κατάλληλο για νέουσ web developer.
 Σταθερό και ευέλικτο ςύςτημα διάταξησ (Grid).
 Με αποκρίςιμη διάταξη ςε όλεσ διαςτάςεισ του browser.
 Πλήθοσ από web-ςυςτατικά (web components).
 Πλήθοσ από εικονίδια ςε μορφή ςυμβολοςειρών. (Glyph Icons).
 Επεκτάςιμη με τη βοήθεια των JavaScript plugins που διαθέτει.
 Πολύ καλό documentation και δυναμική κοινότητα που το αναπτύςςει.

Επί της Ουσίας…
framework

framework
Εγκατάςταςη
Τρείς Εκδόσεις
•Precompiled
•Source code Πρέπει να
γίνει compile με Less
•Sass Για την Rails

framework
Δομή των Αρχείων

framework
Υποςτήριξη ςτουσ Browsers

framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στην κεφαλίδα

framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στο body

framework
Navigation Bar

framework
Dropdown Menu

framework
Callout

framework
Carousel

framework
Grid

framework
Responsive

framework
Features

framework
Tabs

framework
Modal Dialog

framework
List Group

framework
Footer

framework
Glyphicons

framework
Η Δυναμική Κοινότητα του Bootstrap
 Editors
 http://www.bootply.com/
 http://www.divshot.com/
 Themes
 http://www.boottheme.com/
 http://rriepe.github.io/1pxdeep/
 http://designmodo.github.io/Flat-UI/.

framework
Εναλλακτικά front-end frameworks
 Blueprint http://www.blueprintcss.org/
 Zurb Foundation http://foundation.zurb.com/
 Metro UI http://metroui.org.ua/
 PURE http://purecss.io/
 Gumby Framework http://gumbyframework.com/
 BASE Framework http://gumbyframework.com/

Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ
Ευχαριςτούμε Πολύ

Μια εισαγωγή στο Bootstrap

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

Similaire à Μια εισαγωγή στο Bootstrap

Similaire à Μια εισαγωγή στο Bootstrap (20)

Μια εισαγωγή στο Bootstrap