Dodajanje jQuery in Bootstrap za pisanje mobilno prijazne in odzivne spletne aplikacije

V prvem delu te serije smo postavili osnovni projekt HTML 5 z uporabo Netbeans kot IDE in predstavili tudi nekaj elementov, ki so bili dodani v tej novi specifikaciji jezika.

Z nekaj besedami si lahko predstavljate jQuery kot knjižnico Javascript za več brskalnikov in platforme, ki lahko močno poenostavi skript na strani odjemalca na straneh HTML. Po drugi strani pa lahko Bootstrap opišemo kot celoten okvir, ki vključuje orodja HTML, CSS in Javascript za ustvarjanje mobilnih in odzivnih spletnih strani.

V tem članku vam bomo predstavili jQuery in Bootstrap, dve neprecenljivi pripomočki za lažje pisanje kode HTML 5. Tako jQuery kot Bootstrap sta licencirana pod licencama MIT in Apache 2.0, ki sta združljiva z GPL in sta torej brezplačni programski opremi.

Upoštevajte, da osnovni koncepti HTML, CSS in Javascript niso zajeti v nobenem članku te serije. Če se vam zdi, da morate najprej nadaljevati 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 http://jquery.com in kliknite gumb, ki prikazuje obvestilo o najnovejši stabilni različici.

V času pisanja tega članka je v1.11.3 za združljivost s polnim brskalnikom (vključno z različicami Internet Explorer 6, 7 in 8) ali v2.1.4, če ste prepričani, da vaši obiskovalci ne bodo uporabljali teh različic IE.

V tem priročniku bomo upoštevali to drugo možnost. NE KLIKNITE še povezave za prenos (naslednja ilustracija naj bi pokazala le, katera je prava možnost).

Opazili boste, da lahko prenesete stisnjeno .min.js ali nestisnjeno .js različico jQuery. Prva je namenjena posebej spletnim mestom in pomaga zmanjšati čas nalaganja strani (in tako bo Google bolje ocenil vaše spletno mesto), druga pa je namenjena predvsem kodirnikom za razvojne namene.

Zaradi kratkosti in enostavnosti uporabe bomo stisnjeno (znano tudi kot pomanjšano) različico prenesli v mapo skriptov znotraj strukture našega spletnega mesta.

Z desno miškino tipko kliknite povezavo za stisnjeno, produkcijsko različico in izberite Shrani povezavo kot ..., nato pa se pomaknite do navedenega imenika (morda se boste želeli sklicevati na navedeno pot, kjer smo se odločili za shranjevanje našega projekta v 1. delu).

Na koncu kliknite Shrani na dnu trenutnega pogovornega okna:

Zdaj je čas, da v naš projekt dodamo še Bootstrap. Pojdite na http://getbootstrap.com in kliknite Download Bootstrap. Na naslednji strani kliknite na označeno možnost, kot je navedeno spodaj, da prenesete pomanjšane komponente, pripravljene za uporabo, v datoteko zip:

Ko se prenos konča, pojdite v mapo Prenosi, razpakirajte datoteko in kopirajte označene datoteke v označene imenike v projektu:

# 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

Če zdaj razširite strukturo svojega spletnega mesta v Netbeansu, mora biti videti tako: