Přidání jQuery a Bootstrap k napsání webové aplikace vhodné pro mobilní zařízení a citlivé


V části 1 této série jsme nastavili základní projekt HTML 5 s použitím Netbeans jako našeho IDE a také jsme představili několik prvků, které byly přidány do této nové specifikace jazyka.

Stručně řečeno, můžete si jQuery představit jako knihovnu Javascriptů pro různé prohlížeče a platformy, která může značně zjednodušit skriptování na stránkách HTML na straně klienta. Na druhou stranu lze Bootstrap popsat jako kompletní rámec, který integruje nástroje HTML, CSS a Javascript k vytváření mobilních a citlivých webových stránek.

V tomto článku vám představíme jQuery a Bootstrap, dva neocenitelné nástroje pro snadnější psaní kódu HTML 5. Jak jQuery, tak Bootstrap jsou licencovány na základě licencí MIT a Apache 2.0, které jsou kompatibilní s GPL a jsou tedy svobodným softwarem.

Vezměte prosím na vědomí, že základní pojmy HTML, CSS a Javascript nejsou zahrnuty v žádném článku této série. Pokud máte pocit, že se s těmito tématy musíte nejprve seznámit, než budete pokračovat, velmi doporučuji výukový program HTML 5 ve W3Schools.

Začlenění jQuery a Bootstrap do našeho projektu

Chcete-li stáhnout jQuery, přejděte na web projektu na adrese http://jquery.com a klikněte na tlačítko, které zobrazuje upozornění na nejnovější stabilní verzi.

V době psaní tohoto článku je to v1.11.3 pro kompatibilitu s úplným prohlížečem (včetně Internet Exploreru verze 6, 7 a 8) nebo v2.1.4, pokud jste si jisti, že vaši návštěvníci tyto verze IE nebudou používat.

Půjdeme s touto druhou možností v této příručce. Ještě neklikejte na odkaz ke stažení (následující obrázek je určen pouze k označení, která je správná možnost).

Všimnete si, že si můžete stáhnout buď komprimovanou verzi jQuery .min.js nebo nekomprimovanou verzi .js . První je určen speciálně pro webové stránky a pomáhá snižovat dobu načítání stránek (a tím Google vyhodnotí váš web lépe), zatímco druhý je zaměřen většinou na programátory pro účely vývoje.

Kvůli stručnosti a snadnému použití si stáhneme komprimovanou (také známou jako minifikovanou) verzi do složky skriptů uvnitř struktury našeho webu.

Klikněte pravým tlačítkem na odkaz pro komprimovanou produkční verzi a zvolte Uložit odkaz jako… a poté přejděte do označeného adresáře (možná budete chtít odkazovat na označenou cestu, kam jsme se rozhodli uložit náš projekt v části 1).

Nakonec klikněte na Uložit v dolní části aktuálního dialogu:

Nyní je čas přidat do našeho projektu Bootstrap. Přejděte na stránku http://getbootstrap.com a klikněte na možnost Stáhnout Bootstrap. Na další stránce kliknutím na zvýrazněnou možnost, jak je uvedeno níže, stáhnete minifikované komponenty připravené k použití do souboru zip:

Po dokončení stahování přejděte do složky Stažené soubory, soubor rozbalte a zkopírujte zvýrazněné soubory do určených adresářů uvnitř 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

Pokud nyní rozšíříte strukturu svého webu v Netbeans, mělo by to vypadat takto: