Μια Εισαγωγή στο Bootstrap 3

Κατσιγιάννης Θεόφιλος

Προγραμματιστικά ΠεριβάλλονταΓια web developing

1. HTML 52. CSS 33. JAVASCRIPT4. JQUERY

Client-Side: Server-Side:

1. PHP2. MYSQL3. PYTHON - DJANGO4. JEE5. RUBY – RUBY ON RAILS

Μέθοδοι Ανάπτυξης web εφαρμογών

1. Απόλυτος έλεγχος του κώδικα2. Εύκολα Επεκτάσιμα 3. Εύκολα στη Διόρθωση4. Βέλτιστο μέγεθος κώδικα

Μέθοδος 0: Αυτόνομη Ανάπτυξη του Λογισμικού

Θετικά:

Αρνητικά:

1. Απαιτείται μεγάλη εμπειρία2. Κίνδυνος για μέτριας αισθητικής αποτέλεσμα3. Πολύ καλή γνώση των προγραμματιστικών

περιβαλλόντων.

1. Εγγύηση για την αισθητική2. Εγγύηση καλής λειτουργίας

Μέθοδος 1: Χρήση Έτοιμου Template

Θετικά:

Αρνητικά:

1. Δεν υπάρχει έλεγχος του κώδικα2. Δύσκολα επεκτάσιμος3. Δύσκολα τροποποιήσιμος

Μέθοδοι Ανάπτυξης web εφαρμογών

1. Εγγύηση για την αισθητική2. Εγγύηση καλής λειτουργίας3. Δεν απαιτείται γνώση

προγραμματισμού.

Μέθοδος 2: Χρήση Γεννήτριας Κώδικα

WYSIWYG

Θετικά:

Αρνητικά:

1. Δεν υπάρχει έλεγχος του κώδικα2. Μεγάλος όγκος αυτόματου κώδικα3. Συγκεκριμένης αισθητικής

Μέθοδοι Ανάπτυξης web εφαρμογών

Αυτόματη παραγωγή κώδικα μέσω ενός γραφικού περιβάλλοντος

1. Εγγύηση για την αισθητική2. Καλός έλεγχος του κώδικα3. Επεκτασιμότητα4. Έυκολη διόρθωση

Θετικά:

Αρνητικά:

1. Συγκεκριμένης αισθητικής αποτέλεσμα2. Καλή γνώση τουλάχιστον HTML

Χρήση στατικών βιβλιοθηκών έτοιμου Κώδικα

Μέθοδος 3: Χρήση ενός front-end Framework

Μέθοδοι Ανάπτυξης web εφαρμογών

«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

Twitter Bootstrap 3 Front-end framework

Τι είναι το Bootstrap

Καλαίσθητο, ισχυρό front-end framework για ταχύτερη και ευκολότερη ανάπτυξη ιστοσελίδων.

Βασίζεται στις HTML, CSS, JavaScript.

Υποστηρίζει όλους τους γνωστούς browsers και όλες σχεδόν τις εκδόσεις τους.

Twitter Bootstrap 3 Front-end framework

Λίγα ιστορικά… Το Bootstrap αναπτύχθηκε από τους Mark Otto

και Jacob Thornton για λογαριασμό του Twitter ως ένα framework για την εξασφάλιση μιας ενιαίας αισθητικής στις διάφορες λειτουργίες του .

Τον Αύγουστο του 2011 εκδόθηκε σαν project ανοιχτού κώδικα και το Φεβρουάριο του 2011 έγινε το ποιο δημομοφιλές του GitHub.

Μέχρι τον Μαρτιο του 2014 έχει λάβει 65.000 stars και έχουν γίνει 23.800 forks στο GitHub.

Twitter Bootstrap 3 Front-end framework

Γιατί χρησιμοποιούμε το Bootstrap Εύκολο στην εγκατάσταση και στη χρήση. Άρα κατάλληλο για νέους web

developer.

Σταθερό και ευέλικτο σύστημα διάταξης (Grid).

Με αποκρίσιμη διάταξη σε όλες διαστάσεις του browser.

Πλήθος από web-συστατικά (web components).

Πλήθος από εικονίδια σε μορφή συμβολοσειρών. (Glyph Icons).

Επεκτάσιμη με τη βοήθεια των JavaScript plugins που διαθέτει.

Πολύ καλό documentation και δυναμική κοινότητα που το αναπτύσσει.

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

Twitter Bootstrap 3 Front-end framework

Twitter Bootstrap 3 Front-end framework

Εγκατάσταση

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

Twitter Bootstrap 3 Front-end framework

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

Twitter Bootstrap 3 Front-end framework

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

Twitter Bootstrap 3 Front-end framework

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

ΣύνδεσηΣτην κεφαλίδα

Twitter Bootstrap 3 Front-end framework

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

ΣύνδεσηΣτο body

Twitter Bootstrap 3 Front-end framework

Navigation Bar

Twitter Bootstrap 3 Front-end framework

Dropdown Menu

Twitter Bootstrap 3 Front-end framework

Callout

Twitter Bootstrap 3 Front-end framework

Carousel

Twitter Bootstrap 3 Front-end frameworkGrid

Twitter Bootstrap 3 Front-end framework

Responsive

Twitter Bootstrap 3 Front-end framework

Features

Twitter Bootstrap 3 Front-end frameworkTabs

Twitter Bootstrap 3 Front-end frameworkTabs

Twitter Bootstrap 3 Front-end framework

Modal Dialog

Twitter Bootstrap 3 Front-end framework

List Group

Twitter Bootstrap 3 Front-end framework

Footer

Twitter Bootstrap 3 Front-end framework

Glyphicons

Twitter Bootstrap 3 Front-end 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/.

Twitter Bootstrap 3 Front-end 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

Κατσιγιάννης Θεόφιλος

Ευχαριστούμε Πολύ