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.
© Copyright 2024 Paperzz