BOOTSTRAP
Prilagodljivi web dizajn

Šta ćemo naučiti?

Na ovom času ćemo naučiti kako da kreiramo prilagodljivi korisnički interfejs na webu koristeći HTML5 i CSS3 tehnoologije kao i JavaScript. Pored pisanja pravila za prilagodljivi dizajn takođe ćemo proći kroz postojeće okvire za prilagodljivi dizajn.

Zašto ovo učimo?

Prilagodljiv web dizajn je zadnjih godina postao jako popularan zbog povećanog broja mobilnih/tablet uređaja na kojima je veličina ekrana mala. Na početku problem je bila rezolucija koja je bila mnogo manja nego na samim računarima i laptopovima ali danas je problem samo veličina samog ekrana jer rezolucije telefona danas dostižu pa čak i prestižu rezolucije monitora. Naprimer LG G3 telefon ima rezoluciju od 1440 x 2560 ali je problem kako iskoristiti tu rezoluciju na malom ekranu na najbolji način.

Osnove prilagodljivog web dizajna

Korišćenje mobilnih uređaja u svetu je sve veće i veće iz godine u godinu ali nažalost većina web aplikacija i sajtova nisu optimizovani za ove uređaje. Mobilni uređaji imaju različite rezolucije, veličine ekrana kao i gustinu piksela. Danas web koriste tableti, telefoni, fableti, konzole pa i sami televizori. Svaki od ovih uređaja je karakterističan za sebe. Pravljenje posebne aplikacije za ove urađaje je jako dug proces i često ne isplativ pa je prilagodljiv web dizajn postao jako popularno rešenje za ovaj problem.

Slika 1: Primer prilagodljive web alikacije za vremensku prognozu na više uređaja

Postoje više načina za samu implementaciju prilagodljivog web dizajna. U početku za prilagdoljiv web dizajn korišćen je samo JavaScript. JavaScript je korišćen da menja CSS atribute pri promeni veličine prozora i pri samom paljenju web aplikacije. Dolaskom CSS-a 3 pojavilo se media pravilo. U sledećem primeru boja pozadine ekrana će biti svetlo zelena ukoliko je veća od 300 piksela a svetlo plava ukoliko je manja ili jednaka 300 piksela.

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightgreen;

}

@media screen and (max-width: 300px) {

body {

background-color: lightblue;

}

</style>

</head>

<body>

<p>Smanjujte i povećavajte prozor. Kada širina dokumenta bude veća od 300 piksela pozadina će biti svetlo zelena dok kada bude 300px i manja biće svetlo plava </p>

</body>

</html>

Korišćenjem jQuery JavaScript biblioteke možemo uraditi sličnu stvar:

if ($(window).width() <= 300) {

$(„body“).css(„background-color“,“lightblue“);
}

else {

$(„body“).css(„background-color“,“lightgreen“);

}

Naravno ovaj kod mora u tom slučaju biti pokrenut na dve akcije. Prva akcija bi bila kad se sam dokument učita prvi put:

$(document).ready(function(){

if ($(window).width() <= 300) {

$(„body“).css(„background-color“,“lightblue“);

}

else {

$(„body“).css(„background-color“,“lightgreen“);

}

});

I potrebno je da kada korisnik promeni veličinu prozora pozovemo ovu proveru:

$( window ).resize(function() {

if ($(window).width() <= 300) {

$(„body“).css(„background-color“,“lightblue“);

}

else {

$(„body“).css(„background-color“,“lightgreen“);

}

});

JQuery biblioteku možete preuzeti sa sledećeg linka: http://jquery.com/download/

Naravno ovo se može uraditi i u čistom JavaScript-u bez dodatnih biblioteka ali je mnogo jednostavnije koristiti JQuery. Kod embedded sistema često je jako skupo učitavati celu JQuery biblioteku samo za rasponsive jer imaju slabu procesorsku snagu i memoriju pa je nekad potrebno da ovo realizujemo i kroz cist JavaScript.

<html>

<head>

window.onresize = function(event) {

if(window.innerWidth <= 300){

document.body.style.background = ‘lightblue’;

} else{

document.body.style.background = ‘lightgreen’;

}

};

window.onload = function(e){

if(window.innerWidth <= 300){

document.body.style.background = ‘lightblue’;

} else{

document.body.style.background = ‘lightgreen’;

}

};

</script>

</head>

<body>

</body>

</html>

Razlika između korišćenja čistog JavaScript-a i JQuery-ja u ovom slučaju je čisto sintaksna. JQuery ima dosta jednostavniju sintaksu i lakši je za upotrebu od čistog JavaScript-a. Takođe u JQuery-ju je ugrađena kompitabilnost sa većinom web čitača tako da nemate potrebe da zovete više puta istu funkciju sa drugim nazivom kako bi kod radio na svim web čitačima.

Kao što je JQuery dodatna biblioteka koja omogućava lakše korišćenje JavaScript-a tako kod CSS-a postoje okviri koji omogućavaju lakše pisanje prilagdoljivih web stranica. Jedan od najpopularnijih okvira za CSS je Bootstrap.

Bootstrap

Bootstrap je najpopularniji HTML, CSS i JavaScript okvir (engl. Framework). Bootstrap je napravila kompanija Twitter i jako je brzo postao popularan među web dizajnerima i programerima jer omogućava pravljenje web stranica koje su prilagodljive svakom uređaju za jako kratko vreme.

Slika 2: Primer bootstrap teme.

Korišćenje Bootstrap okvira

Kako bi koristili Bootstrap prvo u head moramo dodati CSS i JavaScript fajlove koje Bootstrap koristi:

Pošto stranice u Bootstrap-u trebaju da budu mobilno kompatibilne moramo dodati meta tag koji nam omogućava prilagođavanje širini ekrana:

U telu HTML-a potreban nam je div kontejner za sam sajt. U bootstrap-u ovaj kontejner može biti klase container-fluid i container.

container-fuild omogućava sajt pune širine dok container ima fiksnu maksimalnu širinu.

Bootsrap Grid sistem

Bootsrapov Grid sistem podržava 12 kolona.

Ukoliko je kolona veličine 12 to znači da ona zauzima punu širinu ekrana. Ukoliko je ona 6 znači da uzima pola itd..

Slika 3: Bootstrap grid sistem

Grid sistem Bootstrap-a podžava četiri klase (xs, sm, md, lg)

XS – je grid klasa za telefone
SM – je grid klasa za tablet uređaje
MD – je grid klasa za računare
LG – je grid klasa za računare sa visokom rezolucijom

Primer 1: Ćao svete u Bootstrap-u

<!DOCTYPE html>

<head>

<title>Bootstrap Primer</title>

</head>

<body>

<h1>Ćao svete!</h1>

<p>Menjajte velicinu prozora kako bi videli efekat Bootstrapa.</p>

</div>

</body>

</html>

Primer 2: Korišćenje Jumbotron klase.

U Bootstrap-u postoji klasa za veliki naslov koji treba da stoji ispod menija a to je jumbotron klasa.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Moja prva responsive stranica</h1>

<p>Menjajte velicinu prozora kako bi videli efekat Bootstrapa.</p>

</div>

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>

</div>

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>

</div>

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>

</div>

</body>

</html>

Rezultat korišćenja ovo koda je:

Slika 4: Stranica sa 3 kolone i jumbotron naslovom.

Slika 5: Strana na mobilnom uređaju

Bootstrap navigacioni meni

Kako bi dodali meni na našu Bootstrap temu potrebno je da dodamo nav tag sa klasom navbar navbar-default. Pored ovoga navigacioni meni mora da ima header, brend kao i navbar nav koji predstavlja linkove u samom meniju.

<a class=“navbar-brand“ href=“#“>Ime web aplikacije</a>

</div>

<div>

</ul>

</div>

</nav>

Ukoliko ovaj kod dodamo na prethodni primer dobićemo sledeće:

Slika 6: Web sajt sa navigacionim menijem u Bootstrapu

Kada otvorimo ovu aplikaciju na mobilnom telefonu dobijamo sledeći prikaz:

Slika 7: Prikaz na mobilnom telefonu

Kako bi ova stranica bila još više prilagodljiva telefonu treba omogućiti sakrivanje i prikazivanje menija. Takođe možda želimo da meni bude crne boje i da ima stavke i na desnoj strani. Ovo možemo uraditi korišćenjem stila navbar-inverse umesto default kao i korišćen navbar-right klase. Kako bi se meni spuštao i podizao klikom na dugme potrebno je koristiti dugme sa navbar-toggle klasom.

</button>

<a class=“navbar-brand“ href=“#“>WebSiteName</a>

</div>

</ul>

<li><a href=“#“><span class=“glyphicon glyphicon-log-in“></span> Login</a></li>

</ul>

</div>

</nav>

Glifikoni su ikonice koje možete koristiti u okviru Bootstrap-a. Sve glifikone možete pogledati na adresi: http://getbootstrap.com/components/

Slika 8: Izgled naše aplikacije na Desktop računaru.

Slika 9: Izgled aplikacije na mobilnom uređaju

Bootstrap forme

Kako bi se napravila forma prilagodljivog dizajna u Bootstrapu potrebno je koristiti njegove klase. Svaki input element mora da se nalazi unutar form-group klase. Kada se pravi label potrebno je da postoji for atribut u kome treba upisati ID input polja za koje je label vezan. Svaka forma mora imati rolu form.

<h2>Prijava</h2>

<label for=“email“>Email:</label>

</div>

<label for=“pwd“>Password:</label>

</div>

<label><input type=“checkbox“> Zapamti me</label>

</div>

<button type=“submit“ class=“btn btn-default“>Posalji</button>

</form>

</div>

Slika 10: Izgled forme za prijavu na Desktop računaru

Slika 11: Izgled forme za prijavu na mobilnom uređaju

Bootstrap dugmići

Bootstrap daje više klasa dugmića koji različito izgledaju. A to su btn-danger, btn-primary, btn-warning, btn-success, btn-info i btn-default.

Slika 12: Tipovi Bootstrap dugmića

Ukoliko zamenimo u formi za prijavu klasu dugmeta iz btn-default u btn-success postaće zeleno.

Slika 13: Izgled forme za prijavu na mobilnom uređaju

Ukoliko želimo da dugme ima padajuću listu to je moguće koristeći dugme sa klasom dropdown-toggle. Klasa caret predstavlja malu strelicu ka dole.

Primer:

<button type=“button“ class=“btn btn-success“>Posalji</button>

<span class=“sr-only“>Opcije</span>

</button>

<li><a href=“#“>Posšalji</a></li>

<li><a href=“#“>Pošalji mailom</a></li>

<li><a href=“#“>Pošalji whatsupom</a></li>

<li><a href=“#“>Obrrši poruku</a></li>

</ul>

</div>

Slika 14: Izgled dugmeta sa padajućom listom

Bootstrap tabele

Kako bi dobili lepo dizajniranu bootstrap tabelu sve što je potrebno jeste da na običnu HTML tabelu dodamo klasu table.

<!DOCTYPE html>

<head>

<title>Bootstrap Primer</title>

</head>

<body>

<h2>Normalna tabela</h2>

<p>Table klasa se koristi u Bootstrap-u za dobijanje Bootstrap tabele</p>

<thead>

<tr>

<th>Prezime</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Mitar</td>

<td>Miric</td>

<td>mitar@primer.com</td>

</tr>

<tr>

<td>Jelena</td>

<td>Rozga</td>

<td>jelena@primer.com</td>

</tr>

<tr>

<td>Severina</td>

<td>Vucetic</td>

<td>seve@primer.com</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Slika 15: Bootstrap normalna tabela

Ukoliko želite da tabela ima pune ivice potrebno je da stavite klasu table table-bordered.

Slika 16: Bootstrap tabela sa obeleženim ivicama

Ukoliko želite da tabela ima svaki drugi red obeležen drugom bojom potrebno je da koristite klasu table table-striped.

Slika 17: Bootstrap tabela sa svakim drugim redom različite boje

Slika 18: Tabela na mobilnom uređaju

Obaveštenja kod Bootstrap-a

Bootstrap ima predefinisane kutije obaveštenja za web aplikacije. Tako naprimer ukoliko korisnik nije uneo validan mejl možemo mu prikazati poruku sa upozorenjem da mejl nije validan u ovoj kutiji.

Slika 19: Kutija obaveštenja

<span class=“sr-only“>Greška:</span>

Unesite validnu email adresu

</div>

Pored klase danger za prikaz poruke koja prikazuje crvenu poruku može se koristiti još i success kao i warning.

Slika 20: Kutija obaveštenja

Slika 21: Kutija obaveštenja

Straničenje (Pagination) kod Bootstrap-a

Cesto je potrebno da na prikazu liste određenih stvari imamo više stranica. Bootstrap ima pravila i za dugmiće za straničenje.

Potrebno je da napravimo ui element sa klasom pagination i li elemente za stranice.

<nav>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

Slika 22: Straničenje u Bootstrapu

Ukoliko želimo da zabranimo klik na određeni element u straničenju koristićemo klasu disabled dok ako želimo da neki element označimo kao trenutan koristimo klasu active.

<nav>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

Slika 23: Straničenje sa obeleženim elementom

BOOTSTRAP
Prilagodljivi web dizajn

Šta ćemo naučiti?

Zašto ovo učimo?

Osnove prilagodljivog web dizajna

Bootstrap

Korišćenje Bootstrap okvira

Bootsrap Grid sistem

Primer 1: Ćao svete u Bootstrap-u

Primer 2: Korišćenje Jumbotron klase.

Bootstrap navigacioni meni

Bootstrap forme

Bootstrap dugmići

Bootstrap tabele

Obaveštenja kod Bootstrap-a

Straničenje (Pagination) kod Bootstrap-a

Beograd

Niš

Upis

O Univerzitetu

BOOTSTRAP Prilagodljivi web dizajn

Šta ćemo naučiti?

Zašto ovo učimo?

Osnove prilagodljivog web dizajna

Bootstrap

Korišćenje Bootstrap okvira

Bootsrap Grid sistem

Primer 1: Ćao svete u Bootstrap-u

Primer 2: Korišćenje Jumbotron klase.

Bootstrap navigacioni meni

Bootstrap forme

Bootstrap dugmići

Bootstrap tabele

Obaveštenja kod Bootstrap-a

Straničenje (Pagination) kod Bootstrap-a

Beograd

Niš

Upis

O Univerzitetu

BOOTSTRAP
Prilagodljivi web dizajn