Tilføjelse af jQuery og Bootstrap for at skrive en mobilvenlig og responsiv webapplikation

I del 1 af denne serie oprettede vi et grundlæggende HTML 5-projekt ved hjælp af Netbeans som vores IDE, og vi præsenterede også et par elementer, der er tilføjet i denne nye specifikation af sproget.

Med få ord kan du tænke på jQuery som et Javascript-bibliotek på tværs af platforme og på tværs af platforme, der i høj grad kan forenkle scripting på klientsiden i HTML-sider. På den anden side kan Bootstrap beskrives som en komplet ramme, der integrerer HTML-, CSS- og Javascript-værktøjer til at skabe mobilvenlige og lydhøre websider.

I denne artikel vil vi introducere dig til jQuery og Bootstrap, to uvurderlige hjælpeprogrammer til lettere at skrive HTML 5-kode. Både jQuery og Bootstrap er licenseret under MIT- og Apache 2.0-licenserne, som er kompatible med GPL og dermed er fri software.

Bemærk, at grundlæggende HTML-, CSS- og Javascript-begreber ikke er omfattet af nogen artikel i denne serie. Hvis du føler, at du har brug for at komme i gang med disse emner først, før du fortsætter, anbefaler jeg stærkt HTML 5-tutorial i W3Schools.

Integrering af jQuery og Bootstrap i vores projekt

For at downloade jQuery skal du gå til projektets websted på http://jquery.com og klikke på knappen, der viser meddelelsen om den seneste stabile version.

På tidspunktet for denne skrivning er det v1.11.3 for fuld browser-kompatibilitet (inklusive Internet Explorer version 6, 7 og 8) eller v2.1.4, hvis du er sikker på, at dine besøgende ikke bruger disse versioner af IE.

Vi følger denne anden mulighed i denne vejledning. Klik IKKE på downloadlinket endnu (følgende illustration er kun beregnet til at angive, hvilken der er den rigtige mulighed).

Du vil bemærke, at du kan downloade enten en komprimeret .min.js eller en ukomprimeret .js version af jQuery. Den første er specielt beregnet til websteder og hjælper med at reducere sidernes indlæsningstid (og dermed vil Google rangere dit websted bedre), mens det andet hovedsageligt er målrettet mod kodere til udviklingsformål.

Af hensyn til kortfattethed og brugervenlighed downloader vi den komprimerede (også kendt som minificeret) version til scriptsmappen inde i vores webstedsstruktur.

Højreklik på linket til den komprimerede produktionsversion, og vælg Gem link som ..., og naviger derefter til det angivne bibliotek (du vil muligvis henvise til den angivne sti, hvor vi valgte at gemme vores projekt i del 1).

Til sidst skal du klikke på Gem nederst i den aktuelle dialog:

Nu er det tid til at føje Bootstrap til vores projekt. Gå til http://getbootstrap.com og klik på Download Bootstrap. På den næste side skal du klikke på den fremhævede mulighed som angivet nedenfor for at downloade de minificerede komponenter, klar til brug, i en zip-fil:

Når download er afsluttet, skal du gå til mappen Downloads, pakke filen ud og kopiere de fremhævede filer til de angivne mapper inde i dit projekt:

# 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

Hvis du nu udvider strukturen på dit websted i Netbeans, skal det se ud som følger: