Kako napisati aplikacijo, prijazno do mobilnih naprav z uporabo JQuery & Bootstrap
V 1. delu te serije smo vzpostavili osnovni projekt HTML 5 z uporabo Netbeans kot našega IDE, predstavili pa smo tudi nekaj elementov, ki so bili dodani v to novo specifikacijo jezika.
[ Morda vam bo všeč tudi: 27 najboljših IDE za programiranje C/C++ ali urejevalnike izvorne kode v Linuxu ]
Z nekaj besedami si lahko jQuery predstavljate kot knjižnico Javascript med brskalniki in platformo, ki lahko močno poenostavi skriptiranje na strani odjemalca na straneh HTML. Po drugi strani pa lahko Bootstrap opišemo kot popoln okvir, ki združuje orodja HTML, CSS in Javascript za ustvarjanje mobilnih prijaznih in odzivnih spletnih strani.
V tem članku vam bomo predstavili jQuery in Bootstrap, dva neprecenljiva pripomočka za lažje pisanje kode HTML 5. Tako jQuery kot Bootstrap sta licencirana pod licencama MIT in Apache 2.0, ki sta združljivi z GPL in sta tako brezplačna programska oprema.
Upoštevajte, da osnovni koncepti HTML, CSS in Javascript niso zajeti v nobenem članku te serije. Če menite, da se morate najprej seznaniti s temi temami, preden nadaljujete, toplo priporočam vadnico HTML 5 v W3Schools.
Vključitev jQuery in Bootstrap v naš projekt
Če želite prenesti jQuery, pojdite na spletno mesto projekta na naslovu http://jquery.com in kliknite gumb, ki prikaže obvestilo za najnovejšo stabilno različico.
V tem priročniku bomo uporabili to drugo možnost. NE klikajte še povezave za prenos. Opazili boste, da lahko prenesete stisnjeno .min.js ali nestisnjeno .js različico jQuery.
Prvi je namenjen posebej spletnim mestom in pomaga skrajšati čas nalaganja strani (in tako bo Google bolje uvrstil vaše spletno mesto), drugi pa je namenjen večinoma programerjem za razvojne namene.
Zaradi kratkosti in enostavne uporabe bomo stisnjeno (znano tudi pomanjšano) različico prenesli v mapo skripti znotraj strukture našega spletnega mesta.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Zdaj je čas, da našemu projektu dodamo Bootstrap. Pojdite na http://getbootstrap.com in kliknite Prenesi Bootstrap. Na naslednji strani kliknite označeno možnost, kot je prikazano spodaj, da prenesete pomanjšane komponente, pripravljene za uporabo, v datoteki zip:
Ko je prenos končan, pojdite v mapo Prenosi, razpakirajte datoteko in kopirajte označene datoteke v označene imenike v vašem projektu:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Zdaj kopirajte datoteke CSS in JS v ustrezne mape v 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
Če zdaj razširite strukturo svojega spletnega mesta v Netbeans, bi morala izgledati takole:
Dodajanje referenc
To zagotovo izgleda dobro, vendar še vedno nismo rekli naši datoteki index.html, naj uporablja katero koli od teh datotek. Zaradi poenostavitve bomo vsebino te datoteke najprej zamenjali z datoteko html barebones:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Nato samo povlecite in spustite vsako datoteko iz razdelka za krmarjenje projekta v kodo, znotraj oznak , kot lahko vidite v naslednjem prikazu zaslona. Prepričajte se, da se sklic na jQuery pojavi pred sklicem na Bootstrap, ker je slednji odvisen od prvega:
To je to – dodali ste sklice na jQuery in Bootstrap in zdaj lahko začnete pisati kodo.
Pisanje vaše prve odzivne kode
Zdaj dodajmo navigacijsko vrstico in jo postavimo na vrh naše strani. Vključite 4-5 povezav z navideznim besedilom in jih zaenkrat ne povežite z nobenim dokumentom – samo vstavite naslednji delček kode v telo dokumenta.
Ne pozabite porabiti nekaj časa, da se seznanite s funkcijo samodokončanja v Netbeansu, ki vam bo pokazala razrede, ki jih Bootstrap dal na voljo, ko začnete tipkati.
V središču spodnjega odrezka kode je razred vsebnika Bootstrap, ki se uporablja za postavitev vsebine v vodoravni vsebnik, ki bo samodejno spremenil velikost glede na velikost zaslona, kjer si jo ogledujete. Nič manj pomemben ni razred kontejner-fluid, ki bo poskrbel, da bo vsebina znotraj zavzemala celotno širino zaslona.
<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>
Druga značilnost Bootstrapa je, da odpravlja potrebo po tabelah v kodi HTML. Namesto tega uporablja mrežni sistem za postavitev vsebine in poskrbi, da je videti pravilno tako na velikih kot majhnih napravah (od telefonov pa vse do velikih zaslonov namizja ali prenosnika).
V mrežnem sistemu Bootstrapa je postavitev zaslona razdeljena na 12 stolpcev:
Tipična nastavitev je sestavljena iz uporabe postavitve z 12 stolpci, razdeljene v 3 skupine po 4 stolpce, kot sledi:
Če želite to dejstvo navesti v kodi in da bo tako prikazano v napravah srednje velikosti (kot so prenosniki) in višje, dodajte naslednjo kodo pod zaključno oznako :
...
</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 -->
Verjetno ste opazili, da razredi stolpcev v mreži Bootstrap označujejo začetno postavitev za določeno velikost naprave in več, saj md v tem primeru pomeni srednje (ki zajema tudi lg ali velike naprave).
Pri manjših napravah (sm in xs) se divi vsebine zložijo in se prikažejo eden nad drugim.
V naslednjem prikazu zaslona si lahko ogledate, kako naj bi vaša stran izgledala do zdaj. Upoštevajte, da lahko spremenite velikost okna brskalnika za simulacijo različnih velikosti zaslona po zagonu projekta z gumbom Zaženi projekt, kot smo izvedeli v 1. delu.
Povzetek
Čestitam! Do zdaj ste morali napisati preprosto, a funkcionalno in odzivno stran. Ne pozabite preveriti spletnega mesta Bootstrap, da se bolje seznanite s skoraj neomejeno funkcionalnostjo tega okvira.
Kot vedno, v primeru, da imate vprašanje ali komentar, nas kontaktirajte prek spodnjega obrazca.