Scribd Logo
Upload

Welcome to Scribd!

  • ICR Predavanje 8

    Uploaded by

    Milos Ilic
    12 views89 pages
    predavanje

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    predavanje

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views89 pages

    ICR Predavanje 8

    Uploaded by

    Milos Ilic
    predavanje

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 89

    Primena Bootstrap-a

    za brzi razvoj
    veb prezentacija
    ore Mijatovi
    doc. dr Milan abarkapa

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

    Uvod

    Razvoj veb (www) pregledaa


    - WorldWideWeb - prvi pregleda
    - Netscape Navigator
    - Gecko engine
    - ECMAScript

    - Lynx

    Razvoj veb (www) pregledaa


    Danas
    - Google Chrome
    - Internet Explorer
    - Firefox
    - Safari
    - Opera

    Razvoj veba (www)


    veb (www) danas
    - HTML5
    - CSS3
    - JavaScript (ECMAScript)

    Mobilni i veb - poetak


    - Mobile, PDA
    - WAP
    - Wireless Application Protocol

    - Nokia 7110 (1999)

    Razvoj mobilnih
    - Nagli razvoj mobilnih ureaja
    - Posledice na veb
    - 2015 oekivano 1.000.000.000 mobilnih

    Mobilni
    Razliite veliine ekrana

    Ureaji danas - veliina ekrana

    Kako napraviti (dobru) prezentaciju


    - Pristup sa razliitih ureaja
    - od mobilnih do PC-a (3 - 27)

    - Mobilnih aplikacija
    - Android, iOS, Windows Mobile

    - Responsive dizajn

    Front end Frameworks


    - Pisanje CSS
    - Korienje gotovih reenja

    II
    Pause

    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

    Bootstrap upotreba
    Primer sajtova koji koriste Bootstrap
    - Bootstrap Expo
    http://expo.getbootstrap.com/
    - Built With Bootstrap
    http://builtwithbootstrap.com/

    Bootstrap ukratko
    -

    sredina 2010 (Twitter Blueprint) open source


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

    Bootstrap primer

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

    Bootstrap primer

    http://startbootstrap.com/template-overviews/sb-admin-2/
    http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/index.html

    Bootstrap i pregledai

    Bootstrap - dodavanje u projekat


    Kako dodati bootstrap na projekat?
    1. Download getbootstrap.com (github)
    2. LESS / SASS
    3. CDN (Content Delivery Network)

    TW Bootstrap - ta sadri?
    CSS
    JavaScript
    Font

    Bootstrap - poetak

    Bootstrap responsive i grid sistem


    Mobile first

    Grid options

    Grid: Bootstrap responsive strana


    Sadraj - podeljen na redove

    Jedan - moe vie redova


    Podela na kolone - u zbiru 12

    Grid sistem - kolone


    Mobile first

    .col-md-*
    1200 px

    .col-md-*
    992 px

    .col-md-*
    768 px

    .col-xs-*
    < 768 px

    Bootstrap grid sistem - sumiranje


    - Grid sistem: 12 kolona
    - Mobile first (od v3.0)
    - css klase
    - .container i .container-fluid
    - .row
    - .col-*-*

    Bootstrap sadraj
    .container ili .container-fluid
    <body>
    <div class=container>
    <!-- Sadraj -->
    </div>
    </body>

    Bootstrap .row i .col-*-*

    <div class=container>
    <div class=row>
    <!-- Kolone -->
    </div></div>

    Primeri za .col-*-*

    Desktop i mobilni

    Bootstrap CSS - elementi


    -

    <h1> <h6>
    <p>
    <ul>, <ol>, <dl>
    <table>
    <input>, <textarea>, <select>
    <button>
    <img>
    <small>, <del>,

    Heading
    <h1> <h6>

    Heading
    <small>

    <p>

    .lead

    Text Formating
    <div class="container">
    <p><b>This is bold text</b></p>
    <p><big>This is big text</big></p>
    <p><code>This is computer code</code></p>
    <p><em>This is emphasized text</em></p>
    <p><i>This is italic text</i></p>
    <p><mark>This is highlighted text</mark></p>
    <p><small>This is small text</small></p>
    <p><strong>This is strongly emphasized text</strong></p>
    <p>This is <sub>subscript</sub> and
    <sup>superscript</sup></p>
    <p><ins>This text is inserted to the document</ins></p>
    <p><del>This text is deleted from the document</del></p>
    </div>

    <b>, <big>, <code>, <em>, <i>, <mark>, <small>,


    <strong>, <sub>, <sup>, <ins>, <del>

    Alignment - Poravnanje

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

    List Unordered

    <ul>, <li>
    .list-inline

    Lists Ordered

    <ol>, <li>
    .list-inline

    List Description

    <dl>,<dt>, <dd>
    .dl-horizontal

    Tables

    <table>
    .table, .table-striped, .table-bordered, .table-hover

    Forms

    Forms code

    Forms ostalo
    - .form-inline (>= 768px)
    - <input>
    - type: text, email, password, radio, checkbox
    - <textarea>, <select>
    - .form-control-static
    - .disabled, .readonly
    - validation
    - .has-success, .has-warning, .har-error
    - Sizing:
    - .input-lg, .input-sm
    - col-xs-4 (irina input polja)

    Buttons

    Button sizes

    Images

    .img-responsive

    Helper classes

    Helper classes - background

    Kraj o CSS
    Grid sistem
    .visible-xs-*, .visible-sm-*
    .hidden-xs, hidden-sm,

    Bootstrap komponente
    -

    Glyphicons
    Dropdowns
    Button groups, button dropdowns
    Input groups
    Navs, Navbars
    Pagination, Labels
    Alerts
    Progress bar
    Panels

    Glyphicons
    -

    font ikonice
    200
    responsive
    uslovi korienja

    <span class="glyphicon glyphicon-search"></span>

    Dropdowns

    .divider, .disabled

    Button groups

    .btn-group-lg, .btn-group-sm, .btn-group-xs


    .btn-group-vertical, btn-group-justified
    - nesting

    Button dropdowns

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


    .btn-lg, btn-sm

    Input groups

    .input-group-lg, .input-group-sm
    .input-group-btn (dropdown)

    Nav
    Tabs

    Pills

    .nav-stacked, .nav-justified

    Navbar

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


    .navbar-btn
    .navbar-fixed-top .navbar-fixed-bottom
    .navbar-inverse

    Breadcrumbs

    Pagination

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

    Labels

    Jumbotron

    Page header

    Thumbnails

    Thumbnails

    Alerts

    .alert-link

    List group
    .list-group-item-success
    .list-group-item-warning
    .list-group-item-heading
    .list-item-text
    .disable .active

    Panels

    .panel-footer
    .panel-primary .panel-success
    - tables: .panel-heading .panelbody
    - .list-group-item

    Bootstrap komponente - ostalo


    -

    Badges
    Progress bar
    Media object
    Responsive embed
    Wells

    Bootstrap JavaScript
    -

    Modal
    Dropdown
    Scrollspy
    Tab
    Tooltip, Popover
    Alert
    Button
    Collapse

    Modal

    ScrollSpy

    Tab

    .tab .fade

    Tooltip

    Popover

    Collapse

    Bootstrap JavaScript - ostalo


    -

    Dropdown
    Alert message
    Buttons
    Carousel

    Bootstrap customize

    Bootstrap ekosistem
    - Nadogradnja
    - Teme
    - Alati

    Bootstrap nadogradnja
    - Fuel UX
    - http://getfuelux.com/index.html
    - datepicker, infinite scroll, loader, pillbox, tree, wizard

    - 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


    - Start Bootstrap (free, $)
    - http://startbootstrap.com/

    - Bootswatch - teme
    - http://bootswatch.com/

    - PrepBootstrap (themes, templates)


    - http://www.prepbootstrap.com/

    Bootstrap alati
    - Layoutit - drag and drop
    - http://www.layoutit.com/

    - Bootply
    - http://www.bootply.com/

    - Bootstrap Magic
    - http://pikock.github.io/bootstrap-magic/index.html

    Zato ne Bootstrap?
    - Glomazan CSS
    - Ako svi budemo koristili Bootstrap
    - Specifini zahtevi
    - Dizajner ?
    - Ne moram poznavati CSS - netano

    Ostali front-end framework-ci


    - Foundation
    - http://foundation.zurb.com/
    - INK
    - http://ink.sapo.pt/

    - Pure
    - http://purecss.io/

    Foundation

    Foundation

    Kraj
    ?

    You might also like