ICR Predavanje 8

7/21/2019 ICR Predavanje 8

1/89

Primena Bootstrap-a

za brzi razvojveb prezentacija

ore Mijatovidoc. dr Milan abarkapa


2/89

Uvod

- veb poetci

- 20.12.1990, Tim Berners-Lee, CERN- http://info.cern.ch/
http://info.cern.ch/


3/89

Uvod


4/89

Razvoj veb (www) pregledaa

- WorldWideWeb - prvi pregleda

- Netscape Navigator- Gecko engine- ECMAScript

- Lynx


5/89

Razvoj veb (www) pregledaa

Danas

- Google Chrome- Internet Explorer- Firefox

- Safari- Opera


6/89

Razvoj veba (www)

veb (www) danas

- HTML5- CSS3- JavaScript (ECMAScript)


7/89

Mobilni i veb - poetak

- Mobile, PDA

- WAP- Wireless Application Protocol

- Nokia 7110 (1999)


8/89

Razvoj mobilnih

- Nagli razvoj mobilnih ureaja

- Posledice na veb- 2015 oekivano 1.000.000.000 mobiln


9/89

Mobilni

Razliite veliine ekrana


10/89

Ureaji danas - veliina ekrana


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


12/89

Front end Frameworks

- Pisanje CSS

- Korienje gotovih reenja


13/89

PauseII


14/89


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


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/


17/89

Bootstrap ukratko

- sredina 2010 (Twitter Blueprint) open

- Github popularnost- oko 20 unapreenja i tri verzije- trenutno v3.3

- koristi jQuery

Bootstrap primer


18/89

Bootstrap primer

http://getbootstrap.com/exam

Bootstrap primer
http://getbootstrap.com/examples/dashboard/


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


20/89

Bootstrap i pregledai


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/


22/89

TW Bootstrap - ta sadri?

CSSJavaScript

Font

Bootstrap poe


23/89

Bootstrap - poe


24/89

Bootstrap responsive i grid sist

Mobile fir


25/89

Grid options


26/89

Grid: Bootstrap responsive stra

Sadraj - podelje

Jedan - moe vi

Podela na kolone

G


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


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


29/89

Bootstrap sadraj

.containerili .container-fluid

B t t i l * *


30/89

Bootstrap .row i .col-*-*


31/89


32/89

P i i


33/89

Primeri za .co

Desktop i mobilni

Bootstrap CSS elementi


34/89

Bootstrap CSS - elementi

-

-

- , , - - , , - - - , ,


35/89

Heading


36/89

Heading


37/89

lead

Text Formating


38/89

Text Formating

This is bold text

This is big text

This is computer code


39/89

Alignment - Poravnanje

.text-left, .text-center, .text-right, .text-justify, .text-nowra

List Unordered


40/89

List Unordered

,


41/89

Lists Ordered

,


42/89

List Description

,


43/89

Tables

.table, .table-striped, .table-bordered, .table-hover


44/89

Forms code


45/89

Forms code

Forms ostalo


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


47/89

Buttons

Button


48/89

Button

Images


49/89

Images

.img-responsive

Helper classes


50/89

Helper classes

Helper classes - background


51/89

p g


52/89

Bootstrap komponente


53/89

p p

- Glyphicons

- Dropdowns- Button groups, button dropdowns- Input groups- Navs, Navbars

- Pagination, Labels- Alerts- Progress bar

P l

Glyphicons


54/89

yp- font ikonice- 200

- responsive- uslovi korie


55/89

p

.divider, .disabled

Button groups


56/89

g p

.btn-group-lg, .btn-group-sm, .btn-group-xs.btn-group-vertical, btn-group-justified- nesting

Button dropdowns


57/89

p

.btn-default, btn-primary, btn-dropup

btn lg btn sm

Input groups


58/89

p g p

.input-group-lg, .inpu

.input-group-btn (dro

Nav


59/89

Tabs

Pills

.nav-stacked, .nav-ju

Navbar


60/89

.navbar .navbar-default (.container .container-fluid)

.navbar-btn

.navbar-fixed-top .navbar-fixed-bottom

b i

Breadcrumbs


61/89

Pagination


62/89

.pager, .pagination-lg, .pagination-sm

Labels


63/89

Jumbotron


64/89

Page header


65/89

Thumbnails


66/89


67/89

Alerts


68/89

.alert-link

List group


69/89

.list-group-item-suc

.list-group-item-war

.list-group-item-hea

.list-item-text

.disable .active

Panels


70/89

.panel-footer

.panel-primary .pane- tables: .panel-he

body- .list-group-item

Bootstrap komponente - ostalo


71/89

- Badges

- Progress bar- Media object- Responsive embed- Wells

Bootstrap JavaScript


72/89

- Modal

- Dropdown- Scrollspy- Tab- Tooltip, Popover

- Alert- Button- Collapse

Modal


73/89

ScrollSpy


74/89

Tab


75/89

.tab .fade

Tooltip


76/89

Popover


77/89

Collapse


78/89

Bootstrap JavaScript - ostalo


79/89

- Dropdown

- Alert message- Buttons- Carousel

Bootstrap customize


80/89

Bootstrap ekosistem


81/89

- Nadogradnja- Teme- Alati

Bootstrap nadogradnja


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


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/


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/


85/89

- Glomazan CSS- Ako svi budemo koristili Bootstrap- Specifini zahtevi

- Dizajner ?- Ne moram poznavati CSS - netano

Ostali front-end framework-ci


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/


87/89

Foundation


88/89


89/89

Kraj?

Documents

ICR Predavanje 8