✅ Învățarea utilizării Bootstrap Grid

Cuprins

Coloana a
Coloana B
Coloana C
Coloana a
Coloana B
Coloana C

Bootstrap gestionează o structură bazată pe rețea sau cunoscută și sub numele de Grilă, care nu este altceva decât un aspect pe ecran care ne ajută să ne organizăm elementele, este ca și cum am împărți ecranul în rânduri și coloane și l-am gestiona ca o masă mare.
Acest tip de manipulare ne determină să ne gândim la design-uri într-un mod „unic” și în momentul în care avem un pic mai multă experiență folosind Bootstrap Vom începe să vedem totul în acest fel și astfel vom câștiga consistență și rapiditate în modul nostru de lucru.
Primul lucru de știut este că acest design al Grilă ne permite să lucrăm într-un mod în care putem implementa vizualizări mobile în mod nativ, aceasta, desigur, din versiunea 3 a Bootstrap, datorită faptului că această versiune a fost construită având în vedere designul mobil.
În versiunile anterioare ale cadrului, clasele trebuiau specificate direct, astfel încât proiectarea noastră să aibă capacitatea de a se adapta la rezoluțiile dispozitivelor mobile, acum diferitele clase ale Grilă o fac automat.
Pentru a profita de această caracteristică, trebuie să ne gândim de la mic la mare, adică clasele pe care le aplicăm trebuie să fie întotdeauna considerate ca fiind cele mai mici și apoi se va scala la alte rezoluții, adică dacă definim un clasa sm (mic sau mic), automat Bootstrap presupune că aceasta este expresia minimă și că poate fi apoi scalată la md (mediană) sau către lg (mare).
Înainte de a trece la exemple mai practice, trebuie să înțelegem care sunt clasele pe care le putem folosi în coloanele unui Grilă Și, de asemenea, trebuie să știm în ce caz se aplică fiecare, în acest fel atunci când proiectăm site-ul nostru putem lua în considerare cel mai mic dispozitiv pe care dorim să-l atingem.
Cu această abordare putem construi site-uri Mobile Friendly, cât de importante devin astăzi pentru motoarele de căutare și rezultatele lor, ajutându-ne astfel pe lângă crearea de site-uri bune pentru a câștiga câteva puncte în reputația noastră SEO, cu aceeași meserie desigur.
Ecranele telefonuluiEste cel mai mic dispozitiv care, teoretic, poate naviga în designul nostru, deși rezoluțiile telefoanelor au fost treptat convertite în Full HD, acest lucru este în general pentru cel mai înalt nivel, în timp ce gama medie și gama mică, care în teorie este majoritatea mențin rezoluții mult mai mici. Tipul de Grilă care se aplică în acest caz este: col-xs- și se aplică pentru soluții mai mici decât lățimea 768 pixeli.
Ecrane pentru tableteAcestea sunt, în teorie, al doilea cel mai mic dispozitiv, datorită proporției sale mai mari de dimensiuni, tableta oferă o suprafață de navigație mai mare, astfel încât să putem folosi puțin mai mult conținut decât cu ecranul unui telefon, pe lângă faptul că, în general, navigarea pe tablete se face pe orizontală. Clasa care se aplică acestui dispozitiv este col-sm- și se aplică rezoluțiilor cu lățimi mai mari de 768 pixeli și sub 992 pixeli.
Echipamente cu ecran micEle sunt, în general, cele aparținând gamei scăzute de computere desktop și laptopuri, pot fi echipamente cu ecrane mai mici de 15 inci sau care au mai mult de 10 ani de viață, sunt, de asemenea, laptopurile destinate studenților și sectorului cu puterea de cumpărare, acesta este sectorul majoritar. Clasa care se aplică pentru acest caz este col-md- și rezoluțiile limită pentru lățime sunt mai mari decât 992 pixeli și mai puțin de 1200 pixeli.
Echipamente cu ecran mareAici putem descoperi cele mai moderne echipamente, precum și ecrane de peste 15 inci, în această categorie intră în noile echipamente, cum ar fi ultra-portabil, rezoluție 4K sau QHD de asemenea, acolo unde vedem suprafețe mai mari decât 1080p. Prin excluderea lățimilor pe care le vom gestiona aici sunt cele mai mari decât 1200 pixeli, aceasta în timp ce următoarea versiune a Bootstrap probabil.
Din moment ce cunoaștem teoria din spatele sistemului Grilă de Bootstrap, Este bine să începeți să aplicați practic, dar înainte de a vedea codul trebuie să înțelegem încă câteva concepte, trebuie întotdeauna prin convenție și cele mai bune practici să folosim un element cu clasa container, deoarece acest lucru va crea containerul așa cum îl indică numele acestuia pentru a păstra diferitele noastre coloane. Celălalt concept pe care trebuie să îl cunoaștem este că vor exista întotdeauna 12 coloane, astfel încât diferitele combinații pe care le facem trebuie să țină cont de acest număr.
În exemplul următor vom crea un cod pentru un aspect de 3 coloane mari, vom folosi clasa col-md- și din moment ce dorim 3 coloane egale atunci când împărțim 12 la 3 obținem numărul 4, deci aceasta va fi dimensiunea fiecăreia dintre coloanele noastre rezultate.
Să analizăm codul fără alte întrebări:

Grila Bootstrap

Exemplu de utilizare a coloanelor în bootstrap

Coloana a

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.

Coloana B

Coloana C

Structura este foarte simplă, am creat un div cu clasa container, și în interiorul unui div cu clasa rând în cele din urmă în cadrul acestuia din urmă am creat 3 divsuri cu clasa col-md-4 Aceasta este clasa pentru ecrane mici pentru computere neportabile și vedem cum inventăm numărul 4, ceea ce indică faptul că fiecare div al acestora este echivalent cu 4 coloane din Grilă. Să vedem cum arată, când rulăm în browserul nostru:

MARI

Dacă observăm, atunci avem 3 coloane mari, dar ce se întâmplă când reducem dimensiunea la o rezoluție mai mică decât minimul clasei aplicate, deoarece coloanele vor fi pur și simplu stivuite una peste alta așa cum vedem în următoarea imagine:

MARI

Deși acest lucru nu este un lucru rău, uneori nu este comportamentul pe care dorim să îl ia designul nostru, pentru aceasta putem include comportamentele direct cu clase pentru diferitele rezoluții, să vedem în următorul cod cum schimbăm clasele coloane diferite pentru a obține un rezultat diferit:

Grila Bootstrap

Exemplu de utilizare a coloanelor în bootstrap

Coloana a

Coloana B

Coloana C

Acum, dacă observăm în codul nostru totul rămâne același, cu excepția claselor noastre, unde pentru coloanele A și B am adăugat clasa col-sm-6 iar pentru coloana C clasa col-sm-12, aceasta înseamnă că, atunci când rezoluția este redusă, clasele sm vor guverna, așa cum vedem în următoarea imagine:

MARI

Vedem că în aceeași dimensiune a primului exemplu, în loc să fie stivuite, coloanele A și B devin în aceeași regiune, iar coloana C ia un singur rând pentru sine. Aici vedem marea utilitate a Grilă mai ales cu design-uri care sunt axate pe receptivitate și mobilitate.
Cu aceasta terminăm acest tutorial, unde am învățat cum funcționează sistemul de Grilă de BootstrapDesigur, acesta este doar vârful aisbergului, există mult mai mult conținut pe care îl putem explora în alte tutoriale, dar cu aceste cunoștințe de bază putem începe să vedem cum să ne plasăm desenele într-un mod mai logic și cu mai puțin efort datorită cadrul.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv