„JQuery“ ir „Bootstrap“ pridėjimas norint parašyti mobiliesiems pritaikytą ir jautrią interneto programą

Šios serijos 1 dalyje mes sukūrėme pagrindinį HTML 5 projektą, kurio IDE naudojome „Netbeans“, taip pat pristatėme keletą elementų, kurie buvo pridėti prie šios naujos kalbos specifikacijos.

Keliais žodžiais, jūs galite galvoti apie „jQuery“ kaip apie kelias naršykles ir platformas naudojančią „Javascript“ biblioteką, kuri gali labai supaprastinti kliento pusės scenarijus HTML puslapiuose. Kita vertus, „Bootstrap“ galima apibūdinti kaip pilną sistemą, integruojančią HTML, CSS ir „Javascript“ įrankius, kad būtų sukurti mobiliesiems pritaikyti ir reaguojantys tinklalapiai.

Šiame straipsnyje mes supažindinsime jus su „jQuery“ ir „Bootstrap“ - dviem neįkainojamomis paslaugomis, kad būtų lengviau parašyti HTML 5 kodą. Tiek „jQuery“, tiek „Bootstrap“ yra licencijuojamos pagal MIT ir „Apache 2.0“ licencijas, kurios yra suderinamos su GPL ir todėl yra nemokama programinė įranga.

Atminkite, kad pagrindinės HTML, CSS ir „Javascript“ sąvokos nėra aprašytos jokiuose šios serijos straipsniuose. Jei manote, kad prieš tęsdami pirmiausia turite paspartinti šią temą, labai rekomenduoju „HTML 5“ pamoką „W3Schools“.

„JQuery“ ir „Bootstrap“ įtraukimas į mūsų projektą

Norėdami atsisiųsti „jQuery“, eikite į projekto svetainę adresu http://jquery.com ir spustelėkite mygtuką, kuriame rodomas pranešimas apie naujausią stabilią versiją.

Rašymo metu tai suderinama su visomis naršyklėmis (įskaitant „Internet Explorer“ 6, 7 ir 8 versijas) arba v2.1.4, jei norite įsitikinti, kad lankytojai nenaudos tų IE versijų.

Mes vadovausimės šiuo antruoju šio vadovo variantu. Dar NESpauskite ant atsisiuntimo nuorodos (ši iliustracija skirta tik nurodyti tinkamą variantą).

Pastebėsite, kad galite atsisiųsti „jQuery“ suglaudintą .min.js arba nesuspaustą .js versiją. Pirmasis yra skirtas specialiai svetainėms ir padeda sutrumpinti puslapių įkėlimo laiką (taigi „Google“ geriau reitinguos jūsų svetainę), o antrasis yra skirtas daugiausia programuotojams kūrimo tikslais.

Siekdami trumpumo ir paprasto naudojimo, atsisiųstą (taip pat žinomą kaip sutrumpintą) versiją atsisiųsime į scenarijų aplanką, esantį mūsų svetainės struktūroje.

Dešiniuoju pelės mygtuku spustelėkite suspausto, gamybinės versijos nuorodą ir pasirinkite Įrašyti nuorodą kaip ..., tada eikite į nurodytą katalogą (galbūt norėsite nurodyti kelią, nurodytą ten, kur mes pasirinkome išsaugoti savo projektą 1 dalyje).

Galiausiai spustelėkite Išsaugoti dabartinio dialogo apačioje:

Dabar atėjo laikas pridėti „Bootstrap“ prie mūsų projekto. Eikite į http://getbootstrap.com ir spustelėkite „Download Bootstrap“. Kitame puslapyje spustelėkite paryškintą parinktį, kaip nurodyta toliau, ir atsisiųskite supakuotus komponentus, paruoštus naudoti, į ZIP failą:

Kai atsisiuntimas bus baigtas, eikite į aplanką „Atsisiuntimai“, išpakuokite failą ir nukopijuokite paryškintus failus į nurodytus katalogus, esančius jūsų projekte:

# 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

Jei dabar išplėsite savo svetainės struktūrą „Netbeans“, ji turėtų atrodyti taip: