Download - ICR Predavanje 8
-
7/21/2019 ICR Predavanje 8
1/89
Primena Bootstrap-a
za brzi razvojveb prezentacija
ore Mijatovidoc. dr Milan abarkapa
-
7/21/2019 ICR Predavanje 8
2/89
Uvod
- veb poetci
- 20.12.1990, Tim Berners-Lee, CERN- http://info.cern.ch/
http://info.cern.ch/ -
7/21/2019 ICR Predavanje 8
3/89
Uvod
-
7/21/2019 ICR Predavanje 8
4/89
Razvoj veb (www) pregledaa
- WorldWideWeb - prvi pregleda
- Netscape Navigator- Gecko engine- ECMAScript
- Lynx
-
7/21/2019 ICR Predavanje 8
5/89
Razvoj veb (www) pregledaa
Danas
- Google Chrome- Internet Explorer- Firefox
- Safari- Opera
-
7/21/2019 ICR Predavanje 8
6/89
Razvoj veba (www)
veb (www) danas
- HTML5- CSS3- JavaScript (ECMAScript)
-
7/21/2019 ICR Predavanje 8
7/89
Mobilni i veb - poetak
- Mobile, PDA
- WAP- Wireless Application Protocol
- Nokia 7110 (1999)
-
7/21/2019 ICR Predavanje 8
8/89
Razvoj mobilnih
- Nagli razvoj mobilnih ureaja
- Posledice na veb- 2015 oekivano 1.000.000.000 mobiln
-
7/21/2019 ICR Predavanje 8
9/89
Mobilni
Razliite veliine ekrana
-
7/21/2019 ICR Predavanje 8
10/89
Ureaji danas - veliina ekrana
-
7/21/2019 ICR Predavanje 8
11/89
Kako napraviti (dobru) prezenta
- Pristup sa razliitih ureaja
- od mobilnih do PC-a (3 - 27)- Mobilnih aplikacija
- Android, iOS, Windows Mobile
- Responsive dizajn
-
7/21/2019 ICR Predavanje 8
12/89
Front end Frameworks
- Pisanje CSS
- Korienje gotovih reenja
-
7/21/2019 ICR Predavanje 8
13/89
PauseII
-
7/21/2019 ICR Predavanje 8
14/89
-
7/21/2019 ICR Predavanje 8
15/89
Zato Bootstrap
- Uteda vremena - brz razvoj
- Grid, komponente, JavaScript- Responsive- HTML5 i CSS3
- Podrka za veinu pregledaa- Fleksibilan (prilagoavanje potrebama- Podrka (Open source projekat)- Dokumentacija
-
7/21/2019 ICR Predavanje 8
16/89
Bootstrap upotreba
Primer sajtova koji koriste Bootstrap
- Bootstrap Expohttp://expo.getbootstrap.com/
- Built With Bootstrap
http://builtwithbootstrap.com/
http://expo.getbootstrap.com/http://builtwithbootstrap.com/http://expo.getbootstrap.com/ -
7/21/2019 ICR Predavanje 8
17/89
Bootstrap ukratko
- sredina 2010 (Twitter Blueprint) open
- Github popularnost- oko 20 unapreenja i tri verzije- trenutno v3.3
- koristi jQuery
Bootstrap primer
-
7/21/2019 ICR Predavanje 8
18/89
Bootstrap primer
http://getbootstrap.com/exam
Bootstrap primer
http://getbootstrap.com/examples/dashboard/ -
7/21/2019 ICR Predavanje 8
19/89
Bootstrap primer
http://ironsummitmedia.github.io/startbootstrap-sb
http://startbootstrap.com/template-overviews/sb-a
http://startbootstrap.com/template-overviews/sb-admin-2/http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/index.html -
7/21/2019 ICR Predavanje 8
20/89
Bootstrap i pregledai
-
7/21/2019 ICR Predavanje 8
21/89
Bootstrap - dodavanje u projek
Kako dodati bootstrap na projekat?
1. Download getbootstrap.com(github)
3. CDN (Content Delivery Network)
2. LESS / SASS
http://getbootstrap.com/ -
7/21/2019 ICR Predavanje 8
22/89
TW Bootstrap - ta sadri?
CSSJavaScript
Font
Bootstrap poe
-
7/21/2019 ICR Predavanje 8
23/89
Bootstrap - poe
-
7/21/2019 ICR Predavanje 8
24/89
Bootstrap responsive i grid sist
Mobile fir
-
7/21/2019 ICR Predavanje 8
25/89
Grid options
-
7/21/2019 ICR Predavanje 8
26/89
Grid: Bootstrap responsive stra
Sadraj - podelje
Jedan - moe vi
Podela na kolone
G
-
7/21/2019 ICR Predavanje 8
27/89
Grid sistem - kolone
Mobile firs
.col-md-
768 px
.col-md-*
992 px
.col-md-*
1200 px
B t t id i t i
-
7/21/2019 ICR Predavanje 8
28/89
Bootstrap grid sistem - sumiran
- Grid sistem: 12 kolona
- Mobile first (od v3.0)- css klase
- .containeri .container-fluid- .row
- .col-*-*
B t t d j
-
7/21/2019 ICR Predavanje 8
29/89
Bootstrap sadraj
.containerili .container-fluid
B t t i l * *
-
7/21/2019 ICR Predavanje 8
30/89
Bootstrap .row i .col-*-*
-
7/21/2019 ICR Predavanje 8
31/89
-
7/21/2019 ICR Predavanje 8
32/89
P i i
-
7/21/2019 ICR Predavanje 8
33/89
Primeri za .co
Desktop i mobilni
Bootstrap CSS elementi
-
7/21/2019 ICR Predavanje 8
34/89
Bootstrap CSS - elementi
-
-
- , , - - , , - - - , ,
-
7/21/2019 ICR Predavanje 8
35/89
Heading
-
7/21/2019 ICR Predavanje 8
36/89
Heading
-
7/21/2019 ICR Predavanje 8
37/89
lead
Text Formating
-
7/21/2019 ICR Predavanje 8
38/89
Text Formating
This is bold text
This is big text
This is computer code
-
7/21/2019 ICR Predavanje 8
39/89
Alignment - Poravnanje
.text-left, .text-center, .text-right, .text-justify, .text-nowra
List Unordered
-
7/21/2019 ICR Predavanje 8
40/89
List Unordered
,
-
7/21/2019 ICR Predavanje 8
41/89
Lists Ordered
,
-
7/21/2019 ICR Predavanje 8
42/89
List Description
,
-
7/21/2019 ICR Predavanje 8
43/89
Tables
.table, .table-striped, .table-bordered, .table-hover
-
7/21/2019 ICR Predavanje 8
44/89
Forms code
-
7/21/2019 ICR Predavanje 8
45/89
Forms code
Forms ostalo
-
7/21/2019 ICR Predavanje 8
46/89
Forms ostalo- .form-inline (>= 768px)-
- type: text, email, password, radio, checkbox- , - .form-control-static- .disabled, .readonly- validation
- .has-success, .has-warning, .har-error- Sizing:- .input-lg, .input-sm
- col-xs-4 (irina input polja)
Buttons
-
7/21/2019 ICR Predavanje 8
47/89
Buttons
Button
-
7/21/2019 ICR Predavanje 8
48/89
Button
Images
-
7/21/2019 ICR Predavanje 8
49/89
Images
.img-responsive
Helper classes
-
7/21/2019 ICR Predavanje 8
50/89
Helper classes
Helper classes - background
-
7/21/2019 ICR Predavanje 8
51/89
p g
-
7/21/2019 ICR Predavanje 8
52/89
Bootstrap komponente
-
7/21/2019 ICR Predavanje 8
53/89
p p
- Glyphicons
- Dropdowns- Button groups, button dropdowns- Input groups- Navs, Navbars
- Pagination, Labels- Alerts- Progress bar
P l
Glyphicons
-
7/21/2019 ICR Predavanje 8
54/89
yp- font ikonice- 200
- responsive- uslovi korie
-
7/21/2019 ICR Predavanje 8
55/89
p
.divider, .disabled
Button groups
-
7/21/2019 ICR Predavanje 8
56/89
g p
.btn-group-lg, .btn-group-sm, .btn-group-xs.btn-group-vertical, btn-group-justified- nesting
Button dropdowns
-
7/21/2019 ICR Predavanje 8
57/89
p
.btn-default, btn-primary, btn-dropup
btn lg btn sm
Input groups
-
7/21/2019 ICR Predavanje 8
58/89
p g p
.input-group-lg, .inpu
.input-group-btn (dro
Nav
-
7/21/2019 ICR Predavanje 8
59/89
Tabs
Pills
.nav-stacked, .nav-ju
Navbar
-
7/21/2019 ICR Predavanje 8
60/89
.navbar .navbar-default (.container .container-fluid)
.navbar-btn
.navbar-fixed-top .navbar-fixed-bottom
b i
Breadcrumbs
-
7/21/2019 ICR Predavanje 8
61/89
Pagination
-
7/21/2019 ICR Predavanje 8
62/89
.pager, .pagination-lg, .pagination-sm
Labels
-
7/21/2019 ICR Predavanje 8
63/89
Jumbotron
-
7/21/2019 ICR Predavanje 8
64/89
Page header
-
7/21/2019 ICR Predavanje 8
65/89
Thumbnails
-
7/21/2019 ICR Predavanje 8
66/89
-
7/21/2019 ICR Predavanje 8
67/89
Alerts
-
7/21/2019 ICR Predavanje 8
68/89
.alert-link
List group
-
7/21/2019 ICR Predavanje 8
69/89
.list-group-item-suc
.list-group-item-war
.list-group-item-hea
.list-item-text
.disable .active
Panels
-
7/21/2019 ICR Predavanje 8
70/89
.panel-footer
.panel-primary .pane- tables: .panel-he
body- .list-group-item
Bootstrap komponente - ostalo
-
7/21/2019 ICR Predavanje 8
71/89
- Badges
- Progress bar- Media object- Responsive embed- Wells
Bootstrap JavaScript
-
7/21/2019 ICR Predavanje 8
72/89
- Modal
- Dropdown- Scrollspy- Tab- Tooltip, Popover
- Alert- Button- Collapse
Modal
-
7/21/2019 ICR Predavanje 8
73/89
ScrollSpy
-
7/21/2019 ICR Predavanje 8
74/89
Tab
-
7/21/2019 ICR Predavanje 8
75/89
.tab .fade
Tooltip
-
7/21/2019 ICR Predavanje 8
76/89
Popover
-
7/21/2019 ICR Predavanje 8
77/89
Collapse
-
7/21/2019 ICR Predavanje 8
78/89
Bootstrap JavaScript - ostalo
-
7/21/2019 ICR Predavanje 8
79/89
- Dropdown
- Alert message- Buttons- Carousel
Bootstrap customize
-
7/21/2019 ICR Predavanje 8
80/89
Bootstrap ekosistem
-
7/21/2019 ICR Predavanje 8
81/89
- Nadogradnja- Teme- Alati
Bootstrap nadogradnja
-
7/21/2019 ICR Predavanje 8
82/89
- Fuel UX
- http://getfuelux.com/index.html- datepicker, infinite scroll, loader, pillbox, tre
- Font awesome- http://fortawesome.github.io/Font-Awesome
- Social buttons- http://lipis.github.io/bootstrap-social/- Bootsnipp (code snippets)
- http://bootsnipp.com/
Bootstrap themes & templates
http://lipis.github.io/bootstrap-social/http://fortawesome.github.io/Font-Awesome/http://getfuelux.com/index.htmlhttp://bootsnipp.com/http://lipis.github.io/bootstrap-social/http://fortawesome.github.io/Font-Awesome/http://getfuelux.com/index.html -
7/21/2019 ICR Predavanje 8
83/89
- Start Bootstrap (free, $)- http://startbootstrap.com/
- Bootswatch - teme- http://bootswatch.com/
- PrepBootstrap (themes, templates)- http://www.prepbootstrap.com/
Bootstrap alati
http://www.prepbootstrap.com/http://startbootstrap.com/http://www.prepbootstrap.com/http://bootswatch.com/http://startbootstrap.com/ -
7/21/2019 ICR Predavanje 8
84/89
- Layoutit - drag and drop- http://www.layoutit.com/
- Bootply- http://www.bootply.com/
- Bootstrap Magic- http://pikock.github.io/bootstrap-magic/index
Zato ne Bootstrap?
http://pikock.github.io/bootstrap-magic/index.htmlhttp://www.layoutit.com/http://pikock.github.io/bootstrap-magic/index.htmlhttp://www.bootply.com/http://www.layoutit.com/ -
7/21/2019 ICR Predavanje 8
85/89
- Glomazan CSS- Ako svi budemo koristili Bootstrap- Specifini zahtevi
- Dizajner ?- Ne moram poznavati CSS - netano
Ostali front-end framework-ci
-
7/21/2019 ICR Predavanje 8
86/89
- Foundation- http://foundation.zurb.com/
- INK- http://ink.sapo.pt/
- Pure
- http://purecss.io/
Foundation
http://ink.sapo.pt/http://foundation.zurb.com/http://purecss.io/http://ink.sapo.pt/http://foundation.zurb.com/ -
7/21/2019 ICR Predavanje 8
87/89
Foundation
-
7/21/2019 ICR Predavanje 8
88/89
-
7/21/2019 ICR Predavanje 8
89/89
Kraj?