JQuery un Bootstrap pievienošana, lai rakstītu mobilajām ierīcēm piemērotu un atsaucīgu tīmekļa lietojumprogrammu


Šīs sērijas 1. daļā mēs izveidojām HTML 5 pamata projektu, izmantojot Netbeans kā mūsu IDE, un mēs arī iepazīstinājām ar dažiem elementiem, kas ir pievienoti šai jaunajai valodas specifikācijai.

Dažos vārdos jūs varat iedomāties, ka jQuery ir pārlūkprogrammu un starpplatformu Javascript bibliotēka, kas var ievērojami vienkāršot klienta puses skriptu izveidošanu HTML lapās. No otras puses, Bootstrap var raksturot kā pilnīgu ietvaru, kas integrē HTML, CSS un Javascript rīkus, lai izveidotu mobilajām ierīcēm draudzīgas un atsaucīgas tīmekļa lapas.

Šajā rakstā mēs jūs iepazīstināsim ar jQuery un Bootstrap - divām nenovērtējamām utilītām, lai vieglāk uzrakstītu HTML 5 kodu. Gan jQuery, gan Bootstrap ir licencēti saskaņā ar MIT un Apache 2.0 licencēm, kas ir saderīgas ar GPL un tādējādi ir bezmaksas programmatūra.

Lūdzu, ņemiet vērā, ka HTML, CSS un Javascript pamata jēdzieni nav apskatīti nevienā šīs sērijas rakstā. Ja jums šķiet, ka pirms turpināt, vispirms jāuzsāk ātrums ar šīm tēmām, es ļoti iesaku HTML 5 apmācību W3Schools.

JQuery un Bootstrap iekļaušana mūsu projektā

Lai lejupielādētu jQuery, dodieties uz projekta vietni http://jquery.com un noklikšķiniet uz pogas, kas parāda paziņojumu par jaunāko stabilo versiju.

Rakstīšanas laikā tā ir pilna pārlūkprogrammas savietojamība (ieskaitot Internet Explorer 6., 7. un 8. versiju) vai v1.1.4, ja esat pārliecināts, ka apmeklētāji neizmantos šīs IE versijas.

Mēs izmantosim šo otro iespēju šajā ceļvedī. NELIETOJIET klikšķi uz lejupielādes saites (šī ilustrācija ir paredzēta tikai, lai norādītu pareizo opciju).

Jūs ievērosiet, ka varat lejupielādēt jQuery saspiestu .min.js vai nesaspiestu .js versiju. Pirmais ir domāts īpaši vietnēm un palīdz samazināt lapu ielādes laiku (un tādējādi Google labāk ranžēs jūsu vietni), bet otrais galvenokārt ir paredzēts kodētājiem attīstības nolūkos.

Īsuma un izmantošanas ērtības labad mēs saspiesto (sauktu arī par saīsinātu) versiju lejupielādēsim skriptu mapē mūsu vietnes struktūrā.

Ar peles labo pogu noklikšķiniet uz saspiestās, produkcijas versijas saites un izvēlieties Saglabāt saiti kā ... un pēc tam dodieties uz norādīto direktoriju (iespējams, vēlēsities atsaukties uz norādīto ceļu, kur mēs izvēlējāmies saglabāt savu projektu 1. daļā).

Visbeidzot, pašreizējā dialoglodziņa apakšdaļā noklikšķiniet uz Saglabāt:

Tagad ir pienācis laiks mūsu projektam pievienot Bootstrap. Atveriet vietni http://getbootstrap.com un noklikšķiniet uz Download Bootstrap. Nākamajā lapā noklikšķiniet uz iezīmētās opcijas, kā norādīts zemāk, lai lejupielādētu saspiestos komponentus, gatavus lietošanai, zip failā:

Kad lejupielāde ir pabeigta, dodieties uz mapi Lejupielādes, izpakojiet failu un nokopējiet iezīmētos failus norādītajos direktorijos projekta iekšpusē:

# 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

Ja tagad paplašināt savas vietnes struktūru Netbeans, tai vajadzētu izskatīties šādi: