Bootstrap 3
http://www.reactiongifs.com/r/wwysydh.gif
Matija Grčić
MCSD Web Apps
@matijagrcic
20. Svibnja 2014.
ŠTO ĆETE NAUČITI
Zašto je Bootstrap koristan
Kako dodati Boostrap u svoj projekt
Kako prilagoditi Bootstrap
http://i.imgur.com/sbITJRL.gif
Kako koristiti komponente
Kako koristiti Bootstrap jQuery dodatke (plugin)
I još puno stvari zanimljivih stvari…
20. Svibnja 2014.
NA KOJI NAČIN
Što želimo postići
Kako to postići
http://i.imgur.com/sgbNhAc.gif
http://i.imgur.com/fXUCUl6.gif
20. Svibnja 2014.
ZAŠTO BOOTSTRAP
•
•
•
Dizajneri
Developer(i) kao dizajneri
Sličnosti web stranica
http://i.imgur.com/ZV3vARs.gif
20. Svibnja 2014.
ŠTO JE BOOTSTRAP
Razvojni okvir
CSS
Javascript
Modularnost
getbootstrap.com
https://github.com/twbs/bootstrap
http://i.imgur.com/RsfIErp.gif
20. Svibnja 2014.
PRINCIPI WEB DIZAJNA
Prije:
mobilne verzije (m.domena.com, jQueryMobile, jQuery UI)
„oduzimanje sadržaja”
glavna *.css datoteka, media queries
„mali uređaji” najviše CSS pravila !IMPORTANT
Bootstrap v2
http://replygif.net/i/1407.gif
20. Svibnja 2014.
PRINCIPI WEB DIZAJNA
Danas:
Luke Wroblewski
mobile first http://vimeo.com/38187066
(„progresivno uljepšavanje umjesto graciozne
degradacije”)
http://i.imgur.com/j7j2GBU.gif
20. Svibnja 2014.
KAKO ZAPOČETI
http://getbootstrap.com/
http://www.reactiongifs.com/r/ohboy.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
GRID SUSTAV
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
http://www.reactiongifs.us/wpcontent/uploads/2013/10/dont_give_a_damn.gif
http://i.imgur.com/9lNrbaH.gif
20. Svibnja 2014.
CONTAINER(S)
ROWS
IMAGES
HELPERS
http://i.imgur.com/3eA54so.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
TIPOGRAFIJA
GUMBI
IKONE
http://i.imgur.com/WjI9uRM.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
NAVIGACIJA
NAVBAR
NAVBAR-DEFAULT
NAVBAR-COLLAPSE
NAVBAR-FIXED-TOP
http://i.imgur.com/yaiIOLb.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
LISTE
LIST-UNSTYLED
LIST-INLINE
LIST-GROUP
BADGE
http://i.imgur.com/6I4Oy1W.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
TABLICE
TABLE
BORDERED,
RESPONSIVE,
STRIPED,
HOVER,
CONDENSE
http://i.imgur.com/imPiuKP.gif
http://gifsec.com/wp-content/uploads/GIF/2014/03/I-lovethis-gif.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
FORME
VERTICAL
INLINE
HORIZONTAL
PLACEHOLDER
FORM-GROUP
FORM-CONTROL
http://i.imgur.com/lTZ6Pf3.gif
http://www.reactiongifs.com/r/mswha.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
http://i.imgur.com/7qCg1y3.gif
20. Svibnja 2014.
KOMPONENTE
PAGE HEADER
BREADCRUMBS
BUTTON GROUPS
DROPDOWNS
BUTTON
DROPDOWNS
INPUT GROUPS
PAGINATION
THUMBNAILS
PANELS
WELLS
http://i.imgur.com/z5ewgzD.gif
20. Svibnja 2014.
PAGE HEADER
BREADCRUMBS
CLASS="PAGE-HEADER"
CLASS="BREADCRUMB"
http://www.reactiongifs.com/r/ok-then.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
BUTTON GROUPS
INPUT GROUPS
BTN-GROUP
BTN-GROUP-SM
http://i.imgur.com/gYNDORJ.gif
DATA-TOGGLE="BUTTONS"
CLASS="INPUT-GROUP-ADDON"
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
DROPDOWNS
BUTTON DROPDOWN
DROPDOWN,
DROPDOWN-MENU,
DIVIDER
http://i.imgur.com/jcsNQCO.gif
DATA-TOGGLE="DROPDOWN"
CLASS="CARET"
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
PAGINACIJA
CLASS="PAGER,PREVIOUS,NEXT"
CLASS="DISABLED, ACTIVE"
JAVASCRIPT
http://i.imgur.com/bNSPmS8.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
PANELS
WELLS
PANEL
PANEL-DEFAULT[PRIMARY,…]
BODY,HEADING,TITLE,FOOTER
CLASS="WELL"
CLASS="LEAD"
http://i.imgur.com/betOjiI.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
JQUERY DODACI (PLUGIN)
COLLAPSE
ACCORDION
MODAL
TAB
TOOLTIP
ALERT
CAROUSEL
http://i.imgur.com/sgJJx2A.gif
20. Svibnja 2014.
COLLAPSE
ACCORDION
DATA-TOGGLE="COLLAPSE"
DATA-PARENT="#ACCORDION"
PANEL-GROUP,
PANEL-INFO,
PANEL-COLLAPSE
http://i.imgur.com/5H5afeZ.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
MODAL WINDOWS
CLASS="MODAL"
ID="#DIALOG"
MODAL-DIALOG
MODAL-CONTENT
MODAL-HEADER
BODY
FOOTER
DATA-DISMISS="MODAL"
http://i.imgur.com/jKuCyPm.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
ALERT
CLASS="ALERT ALERT-WARNING"
DATA-DISMISS="ALERT"
CLASS="CLOSE"
CLOSE.BS.MODAL
http://i.imgur.com/Z1grBFI.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
TAB
CLASS="NAV NAV-TABS"
DATA-TOGGLE="TAB"
CLASS="TAB-CONTENT"
http://i.imgur.com/4ZOzl5C.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
CAROUSEL
CLASS="CAROUSEL SLIDE"
DATA-INTERVAL="2000"
INNER
INDICATORS
CONTROL
CAPTION
http://i.imgur.com/5M0QJVh.gif
20. Svibnja 2014.
DEMO
20. Svibnja 2014.
PRISTUPAČNOST
http://i.imgur.com/6DR9456.gif
https://github.com/twbs/bootstrap/pull/12840 v3.2
https://github.com/ratnic/bootstrap-rtl
https://github.com/paypal/bootstrap-accessibility-plugin PayPal
20. Svibnja 2014.
ZAKLJUČAK
http://i.imgur.com/GNc2fVb.gif
http://i.imgur.com/FwD7lVP.gif
20. Svibnja 2014.
ANKETA
HTTP://LIMESURVEY.SRCE.HR/14741/LANG-HR
20. Svibnja 2014.