Merită să învăţ Bootstrap? Pentru că timpul tău este important, vom intra direct în subiect cu această întrebare. Iar răspunsul este da. Bootstrap nu este un limbaj de programare care va dispărea peste 1-2 ani, ci este un mod ordonat de a utiliza elemente CSS, HTML şi Java Script pentru a crea structuri pe care le poţi refolosi cu un simplu copy-paste.
În ansamblu îţi poate economisi cu până la 70% din timpul de dezvoltare pe front-end pentru majoritatea proiectelor, de la landing-page-uri, la site-uri de prezentare şi magazine online.
Cum te poate ajuta Bootstrap în proiectele tale?
Denumit iniţial Twitter Blueprint, framework-ul a fost dezvoltat de Mark Otto şi Jacob Thornton ca o soluţie internă pentru Twitter.
După câteva luni de la implementare, mai mulţi dezvoltatori au început să contribuie la el în timpul Hack Week, o săptămână în care angajaţii dezvoltau diverse proiecte, iar în august 2011 este lansat open-source sub denumirea de Bootstrap.
Dacă eşti web designer sau web developer şi creezi site-uri web, de cele mai multe ori vei dezvolta site-uri care repetă structuri de cod simple: butoane, formulare, sau ceva mai complexe: meniuri de navigare, carousel şi altele.
Bootstrap te poate ajuta să devii mai eficient şi să salvezi din timpul de dezvoltare necesar pentru un site web, oferind structuri predefinite necesare în majoritatea proiectelor tale: meniul de navigare, carousel, formulare şi cel mai important grid-urile responsive.
Versiunea curentă este 3.37 şi o poţi descărca de aici: http://getbootstrap.com
Iată cele mai bune 6 motive să utilizezi Bootstrap în proiectele tale
#1. Compilarea şi personalizarea
Este unul din motivele pentru care poate fi utilizat inclusiv atunci când îţi doreşti performanţă de la site-ul tău.
Bootstrap îţi pune la dispoziţie opţiunea de compilare: selectezi şi descarci doar ceea ce foloseşti în proiect. Poţi reduce astfel de la 120KB cât are fişierul CSS comprimat la doar 40 KB, dacă utilizezi de exemplu doar structurile responsive.
La fel şi în cazul Java Script, pe care îl poţi compila sau exclude din proiect, dacă nu ai nevoie.
Pagina de compilare o găseşti aici: http://getbootstrap.com/customize/
#2. Sistemul de 12 griduri responsive
Bootstrap împarte pagina web în 12 coloane cu valori procentual-egale. Unind aceste coloane poţi obţine box-urile dorite pentru a adăuga conţinutul tău.
Majoritatea site-urilor moderne utilizează aceaste structuri, Bootstrap fiind de altfel acuzat că duce la realizarea de site-uri mult prea asemănătoare (http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/).
Este însă extrem de flexibil, iar clasele responsive pot fi controlate în funcţie de lăţimea dispozitivului. Iată mai jos un exemplu, a cărui structură o poţi recunoaşte uşor:
#3. Componentele HTML şi JavaScript
Bootstrap pune la dispoziţie o serie de componente şi elemente pe care le vei folosi în majoritatea proiectelor:
- Meniul de navigare cu dropdown
- Carouselul
- Breadcrumbs şi multe altele.
# 4. Stiluri CSS de bază pentru majoritatea elementelor.
Pe lângă sistemul de griduri care îţi poate uşura semnificativ munca, Bootstrap vine şi cu o serie de stiluri pentru elementele de bază: butoane, formulare, tabele, imagini şi altele. Poate fi inclus foarte uşor în proiecte.
#5. Suport, documentare şi răspunsuri
Bootstrap vine cu o documentare foarte bună din care poţi învăţa uşor.
Ce se întâmplă dacă clientul tău doreşte să dea swipe, iar carouselul Bootstrap nu are inclus asta? Poţi începe dezvoltarea noilor opţiuni sau poţi face o căutare pe Google unde cel mai probabil vei găsi soluţii testate şi funcţionale.
#6. Cererea proiectelor dezvoltate pe Bootstrap este în creştere
Majoritatea template-urilor şi site-urilor noi utilizează Bootstrap în structura lor. Timpul de dezvoltare mai mic dar şi modificările care pot fi realizate cu uşurinţă îl fac să fie cerut.
De aceea vei avea nevoie să cunoşti clasele şi să poţi realiza modificări uşor. Iată de exemplu template-uri urcate pe Themeforest.net
Cum începi să lucrezi cu Bootstrap
#1: Descărcarea
Acceseaza http://getbootstrap.com/getting-started/ şi apasă butonul de Download Bootstrap. Poţi utiliza de asemnea şi CDN-urile dacă nu doreşti să descarci fişierele.
#2: Includerea fişierelor în directorul root al site-ului
După descărcare şi dezarhivare vei găsi 3 directoare: css, fonts si js. Fişierul bootstrap.min.css din folderul css, îl vei muta în directorul tău CSS, iar bootstrap.min.js în JS.
Vei include fisierul bootstrap.min.css, iar sub el stilul tău css. În acesta vei suprascrie clasele Bootstrap atunci când este cazul şi vei adăuga stilurile tale.
Pentru o încărcare mai rapidă a site-ului, fişierele js se includ la sfârşitul paginii. Bootstrap.min.js are nevoie de librăria jQuery, pe care o poţi downloada şi insera înainte.
Primele linii de cod cu Bootstrap
De acum poţi insera coduri Bootstrap în pagina ta. Vom începe cu meniul de navigare, un element complex, dar de efect. Accesezi rubrica Components > Navbar , copiezi codul pentru meniul de navigare şi îl lipeşti în pagina ta web. Salvezi şi testezi în browser. Ceea ce trebuie să obţii este meniul Bootstrap, aşa cum apare în exemplul următor:
Toate aceste lucruri le poţi obţine în 5 minute, de aici însă trebuie să personalizezi în funcţie de ceea ce doreşti să obţii.
Clasele Bootstrap:
Pentru a lucra rapid, trebuie să cunoşti clasele predefinite, iar cel mai simplu mod de a le învăţa este chiar navigarea pe site-ului lor.
Vei găsi categoria de CSS, componentele şi structurile Java Script. Cu puţină răbdare şi timp dedicat învăţării, vei începe să dezvolţi proiecte în scurt timp.
Pentru asimilarea mai rapidă a informaţiilor, poţi selecta şi urma cursuri online pe Udemy, la sala de curs în Timisoara sau, de asemenea, poţi găsi cursuri bootstrap şi în Bucureşti.
Concluzie
Fie că eşti web designer sau web developer, Bootstrap îţi poate salva un timp considerabil în dezvoltarea proiectelor. În plus este redat foarte bine în majoritatea dispozitivelor şi browserelor. Poate fi utilizat în proiectele de zi cu zi, de la landing page-uri şi site-uri de prezentare până la magazine online.
