Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Edința 8 - Bootstrap - Introducere În Bootstrap

    Încărcat de

    Silvana Boca
    2 vizualizări13 pagini

    Titlu original

    edința 8 - Bootstrap - Introducere în Bootstrap

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    2 vizualizări13 pagini

    Edința 8 - Bootstrap - Introducere În Bootstrap

    Încărcat de

    Silvana Boca

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 13

    WEB DEVELOPER BASIC DESIGN

    Introducere în Bootstrap
    RECAPITULARE

    • Etape parcurse pentru crearea și accesarea unei pagini Web


    • Structura unui document HTML
    • Elemente de baza ale limbajului HTML
    • Liste
    • Tabele
    • Formulare
    • <div> și <span>
    • Folosirea CSS-ului pentru stilizare
    CUPRINS
    • Ce este Bootstrap?
    • Când folosim Bootstrap?
    • Ce ne oferă Bootstrap?
    • Cum configurăm Bootstrap
    • Layouturile în Bootstrap
    • Glyphicons
    Ce este Bootstrap?
    ● Framwevorkul dezvoltat de Twitter permite realizarea de site-uri web
    responsive, care se adaptează la orice rezolutie de dispozitiv: desktop, tablete și
    telefoane mobile
    ● Este cel mai utilizat framework pentru dezvoltarea de interfețe web
    ● A devenit rapid standardul în crearea templateurilor pentru principalele sisteme
    CMS ca WordPress
    Când folosim Bootstrap?
    •Framewokurile ca Bootstrap se pot folosi atuci când stăpânim bine cel puțin
    limbajele HTML și CSS și avem nevoie de o bază pentru a începe să construim un
    proiect
    •Boostrap este un instrument utilizat pentru a gestiona mai bine faza inițială a unui
    proiect
    •Putem conta pe o serie de componente care pot fi reutilizate și personalizate
    oferindu-ne o bază solidă de pornire pentru proiectele noastre ca să nu fim nevoiți
    să începem de la zero
    Ce ne oferă Bootstrap?

    ● O mulțime de funcționalități CSS și Javascript


    ● Este folosit în foarte multe proiecte comerciale, de la pagini de sosire, pagini
    personale, blog-uri până la proiecte ce implică mai mult de 10 pagini, iar din
    punct de vedere CSS și Javascript:
    •Web Design Responsive ( PC, Tabletă, Telefon )
    •Sistem Grid
    •Meniuri ( Orizontale, Verticale )
    •Formulare
    •Butoane
    •Meniuri Dropdown in Javascript
    Cum configurăm Bootstrap
    ● Descărcăm Bootstrap de aici
    ○ http://getbootstrap.com/
    ● Dezarhivăm și adăugăm cele 3 fișiere în folderul site-ului nostru
    ● Creăm un fișier index.html
    ● Deschidem fișierul creat și creăm structura unui fișier HTML

    ● În <head> adăugăm fișierele boostrap


    ○ <link href=”css/bootstrap.min.css” rel=”stylesheet”>
    ○ <script src=”js/jquerry-1.10.1.min.js”></script>
    ○ <script src=”js/bootstrap.min.js”></script>
    Cum configurăm Bootstrap

    ● Fișierul bootstrap.min.css este atașat în <head> pentru a avea la dispoziție anumite


    stiluri înainte de a se fi încărcat elementele
    ● Fisierul bootstrap.min.js este încărcat sub jquery-1.10.1.min.js pentru ca mai întâi
    trebuie încărcat jQuery fiind folosit de Bootstrap și înainte de a manipula anumite
    elemente din DOM ele trebuie încărcate

    Atentie! Conteaza ordinea.


    Layouturile în Bootstrap
    Fluid vs Fix

    ● Bootsrap permite și crearea layouturilor folosind divuri cu clasa “.container”


    ● Clasa “.container” poate conține orice elemente html
    ● Layout fix în bootstrap se crează folosind clasa “.container” simplu si are o
    rezolutie de 1200 pixeli
    ● Layout fluid se crează cu clasa “container-fluid”. Acesta se va întinde pe tot
    displayul, 100% din cât îi permite pagina
    Bootstrap Grid System
    ● Un grid system este un sistem de ghidaj pentru a structura mai bine a designul pentru
    diferite dimensiuni ale ecranului pe care va fi afișat
    ● Un bun început în a dezvolta un site pe partea de front-end este să alegem un grid
    system
    ● În cod vom vedea că totul este cuprins între <div class=”row”> </div>
    ● Cum spune și numele clasei este un rând care este divizat în funcție de mărimea
    ecranului pe care este redată pagina
    ● Coloanele în rândul nostru sunt delimitate de <div class=”col-lg-4 col-sm-4 col-md-4″>
    și </div> . Astfel avem 12 coloane în layout
    ● De exemplu “col-lg-4“ ocupă 4 coloane din layout în crearea acestei coloane
    atunci când display-ul pe care se afișează este lg(large)
    ● De asemenea “sm“=small, “md“=medium,
    “xs“=extra small <= 400px wide
    Glyphicons

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


    Q&A
    CONTACT

    • Borșaru Sabin: sabin.borsaru@techadviser.ro


    • Unguru Ionuț: ionut.unguru@techadviser.ro

    • TechAdviser Academy: cursuri@techadviser.ro

    S-ar putea să vă placă și