Upotreba Bootstrap-a za brzi razvoj veb-prezentacija

Share

Od pojave veba (WWW) prošlo je nešto manje od 25 godina. Za većinu „običnih“ korisnika pojam veba i interneta postao je sinonim. Od prvih html stranica u CERN-u do danas desile su se mnoge promene. U međuvremenu HTML-u su se pridružili CSS i JavaScript, a razvojom ovih tehnologija razvijali su se i veb-pregledači Netscape, Opera, IE, Firefox, Chrome, i drugi.

U poslednjih nekoliko godina situacija je dodatno zakomplikovana pojavom laptopova, tableta i mobilnih uređaja. Istovremeno se razvijao i internet koji je postao pristupačan velikom broju korisnika.
Zahvaljujući ovim promenama računari su postali „vebcentrični“, veb-pregledač (web browser) postao je program koji najviše koristimo.
Spektar dijagonale monitora na kojima se prikazuje ovaj sadržaj trenutno se nalazi u opsegu od 3 do 27 inča.

Posledice ovog osetili su i krajnji proizvođači veb-sadržaja – programeri. Jedan od glavnih zahteva koji se postavljaju je da sav sadržaj bude „lepo“ prikazan na svim pregledačima, a od skora da tako bude i na ostalim uređajima, pre svega na tabletima i mobilnim. Sve to uz odgovarajući vizuelni ugođaj.
I naravno, da to bude u što kraćem mogućem roku.

Postavlja se pitanje kako ubrzati razvoj a postići zadovoljavajući kvalitet?!

Jedno od mogućih rešenja je Bootstrap.

Twitter Bootstrap kako se često, pogrešno, naziva ovaj veb-okvir (web framework) nastao je 2010. unutar kompanije Twitter za „lične“ potrebe. Vremenom je stekao popularnost u okviru same kompanije.
Sledeći važan korak bilo je objavljivanje Bootstrap-a na Github-u kao projekta otvorenog koda.
Bootstrap je trenutno najpopularniji projekat na Github-u.

Najvažnija karakteristika Bootstrap-a je postojanje podrške za sve veće veb-pregledače, kako na računarima tako i na mobilnim platformama. Sledeća važna karakteristika je prilagodljiv dizajn (responsive design). Od verzije 3.0 Bootsrapima podržavaju „Mobile first“ princip razvoja. U prevodu, prvo se radi razvoj za mobilne uređaje, a zatim i za veće ekrane.

Primer

Kao primer brzog razvoja uz pomoć Bootstrap-a, a za potrebe ovog blog posta, tokom jednog popodneva nastao je i sledeći sajt: djm-rs.github.io. Pokušao sam da napravim kopiju sajta ITkonekt. Kao osnovu za „plagijat“ it-konekta poslužio sam se ovom temom. Sav kod koji sam napisao možete da pronađete na mom github nalogu. Proces izrade se stastojao od toga da sam na „podlogu“ dodavao komponente koje su mi bile potrebne i sklanjao nepotrebno. Važna napomena: Ono što možete videti na kopiji sajta sadrži samo frontend, ali ne i bekend deo. Drugim rečima ne možete ostaviti komentar, niti kreirati novi nalog.

Delovi Bootstrapa

Bootstrap predstavlja veb-okvir u kome se izdvajaju tri važne celine: CSS, veb-komponente i Javascript.

– CSS

U ovom delu se nalazi CSS za sve html5 tagove kao i CSS za grid sistem.
Bootstrap-ov css se odnosi na sve standardne html5 tagove. Tako da ako dodate Bootstrap u svoj projekat, bez navođenja ijedne css klase vaša veb-stranica biće ulepšana Bootsrap-ovim css-om.

Jedan od važnijih delova Bootstrap-a je grid sistem. U Bootstrapu stranica se posmatra kao niz redova (css klasa .row), a svaki red se deli u dvanaest kolona. Pri tome je moguće da deo sadržaja zauzme više od jedne kolone. Na primer da red podelimo u dva dela levi i desni tako da levi sadrži osam kolona, a desni četiri kolone. Ovo postižemo pomoću klasa col-*-**. Prilikom pisanja koda * zamenjuje se jednom od sledeće četiri vrednosti: xs, sm, md ili lg i ove vrednosti predstavljaju veličine ekrana za koje se prikazuje. xs se koristi za mobilne uređaje (širine manji od 768px), sm za tablete (širine veće od 768px a manje od 992px), md za računare (širine veće od 992px a manje od 1200px), i lg za velike ekrane (širine veće od 1200px). ** zamenjujemo brojem od jedan do dvanaest. Prilikom deljenja redova važno je da suma bude jednaka dvanaest. Za gornji primer podele 8+4 za veliki ekrane koristili bismo css klase .col-lg-8 i .col-lg-4. Prilikom podele na kolone moguće je kombinovati broj kolona koje određeni sadržaj zauzima zavisno od veličine ekrana na kojem će biti prkazan. Na primer da se koristi col-sm-6 col-md-4.

– Komponente

U ovom delu se nalaze css-ovi za najčešće korišćene komponente koje nisu sastavni deo html-a. Između ostalog to su padajući meniji, grupisana dugmad, grupisana ulazna polja, paginacija itd. Tu su još i glyphicons, biblioteka ikonica prikazana kao fontovi, tj. kao vektorska grafika.

– JavaScript

Ovde se nalaze delovi javascript koda koji se mogu koristiti da bi se postigla dodatna dinamičnost na stranici, a da mi ne pišemo dodatni javascript kod. Između ostalog ovde se nalaze tabovi, modali, padajući meni, itd. Za korišćenje ovih delova javascript koda potrebna je biblioteka jQuery.

– Kako dodati Bootstrap u projekat?

Jedan od načina dodavanja Bootstrap-a je da skinemo sve potrebne fajlove sa sajta, raspakujemo, a zatim ih dodamo u svoj projekat.
Drugi način je dodavanje je preko odgovarajućih CDN-ova.

Bootstrap ili ne?

Bootstrap predstavlja odlično rešenje ukoliko treba brzo da razvijemo neki sajt, razvijemo prototip ili da koristimo samo Bootstrap-ov grid sistem. U svakom slučaju, ukoliko poznajemo Bootstrap to ne znači da ne treba da poznajemo CSS i/ili JavaScript – već obrnuto. Bootstrap samo nudi odličan način da uštedimo naše vreme i ubrzamo razvoj, a da pri tome postignemo zadovoljavajući kvalitet napravljenog.
Postoji i druga grupa koja smatra da ne treba da se koristi Bootstrap zbog glomaznosti, primene anti-paterna, i na kraju naš sadžaj biće isti kao i svi ostali koji koriste samo Bootstrap.

U svakom slučaju treba odrediti šta nam je potrebno i na osnovu toga odlučiti da li koristiti ili ne Bootstrap.

Bootstrap ekosistem

Od pojave Bootstrap-a pa do danas stvorio se jedan mali „ekosistem“ oko ovog projekta. Ovaj ekosistem čine nadogradnje na Bootstrap (veb-komponente koje ne postoje u orginalnom projektu), integracija sa Bootsrap-om, teme, veb-okviri (tempate) i alati za razvoj aplikacija za koje se koristi Bootsrap. Primeri nadogradnje koje bih naveo su Font Awesome, Jasny Bootstrap, Fuel UX, Social Buttons

Na ovome linku može se naći spisak resursa vezanih za Bootstrap.

Na ovom sajtu možete pronaći delove koda (code snippet) napisane u Bootstrapu.

Teme i veb-okviri (template) predstavljaju gotova rešenja koja možete doraditi po vašoj potrebi. Pored besplatnih rešenja potoje i ona koja se plaćaju.

Od alata bih naveo Pingedno koji je potrebno skinuti kod sebe na računar i instalirati, a koji predstavja prevuci-i-pusti (drag-and-drop) rešenje za pravljenje stranice slaganjem Bootstrap komponenti. Layout koji je onlajn, tj. nije potrebno skinuti kod sebe na računar već možemo iz veb-pregledača. Pored ovih rešenja koja su besplatna postoje i ona koja se plaćaju.

Ostali veb-okviri

Najpoznatija alternativa Bootstrap-u je Foundation. Od veb-okvira koji su vredni pažnje su Ink i Pure.

Share

Prijavi se da prvi dobijaš nove blogove i vesti.

Ostavite odgovor

Đorđe Mijatović

Java Developer @ eFront
mm

Od 2010. u IT industriji, a od decembra 2014. radi u eFrontu kao Java developer. Završio ETF, Računarska tehnika i informatika. Gaji simpatije prema zajednici otvorenog i slobodnog koda. Ljubitelj Linux-a (Ubuntu) i vi/vim-a.

Prijavi se da prvi dobijaš nove blogove i vesti.

Kategorije