Kako napisati aplikaciju prilagođenu mobilnim uređajima koristeći JQuery & Bootstrap
U 1. dijelu ove serije, postavili smo osnovni HTML 5 projekat koristeći Netbeans kao naš IDE, a također smo predstavili nekoliko elemenata koji su dodati u ovu novu specifikaciju jezika.
U nekoliko riječi, možete zamisliti jQuery kao Javascript biblioteku za više pretraživača i više platformi koja može uvelike pojednostaviti skriptiranje na strani klijenta u HTML stranicama. S druge strane, Bootstrap se može opisati kao kompletan okvir koji integrira HTML, CSS i Javascript alate za kreiranje web stranica koje su prilagođene mobilnim uređajima i koje reaguju.
U ovom članku ćemo vas upoznati sa jQuery i Bootstrap, dva neprocjenjiva uslužna programa za lakše pisanje HTML 5 koda. I jQuery i Bootstrap su licencirani pod licencama MIT i Apache 2.0, koje su kompatibilne sa GPL-om i stoga su besplatni softver.
Imajte na umu da osnovni HTML, CSS i Javascript koncepti nisu pokriveni ni u jednom članku iz ove serije. Ako smatrate da morate prvo da se upoznate sa ovim temama prije nego što nastavite, toplo preporučujem vodič za HTML 5 u W3Schools.
Uključivanje jQueryja i Bootstrapa u naš projekat
Da biste preuzeli jQuery, idite na web stranicu projekta na http://jquery.com i kliknite na dugme koje prikazuje obavijest za najnoviju stabilnu verziju.
Ići ćemo na ovu drugu opciju u ovom vodiču. NEMOJTE još kliknuti na link za preuzimanje. Primijetit ćete da možete preuzeti ili komprimiranu .min.js ili nekomprimiranu .js verziju jQueryja.
Prvi je namijenjen posebno za web stranice i pomaže u smanjenju vremena učitavanja stranica (i samim tim će Google bolje rangirati vašu stranicu), dok je drugi uglavnom usmjeren na programere za razvojne svrhe.
Radi sažetosti i lakoće upotrebe, preuzet ćemo komprimiranu (također poznatu kao minimiziranu) verziju u folder scripts unutar strukture naše web stranice.
cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/
wget https://code.jquery.com/jquery-3.6.0.min.js
Sada je vrijeme da našem projektu dodamo Bootstrap. Idite na http://getbootstrap.com i kliknite na Download Bootstrap. Na sljedećoj stranici kliknite na označenu opciju kao što je navedeno u nastavku da preuzmete minimizirane komponente, spremne za korištenje, u zip datoteci:
Kada se preuzimanje završi, idite u mapu Preuzimanja, raspakirajte datoteku i kopirajte označene datoteke u naznačene direktorije unutar vašeg projekta:
cd ~/Downloads
unzip -a bootstrap-5.1.3-dist.zip
cd bootstrap-5.1.3-dist/
Sada kopirajte CSS i JS datoteke u odgovarajuće mape u strukturi projekta.
cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Ako sada proširite strukturu svoje stranice u Netbeans-u, ona bi trebala izgledati ovako:
Dodavanje referenci
To svakako izgleda dobro, ali još uvijek nismo rekli našoj datoteci index.html da koristi bilo koju od tih datoteka. Radi jednostavnosti, prvo ćemo zamijeniti sadržaj te datoteke barebones html datotekom:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery and Bootstrap</title>
</head>
<body>
<!-- // Your code will appear here. -->
</body>
</html>
Zatim samo prevucite i ispustite svaku datoteku iz odjeljka navigatora projekta u kod, unutar oznaka , kao što možete vidjeti u sljedećem screencastu. Uvjerite se da se referenca na jQuery pojavljuje prije reference na Bootstrap jer potonji ovisi o prvom:
To je to – dodali ste reference za jQuery i Bootstrap i sada možete početi pisati kod.
Pisanje vašeg prvog responsive koda
Hajde sada da dodamo traku za navigaciju i postavimo je na vrh naše stranice. Slobodno uključite 4-5 veze sa lažnim tekstom i nemojte ga za sada povezivati ni sa jednim dokumentom – samo umetnite sljedeći isječak koda u tijelo dokumenta.
Ne zaboravite da provedete neko vrijeme upoznajući se sa funkcijom automatskog dovršavanja u Netbeansu, koja će vam pokazati klase koje je Bootstrap učinio dostupnim dok počnete kucati.
U srcu isječka koda ispod je klasa kontejner Bootstrap, koja se koristi za postavljanje sadržaja unutar horizontalnog kontejnera koji će automatski promijeniti veličinu ovisno o veličini ekrana na kojem se gleda. Ništa manje važna je klasa kontejner-fluid, koja će osigurati da sadržaj unutar njega zauzme cijelu širinu ekrana.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Još jedna karakteristična karakteristika Bootstrapa je da eliminiše potrebu za tabelama u HTML kodu. Umjesto toga, koristi mrežni sistem za raspored sadržaja i čini ga da pravilno izgleda i na velikim i na malim uređajima (od telefona pa sve do velikih desktop ili laptop ekrana).
U Bootstrap-ovom grid sistemu, izgled ekrana je podijeljen u 12 kolona:
Tipično podešavanje sastoji se od upotrebe rasporeda 12 kolona podijeljenih u 3 grupe od po 4 kolone, kako slijedi:
Da biste naznačili ovu činjenicu u kodu, i da bi se ona tako prikazala počevši od uređaja srednje veličine (kao što su laptopi) i iznad, dodajte sljedeći kod ispod završne oznake :
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Sigurno ste primijetili da klase stupaca u Bootstrap mreži ukazuju na početni izgled za određenu veličinu uređaja i više, jer md u ovom primjeru označava srednji (koji također pokriva lg > ili velikih uređaja).
Za manje uređaje (sm i xs), sadržaj div se slaže i pojavljuje jedan iznad drugog.
U sljedećem screencastu možete vidjeti kako bi vaša stranica do sada trebala izgledati. Imajte na umu da možete promijeniti veličinu prozora vašeg pretraživača kako biste simulirali različite veličine ekrana nakon pokretanja projekta pomoću dugmeta Pokreni projekat, kao što smo naučili u 1. dijelu.
Sažetak
Čestitamo! Mora da ste do sada napisali jednostavnu, ali funkcionalnu i prilagodljivu stranicu. Ne zaboravite provjeriti web stranicu Bootstrap kako biste se bolje upoznali s gotovo neograničenom funkcionalnošću ovog okvira.
Kao i uvijek, u slučaju da imate pitanje ili komentar, slobodno nas kontaktirajte putem obrasca ispod.