Curs Bootstrap Online

Baza pentru a intelege cum functioneaza Bootstrap este sistemul sau de coloane. In fiecare rand se pot insera un maxim de 12 coloane. Aceste coloane se pot distribui in foarte multe combinatii.

Dar cum anume se controleaza vizualizarea elementelor la variile rezolutii de dispozitive? Cu ajutorul regulilor CSS media queries – interogari media in baza largimii dispozitivului. Bootstrap dispune de 3 seturi de media queries pentru dispozitivele mici, medii si mari care reprezinta clasele corespondente: sm, md si lg. Rezolutia de default este pentru dispozitivele foarte mici, adica pentru telefoane mobile, deoarece Bootstrap este o platforma MOBILE FIRST.

Bootstrap dispune de zeci de elemente preconfectionate, printre care galerii de imagini, meniuri de navigare, breadcrumbs – firmituri de paine, etichete, panouri, liste, butoane, alterte etc. Toate elementele in Bootstrap sunt configurate prin clase CSS. In partea de introducere la Bootstrap vom trece in revista clasele pentru elementele principale de layout, pentru ca in modulele succesive sa le scriem de la zero penru crearea layout-ului complet.

Pentru ca o pagina web sa functioneze corect cu Bootstrap va trebui sa configuram link-urile catre foaia de stil si javascript a framework-ului. Pe langa aceste link-uri pagina va fi configurata pentru a putea fi interpretata ca si responsive de catre browserele web prin metatagul viewport. In plus pentru functionarea elementelor javascript specifce Bootstrap va fi adaugat in pagina si link-ul catre framework-ul jQuery, iar ordinea acestui link in document este fundamentala.

In ceea ce priveste crearea unui nou layout cu Bootstrap folosind functiile automate din Adobe Dreamweaver vom vedea variile modalitati pe care programul le ofera.

La incarcarea layout-ului de pagina preconfectionat in Dreamweaver vom vedea in detaliu cum a fost acesta configurat si care sunt clasele folosite pentru principalele elemente: containers, randuri, coloane, offsets, titluri, butoane, iconite, labels etc.

Analiza layout-ului propus in Dreamweaver se face in vizualizarea codului si este indispensabila de parcurs si pentru cine foloseste alte editoare de text deoarece in acest modul sunt prezentate functionalitati esentiale pentru a putea realiza layout-ul de la zero in modulul succesiv.

Pagina web completa creata de Dreamweaver si analizata in acest modul este disponibila spre descarcare in cadrul cursului.

In acest modul vom crea o pagina completa scriind markup-ul intr-un editor diferit fata de Dreamweaver, si anume in Brackets. Pentru reproducerea layout-ului se poate utiliza orice editor de text. Plecam de la exemplele de makup propuse de Bootstrap pentru a le personaliza intr-un layout original.

Pagina web responsive completa cu Bootstrap pe care o construim in curs cuprinde:
– sectiunea meniului de navigare si brand;
– slider de imagini – carousel;
– sectiune de oferte pentru care utilizam jumbotron si clasa pentru imagini rotunde, carora le aplicam atat efectul javascript toogle cat si efecte CSS de hover;
– diferite clase si tag-uri specifice Bootstrap pentru tipografie si butoane, printre care si doua tipologii de blockquote;
– sectiunea de articole blog unde imaginile sunt configurate cu clasa specifica pentru aceasta tipologie de vizualizare;
– partea de footer a paginii.

Toate elementele incluse in Bootstrap sunt exemplificate cu respectivul markup ce poate fi copiat si personalizat in cadrul oricarui proiect.

In Adobe Dreamweaver meniul Insert a fost implementat cu sectiunea Bootstrap Components cu ajutorul careia se poate insera markup-ul pentru principalele componente.