Un ghid pentru începători pentru construirea unui site web receptiv cu Bootstrap - Partea 1

Ultima actualizare pe 5 iunie 2019

Acest articol este menit să educe dezvoltatorii web cu privire la utilizarea principiilor de bază ale cadrului Bootstrap pentru a crea site-uri web receptive rapid și eficient. Acest lucru reduce costul de producție și permite companiilor să își împuternicească dezvoltatorii să gestioneze și să construiască site-uri web și pagini cu ușurință. Voi trece prin procesul de descărcare a cadrului Bootstrap și avantajele utilizării acestui cadru pentru eforturile dvs. de dezvoltare web.

Ce este Bootstrap?

Potrivit site-ului web oficial Bootstrap (getbootstrap.com), „Bootstrap este cel mai popular cadru HTML, CSS și JavaScript pentru un proiect receptiv și mobil primul de pe web”. În termeni mai simpli, Bootstrap este un cadru excepțional de simplu pentru a ajuta dezvoltarea web front-end mai rapidă, precum și pentru a atrage dezvoltatorii cu diferite niveluri de calificare.

De ce să folosiți Bootstrap?

Potențialul de a proiecta site-uri web pentru diverse medii, inclusiv ecrane mari, afișaje obișnuite, telefoane și tablete, face ca Bootstrap să fie incredibil de atrăgător și o alegere inteligentă pentru producerea de conținut web. Un cadru precum Bootstrap oferă funcționalități generice care pot fi modificate cu ușurință pentru a optimiza site-ul web pentru o varietate de funcții și capacitate de răspuns care nu necesită codificare. Este pe scurt, una dintre cele mai simple moduri de a construi un site web și de a avea în continuare capacitatea de personalizare, spre deosebire de un site WordPress.

Cum să începeți

Pentru a începe să utilizați Bootstrap, trebuie să vizitați site-ul web oficial Bootstrap (http://getbootstrap.com/). Bootstrap este un proiect open source și este găzduit, dezvoltat și menținut pe GitHub; acest lucru permite utilizatorilor să aibă acces la codul sursă și să înțeleagă întreaga sferă a cadrului ca instrument pentru construirea de site-uri web.

Există trei moduri de a descărca versiunea actuală de Bootstrap (v3.3.6): puteți descărca o versiune conformă de Bootstrap, puteți descărca codul sursă Bootstrap și puteți porta cadrul Bootstrap de la Less la Sass. În acest caz, dacă sunteți începător, vă sugerez să descărcați versiunea de Bootstrap conformă. Dacă doriți să integrați cadrul Bootstrap în proiecte Rails, Compass sau Sass, atunci ar trebui să portați descărcarea de la Less la Sass.

După ce descărcați fișierul Boostrap, ar trebui să dezarhivați folderul comprimat pentru a vedea structura cadrului Bootstrap respectat. Uitați-vă mai jos pentru a vedea structura fișierului:

Acum puteți să plasați aceste fișiere în sistemul de fișiere al oricărui proiect web la care lucrați și să începeți să lucrați cu Bootstrap pentru a proiecta și construi proiectul dorit. Pentru mai multe informații despre funcționalitatea Bootstrap, pe care o vom analiza în partea 2 a acestei postări, nu ezitați să vizitați site-ul web getboostrap.com pentru a vedea componentele, caracteristicile CSS și funcțiile JavaScript care sunt accesibile cu framework.

Design receptiv

Designul receptiv este una dintre caracteristicile distinctive ale cadrului Bootstrap; capacitatea de a dezvolta receptiv cu Bootstrap permite dezvoltatorilor să poată dezvolta un singur site web care poate fi formatat corespunzător pe toate platformele de vizualizare. De multe ori, un site web poate fi proiectat bine, iar experiența utilizatorului este optimă doar pe o singură platformă specifică sau dimensiunea ecranului. Bootstrap face o treabă uimitoare pentru a combate aceste probleme, permițând dezvoltatorilor să atribuie anumite coloane ale paginii web să aibă anumite dimensiuni atunci când sunt citite pe un ecran mai mic. Există patru tipuri de dispozitive pe care Bootstrap le ține cont atunci când creează site-uri web receptive:

• Dispozitive foarte mici (telefoane inteligente <768px)
• Dispozitive mici (tablete >= 768 px)
• Dispozitive medii ( desktop >= 992 px)
• Dispozitive mari ( desktop >= 1200 px)

Dezvoltatorul poate adăuga etichete la aceste clase de mai sus pentru a seta un anumit conținut web să se micșoreze, să se extindă, să ascundă sau să fie vizibil pe anumite platforme. Acest lucru este extrem de util pentru simplificarea procesului de construire a aspectului site-ului.

Sistem grilă

Bootstrap are un sistem de grilă, care este caracteristica principală care permite ca cadrul să fie utilizat pentru a proiecta site-uri web receptive. Toate rândurile din Bootstrap trebuie plasate într-o clasă container, iar apoi rândurile ulterioare pot fi definite ca anumite dimensiuni.

Iată un exemplu de notație pentru sistemul de grilă:

• Clasa de rând predefinită produce un rând
• În acel rând, a doua clasă specifică „col-md-6”
• Aceasta înseamnă că clasa produce o coloană care se întinde pe 6 coloane pe pagina web
• „md” specifică că acest lucru se va întâmpla numai pe dispozitive medii sau desktop-uri care sunt mai mici sau egale cu 768 px.
• Clasa „offset” înseamnă că acele coloane vor fi lăsate necompletate. În acest caz, offset-ul este de 3, așa că trei coloane vor fi lăsate cu spațiu liber pentru a completa o parte din conținut.
  Acest sistem de grilă permite dezvoltatorilor să definească rapid secțiuni de conținut și să aibă o distanță adecvată între conținut pentru a avea un design curat și receptiv.

Provocări cu Bootstrap

Dimensiunile fișierelor JavaScript și CSS sunt mari atunci când descărcați direct toate fișierele Bootstrap. Acest lucru poate duce la unele provocări atunci când creați o pagină rapidă. Acest lucru se datorează faptului că toate fișierele din fișierele Bootstrap nu sunt utilizate complet și acest lucru poate însemna că descărcarea datelor inutile poate fi o problemă. Acest lucru poate afecta experiența utilizatorului, așa că nu ezitați să verificați acest lucru mai în profunzime vizitând postarea, Cum să utilizați elementele de bază Bootstrap pentru a îmbunătăți experiența utilizatorului (https://moz.com/ugc/how-to-use-bootstrap- elemente de bază pentru a îmbunătăți experiența utilizatorului).

Sper că veți încerca cu toții Bootstrap, deoarece este un cadru fantastic pentru a construi design-uri web receptive și curate. Rămâneți pe fază pentru următoarea postare din serie care abordează mai multe concepte de început despre Bootstrap.

Autor: Esme Vazquez, Junior Web Developer

Un creator, artist, jucător, programator, dezvoltator web și blogger; Esme este creatorul recentei publicații de blog Indiellect pe site-ul de blog de management de conținut, Medium. Experiența ei actuală constă în dezvoltarea web și dezvoltarea jocurilor; ea lucrează în prezent și este pregătită în SEO la That! Companie din Leesburg, FL ca dezvoltator web junior. Ea aspiră să creeze jocuri video în viitor care să înfățișeze frumusețea umanității. Dacă aveți întrebări, nu ezitați să o scrieți pe Twitter la @EsmeVazquez18 și/sau să o adăugați pe LinkedIn.