In Teil 1 dieser Serie haben wir ein grundlegendes HTML 5-Projekt mit Netbeans als IDE erstellt und auch einige Elemente vorgestellt, die in dieser neuen Spezifikation der Sprache hinzugefügt wurden.
In wenigen Worten können Sie sich vorstellen jQuery als browser- und plattformübergreifende Javascript-Bibliothek, die das clientseitige Scripting in HTML-Seiten erheblich vereinfachen kann. Auf der anderen Seite kann Bootstrap als komplettes Framework beschrieben werden, das HTML-, CSS- und Javascript-Tools integriert, um mobilfreundliche und responsive Webseiten zu erstellen.
In diesem Artikel stellen wir Ihnen vor jQuery und Bootstrap, zwei unschätzbare Dienstprogramme zum einfacheren Schreiben von HTML 5-Code. Sowohl jQuery als auch Bootstrap sind unter den Lizenzen MIT und Apache 2.0 lizenziert, die mit der GPL kompatibel und somit freie Software sind.
Bitte beachten Sie, dass grundlegende HTML-, CSS- und Javascript-Konzepte in keinem Artikel dieser Serie behandelt werden. Wenn Sie das Gefühl haben, dass Sie sich zuerst mit diesen Themen vertraut machen müssen, bevor Sie fortfahren, empfehle ich die
HTML5-Tutorial in W3Schulen.Um jQuery herunterzuladen, besuchen Sie die Website des Projekts unter http://jquery.com und klicken Sie auf die Schaltfläche, die den Hinweis für die neueste stabile Version anzeigt.
Zum Zeitpunkt des Schreibens ist es v1.11.3 für volle Browserkompatibilität (einschließlich Internet Explorer Version 6, 7 und 8) oder v2.1.4 wenn Sie sicher sind, dass Ihre Besucher diese IE-Versionen nicht verwenden.
Wir werden uns in diesem Handbuch mit dieser zweiten Option befassen. NICHT Klicken Sie noch auf den Download-Link (die folgende Abbildung soll nur zeigen, welche Option die richtige ist).
Sie werden feststellen, dass Sie entweder eine komprimierte .min.js
oder ein unkomprimiertes .js
jQuery-Version. Die erste ist speziell für Websites gedacht und hilft, die Ladezeit von Seiten zu reduzieren (und somit wird Google Ihre Website besser einordnen), während die zweite hauptsächlich auf Programmierer für Entwicklungszwecke ausgerichtet ist.
Aus Gründen der Kürze und Benutzerfreundlichkeit laden wir die komprimierte (auch bekannt als verkleinert)-Version in den Ordner scripts innerhalb unserer Site-Struktur.
Klicken Sie mit der rechten Maustaste auf den Link für die komprimierte Produktionsversion und wählen Sie Verknüpfung speichern unter…, und navigieren Sie dann zum angegebenen Verzeichnis (Sie können sich auf den angegebenen Pfad beziehen, in dem wir unser Projekt gespeichert haben Teil 1).
Klicken Sie abschließend auf Speichern unten im aktuellen Dialog:
Jetzt ist es Zeit, hinzuzufügen Bootstrap zu unserem Projekt. Gehe zu http://getbootstrap.com und klicken Sie auf Bootstrap herunterladen. Klicken Sie auf der nächsten Seite auf die hervorgehobene Option, wie unten angegeben, um die minifizierten Komponenten gebrauchsfertig in einer ZIP-Datei herunterzuladen:
Wenn der Download abgeschlossen ist, gehen Sie zu Ihrem Downloads Ordner, entpacken Sie die Datei und kopieren Sie die markierten Dateien in die angegebenen Verzeichnisse in Ihrem 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.
Wenn Sie nun die Struktur Ihrer Site in Netbeans erweitern, sollte diese wie folgt aussehen: