Lucrul cu pagini web necesită mult mai mult decât cunoașterea limbilor pe care trebuie să le folosim, există o serie de repere pe care trebuie să le îndeplinim pentru a dezvolta un produs cu un rezultat excepțional. Una dintre aceste etape este designul și dispunerea elementelor care vor fi afișate pe ecran.
Să ne imaginăm că trebuie să proiectăm o pagină web, dacă începem de la zero trebuie să ținem cont de cum ar trebui să arate meniul, tabelele, butoanele, lucruri la fel de simple precum icoanele pe care le vom așeza pe niște butoane de acțiune etc.
După cum putem vedea, este o muncă grea, mai ales dacă vrem să arate optim și să aibă un apel, trebuie să fim, de asemenea, detaliați pentru a oferi site-ului o notă personală, acum, dacă nu suntem designeri? Aceasta este marea întrebare, există dezvoltatori care au un ochi orb când vine vorba de bun gust și design, iar aceste tipuri de profiluri sunt inhibate pentru a face apariții web de calitate. Sau ce se întâmplă dacă avem un gust bun, dar puțin timp pentru a proiecta?
Pentru a rezolva aceste două mari cerințe pe care le avem Bootstrap care nu este altceva decât un Cadrul CSS care ne permite să obținem aspectul de bază al paginii noastre simultan fără a fi nevoie să suferim cu designul, dar în afară de aceasta, ne ajută și cu efectele de bază și cu un mod foarte special de structurare a conținutului pe care urmează să îl prezentăm.
Avantajele BootstrapȘtim deja asta Bootstrap e o Cadrul CSS și asta ne ajută să stabilim aspectele de bază pentru site-ul nostru, dar pe lângă acesta are anumite avantaje în ceea ce privește utilizarea acestuia, vom vedea mai jos câteva dintre lucrurile pozitive pe care ni le aduce Bootstrap:
1. ReutilizațiCu Bootstrap Avem multe componente realizate în mod implicit, astfel încât să le putem folosi fără modificări în diferite părți ale site-ului nostru web, reducând astfel timpul și cantitatea de cod pe care o folosim. Acest lucru favorizează, de asemenea, dezvoltarea modulară a aplicațiilor noastre.
2. CoerențăDatorită faptului că avem multe componente realizate într-un mod generic, codul este consecvent, adică se ocupă de structuri foarte similare, așa că atunci când îl citiți sau întrețineți aplicația, vom ști deja cum funcționează mult mai simplu.
3. Design flexibilDesignul mobil este foarte important și Bootstrap îl ține cont de la început, avem flexibilitatea pe care site-ul nostru se adaptează la diferite rezoluții și aspecte de ecran în mod automat, economisindu-ne multă muncă din nevoia de a proiecta vizualizări mobile de la zero.
4. ComunitateUn alt aspect de luat în considerare este documentarea, atunci când folosim un cadru terț este foarte important să avem unde să ne îndreptăm atunci când avem dubii și în acest sens Bootstrap Nu are nicio comparație, deoarece putem obține aproape orice răspuns la îndoielile noastre fără eforturi mari.
Dezavantaje ale BootstrapDeși aproape totul este bun, trebuie să vorbim și despre dezavantajele sau aspectele nu atât de bune cu care ne confruntăm atunci când folosim acest lucru Cadrul CSSSă vedem câteva dintre slăbiciunile sale de mai jos.
1. Puțin originalDacă nu ne luăm puțin timp pentru a ne crea designul, putem rămâne la fel de puțin original dacă îl folosim Bootstrap fără mai multe, deși acest cadru este conceput pentru el, datorită adoptării deosebite pe care a avut-o, trebuie să lucrăm puțin mai mult pentru a nu arăta ca copia copiei.
2. Curba de învățareLa fel ca orice, trebuie să parcurgem o curbă de învățare dacă vrem să profităm la maximum de ea, problema este că, dacă vrem să trecem de la aspectul de bază la cel avansat, șocul este puțin puternic.
3. Slabă compatibilitate între versiuniCând există o modificare a versiunii, versiunea anterioară își pierde multă valabilitate și dacă vrem să o actualizăm ne va costa, mai ales dacă am făcut modificări importante, astfel încât site-ul nostru să arate diferit.
InstalareOdată ce știm ce este Bootstrap, și avantajele și dezavantajele utilizării acestuia în proiectele noastre, trebuie să ajungem la partea practică a tutorialului, acum vom afla de unde putem obține acest cadru și cum îl putem include în proiectul nostru.
Se obține BootstrapPrimul lucru pe care trebuie să-l facem este să obținem fișierele necesare pentru a le include Bootstrap în proiectul nostru, de aceea trebuie să vizităm site-ul lor getbootstrap.com și să descărcăm fișierele necesare sau, alternativ, să folosim un CDN pentru a evita găzduirea fișierelor pe serverul nostru și pentru a reduce utilizarea lățimii noastre de bandă.
Indiferent de opțiune, trebuie să fim pe o pagină similară cu următoarea, dacă facem clic pe butonul de descărcare inițială atunci când vizităm pagina cadru:
MARI
Pentru a facilita munca, să presupunem că am descărcat proiectul, acesta vine într-un fișier comprimat pe care trebuie să îl extragem într-o locație pe care o putem folosi și care ar trebui să fie ceva similar cu următoarele:
După cum putem vedea, în cadrul proiectului nostru trebuie să existe trei foldere, unul pentru CSS, alta pentru sursele utilizate și în cele din urmă una pentru JS necesar. Cu aceasta avem deja disponibile Bootstrap, care nu este altceva decât copierea proiectului în folderul nostru de resurse.
Începeți cu BootstrapDeoarece avem toate resursele în posesia noastră, trebuie să le includem în proiectarea noastră, pentru aceasta putem crea un fișier HTML și acolo facem incluziunile necesare, putem vedea acest lucru mai detaliat în următorul cod:
Instalarea BootstrapDupă cum putem vedea, singurul lucru pe care l-am făcut a fost să includem trei fișiere, în special două .css și a .js, de asta trebuie să începem să folosim întreaga structură, dacă acum deschidem fișierul cu un browser, vom vedea cum fontul literelor este diferit de ceea ce am vedea în mod normal cu o etichetă H1:
Grila BootstrapPentru a realiza organizarea proiectelor noastre, Bootstrap folosiți o grilă sau grilă, acesta este compus din 12 coloane, deci tot ceea ce vedem pe ecranul nostru trebuie să fie organizat în acest fel, cu aceasta se realizează că pagina poate fi structurată în așa fel încât să putem folosi instrumentele care ni se oferă într-un mod foarte transparent.
Desigur, este un proces de adaptare, dar important este că putem crea coloane care grupează mai multe, precum și atunci când lucrăm cu tabelele HTML că putem crea coloane cu mai multe îmbinări cu proprietatea span. Pentru a crea un site web care utilizează această structură trebuie să avem doar următoarele:
Un div cu clasa container, în interiorul acestui un div cu clasa rândși, în cele din urmă, în interiorul unuia sau mai multor div cu clasa varză, să vedem în următorul cod un exemplu de pagină cu 3 coloane, pentru aceasta fiecare coloană trebuie să grupeze 4 pentru a adăuga un total de 12, ceea ce am explicat este valoarea implicită a Bootstrap.
Coloane în BootstrapRezultă o pagină în care cele trei divsuri interne sunt într-un singur rând împărțit în trei coloane egale, așa cum putem vedea în următoarea imagine:Exemplu de utilizare a coloanelor în bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilitates my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilitates my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilitates my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
MARI
Această structură, deși arată puțin pătrată, este foarte flexibilă, deoarece trebuie să facem doar un fel de joc cu containerele și coloanele lor, pentru a obține rezultatele dorite. Cu aceasta am terminat acest tutorial, am făcut efectiv primii pași cu Bootstrap și acum putem începe să profităm de avantajele sale mai direct pe proiectele sau aplicațiile noastre web.
