JQuery ja Bootstrapi lisamine mobiilisõbraliku ja tundliku veebirakenduse kirjutamiseks

Selle seeria 1. osas seadsime sisse HTML 5 põhiprojekti, kasutades IDE-ks Netbeansit, ja esitasime ka mõned elemendid, mis on selle keele uue spetsifikatsiooniga lisatud.

Mõne sõnaga võite mõelda jQuery'st kui brauseriülesest ja platvormidevahelisest Javascripti teegist, mis võib oluliselt lihtsustada HTML-lehtede kliendipoolseid skripte. Teiselt poolt võib Bootstrapi kirjeldada kui täielikku raamistikku, mis integreerib HTML-, CSS- ja Javascripti tööriistu mobiilisõbralike ja tundlike veebilehtede loomiseks.

Selles artiklis tutvustame teile HTML5-koodi hõlpsamaks kirjutamiseks kahte hindamatut utiliiti jQuery ja Bootstrap. Nii jQuery kui ka Bootstrap on litsentsitud MIT ja Apache 2.0 litsentside alusel, mis ühilduvad GPL-iga ja on seega tasuta tarkvara.

Pange tähele, et HTML, CSS ja Javascripti põhimõisteid ei käsitleta selle sarja üheski artiklis. Kui tunnete, et peate enne jätkamist selle teemaga kõigepealt kiiremini tegelema, soovitan tungivalt W3Schoolsi HTML 5 õpetust.

JQuery ja Bootstrapi kaasamine meie projekti

JQuery allalaadimiseks minge projekti veebisaidile http://jquery.com ja klõpsake nuppu, mis kuvab uusima stabiilse versiooni teatise.

Selle kirjutamise ajal on see brauseri täieliku ühilduvuse (sh Internet Exploreri versioonid 6, 7 ja 8) versioon v1.11.3 või v2.1.4, kui olete kindel, et külastajad ei kasuta neid IE versioone.

Läheme selle juhendi selle teise variandi juurde. ÄRGE klõpsake veel allalaadimislingil (järgmine joonis on mõeldud ainult selleks, et näidata, milline on õige valik).

Märkate, et saate alla laadida jQuery tihendatud .min.js või tihendamata .js versiooni. Esimene on mõeldud spetsiaalselt veebisaitide jaoks ja aitab vähendada lehtede laadimisaega (ja seega Google järjestab teie saidi paremaks), samas kui teine on arenduse eesmärgil suunatud peamiselt kooderitele.

Lühiduse ja kasutusmugavuse huvides laadime tihendatud (ka minimeeritud) versiooni oma saidistruktuuri kausta skriptid alla.

Paremklõpsake tihendatud, tootmisversiooni lingil ja valige Salvesta link kui ... ning seejärel navigeerige näidatud kataloogi (võiksite viidata näidatud teele, kuhu otsustasime oma projekti 1. osas salvestada).

Lõpuks klõpsake praeguse dialoogi allservas nuppu Salvesta:

Nüüd on aeg lisada Bootstrap meie projekti. Minge aadressile http://getbootstrap.com ja klõpsake käsul Laadi alla alglaadimine. Järgmisel lehel klõpsake allpool näidatud esiletõstetud suvandil, et minimeeritud komponendid, valmis kasutamiseks, laadida alla ZIP-faili:

Kui allalaadimine on lõppenud, minge kausta Allalaadimised, pakkige fail lahti ja kopeerige esiletõstetud failid projekti sisestatud kataloogidesse:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist

# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

Kui laiendate nüüd oma saidi struktuuri Netbeansis, peaks see välja nägema järgmine: