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

Μια Εισαγωγή στο 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. Δύσκολα τροποποιήσιμος


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

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

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

WYSIWYG

Θετικά:

Αρνητικά:

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


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

1. Εγγύηση για την αισθητική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


Τι είναι το Bootstrap

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

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

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


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

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

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

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


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

developer.

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

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

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

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

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

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

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



Εγκατάσταση

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


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


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


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

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


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

ΣύνδεσηΣτο body


Navigation Bar


Dropdown Menu


Callout


Carousel

Twitter Bootstrap 3 Front-end frameworkGrid


Responsive


Features

Twitter Bootstrap 3 Front-end frameworkTabs


Modal Dialog


List Group


Footer


Glyphicons


Η Δυναμική Κοινότητα του 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/.


Εναλλακτικά 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

Software

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