Rad s web stranicama zahtijeva mnogo više od poznavanja jezika koje moramo koristiti, postoji niz prekretnica koje moramo ispuniti da bismo razvili proizvod s iznimnim rezultatom. Jedna od ovih prekretnica je dizajn i raspored elemenata koji će biti prikazani na ekranu.
Zamislimo da moramo dizajnirati web stranicu, ako krenemo od početka, moramo uzeti u obzir kako bi trebali izgledati izbornici, tablice, gumbi, stvari jednostavne poput ikona koje ćemo postaviti na neke gumbe za rad itd.
Kao što vidimo, to je naporan posao, pogotovo ako želimo da izgleda optimalno i privlačno, moramo također biti detaljni kako bismo web stranici dali osobni pečat, što ako nismo dizajneri? Ovo je veliko pitanje, postoje programeri koji slijepe oči kada je u pitanju dobar ukus i dizajn, a ove vrste profila spriječene su u stvaranju kvalitetnih web pojavljivanja. Ili što ako imamo dobar ukus, ali imamo malo vremena za dizajn?
Za rješavanje ova dva velika zahtjeva imamo Bootstrap što nije ništa drugo do a CSS okvir to nam omogućuje da odmah dobijemo osnovni aspekt naše stranice bez potrebe za patnjom oko dizajna, ali osim toga pomaže nam i s osnovnim efektima te vrlo posebnim načinom strukturiranja sadržaja koji ćemo predstaviti.
Prednosti bootstrapaTo već znamo Bootstrap to je CSS okvir i to nam pomaže u utvrđivanju osnovnih aspekata naše web stranice, ali osim toga što ima određene prednosti u smislu korištenja, u nastavku ćemo vidjeti neke pozitivne stvari koje nam ona donosi Bootstrap:
1. Ponovna upotrebaS Bootstrap Prema zadanim postavkama imamo mnoge komponente, tako da ih možemo koristiti bez izmjena u različitim dijelovima naše web stranice, čime se smanjuje vrijeme i količina koda koji koristimo. To također pogoduje modularnom razvoju naših aplikacija.
2. DosljednostZahvaljujući činjenici da imamo mnoge komponente izrađene na generički način, kôd je dosljedan, odnosno obrađuje vrlo slične strukture, pa ćemo prilikom čitanja ili održavanja aplikacije već znati kako radi puno jednostavnije.
3. Fleksibilan dizajnMobilni dizajn vrlo je važan i Bootstrap uzimajući to u obzir od početka, imamo fleksibilnost koju naša web stranica prilagođava različitim rezolucijama i izgledima zaslona, što nam štedi mnogo posla od dizajna mobilnih prikaza od nule.
4. ZajednicaDrugi aspekt koji treba uzeti u obzir je dokumentacija, kada koristimo okvir treće strane vrlo je važno imati gdje se obratiti kada sumnjamo i u tom smislu Bootstrap Nema usporedbe, budući da bez ikakvog napora možemo dobiti gotovo svaki odgovor na svoje sumnje.
Nedostaci BootstrapaIako je gotovo sve dobro, moramo razgovarati i o nedostacima ili ne tako dobrim aspektima s kojima se suočavamo kada ovo koristimo CSS okvirPogledajmo u nastavku neke njegove slabosti.
1. Mali izvornikAko ne odvojimo malo vremena za izradu našeg dizajna, možemo ostati isto toliko originalni ako ga upotrijebimo Bootstrap bez više, iako je ovaj okvir za to osmišljen, zbog velikog usvajanja koje je imao, moramo još malo poraditi kako ne bismo izgledali kao kopija kopije.
2. Krivulja učenjaKao i sve, moramo proći krivulju učenja ako želimo izvući maksimum iz toga, problem je u tome što ako želimo preći s osnovnog aspekta na napredni, šok je pomalo jak.
3. Loša kompatibilnost između verzijaKad dođe do promjene verzije, prethodna verzija gubi puno valjanosti i ako je želimo ažurirati to će nas koštati, pogotovo ako smo napravili važne promjene kako bi naše web mjesto izgledalo drugačije.
MontažaKad jednom saznamo što je to Bootstrap, te prednosti i nedostatke korištenja u našim projektima, moramo doći do praktičnog dijela vodiča, sada ćemo naučiti odakle možemo dobiti ovaj okvir i kako ga možemo uključiti u svoj projekt.
Dobivanje BootstrapaPrvo što moramo učiniti je nabaviti potrebne datoteke za uključivanje Bootstrap u našem projektu, zato moramo posjetiti njihovu web stranicu getbootstrap.com i preuzeti potrebne datoteke, ili alternativno koristiti CDN kako bismo izbjegli hosting datoteka na našem poslužitelju i smanjili korištenje naše propusnosti.
Bez obzira na opciju, moramo biti na stranici sličnoj ovoj ako kliknemo gumb za početno preuzimanje prilikom posjete stranici okvira:
POVEĆAJTE
Kako bismo olakšali posao, pretpostavimo da smo preuzeli projekt, on dolazi u komprimiranoj datoteci koju moramo izdvojiti na mjestu koje možemo koristiti i koje bi trebalo biti nešto slično sljedećem:
Kao što vidimo, unutar našeg projekta moraju postojati tri mape, jedna za CSS, drugi za izvore koji se koriste i na kraju jedan za JS potrebno. Uz ovo već imamo na raspolaganju Bootstrap, što nije ništa drugo nego kopiranje projekta u našu mapu s resursima.
Započnite s BootstrapomBudući da imamo sve resurse u posjedu, moramo ih uključiti u svoj dizajn, za to možemo stvoriti datoteku HTML i tamo napravite potrebne inkluzije, to možemo vidjeti detaljnije u sljedećem kodu:
Instaliranje BootstrapaKao što vidimo, jedino što smo učinili je uključivanje tri datoteke, točnije dvije .css i a .js, ovo je ono što nam je potrebno za početak korištenja cijele strukture, ako sada otvorimo datoteku preglednikom, vidjet ćemo kako se font slova razlikuje od onog koji bismo inače vidjeli s oznakom H1:
Mreža BootstrapDa bismo postigli organizaciju naših dizajna, Bootstrap koristiti rešetku ili rešetka, ovo se sastoji od 12 stupaca, tako da sve što vidimo na ekranu mora biti organizirano na ovaj način, time se postiže da stranica može biti strukturirana na takav način da možemo koristiti alate koji su nam ponuđeni na vrlo transparentan način.
Naravno da je to proces prilagodbe, ali važno je da možemo napraviti stupce koji grupiraju nekoliko, kao i kada radimo s tablicama HTML da možemo napraviti stupce s nekoliko spojeva sa svojstvom span. Za izradu web stranice koja koristi ovu strukturu potrebno je imati samo sljedeće:
Div s razredom kontejner, unutar ovog div s klasom red, i na kraju unutar jednog ili više div s klasom kupus, pogledajmo u sljedećem kodu primjer stranice s 3 stupca, za to svaki stupac mora grupirati 4 kako bi dodao ukupno 12, što je ono što smo objasnili zadana vrijednost Bootstrap.
Kolone u BootstrapuRezultat je stranica na kojoj su tri unutarnja odjeljka u jednom retku podijeljena u tri jednaka stupca, kao što možemo vidjeti na sljedećoj slici:Primjer kako koristiti stupce u bootstrapu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam mi olakšava 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. Cijeli 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 samo bivši, zahtjev za efficitur vel, placerat sit amet purus. Cras id semper felis. Budite ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Cijeli eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam mi olakšava 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. Cijeli broj 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 samo bivši, zahtjev za efficitur vel, placerat sit amet purus. Cras id semper felis. Budite ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Cijeli eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam mi olakšava 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. Cijeli broj 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 samo bivši, zahtjev za efficitur vel, placerat sit amet purus. Cras id semper felis. Budite ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Cijeli eu eleifend mauris.
POVEĆAJTE
Ova je struktura, unatoč tome što izgleda pomalo četvrtasto, vrlo fleksibilna jer moramo samo napraviti neku vrstu igre s spremnicima i njihovim stupcima kako bismo postigli željene rezultate. Ovim smo završili ovaj vodič, s kojim smo učinkovito napravili prve korake Bootstrap i sada možemo početi izravnije iskorištavati njegove prednosti na našim projektima ili web aplikacijama.
