In Teil 1 dieser Serie haben wir ein grundlegendes HTML 5-Projekt mit Netbeans als IDE eingerichtet, und wir haben auch einige Elemente vorgestellt, die in dieser neuen Spezifikation der Sprache hinzugefügt wurden.
In wenigen Worten können Sie an jQuery denken als browser- und plattformübergreifende Javascript-Bibliothek, die das clientseitige Skripting in HTML-Seiten erheblich vereinfachen kann. Andererseits Bootstrap kann als vollständiges Framework beschrieben werden, das HTML-, CSS- und Javascript-Tools integriert, um für Mobilgeräte optimierte und ansprechende Webseiten zu erstellen.
In diesem Artikel stellen wir Ihnen jQuery vor und Bootstrap , zwei unbezahlbare Hilfsprogramme zum Schreiben von HTML 5 leichter codieren. Sowohl jQuery und 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 Reihe behandelt werden. Wenn Sie der Meinung sind, dass Sie sich zuerst mit diesen Themen vertraut machen müssen, bevor Sie fortfahren, empfehle ich Ihnen dringend das HTML 5-Tutorial in W3Schools.
Integration von jQuery und Bootstrap in unser Projekt
Um jQuery herunterzuladen, gehen Sie zur Website des Projekts unter http://jquery.com und klicken Sie auf die Schaltfläche, die den Hinweis auf die neueste stabile Version anzeigt.
Wir werden diese zweite Option in diesem Handbuch verwenden. NICHT Klicken Sie noch auf den Download-Link. Sie werden feststellen, dass Sie entweder eine komprimierte .min.js herunterladen können oder eine unkomprimierte .js Version von jQuery.
Die erste ist speziell für Websites gedacht und trägt dazu bei, die Ladezeit von Seiten zu verkürzen (und Google wird Ihre Website somit besser ranken), während die zweite sich hauptsächlich an Programmierer für Entwicklungszwecke richtet.
Aus Gründen der Kürze und Benutzerfreundlichkeit laden wir die komprimierte (auch bekannt als minifizierte )-Version zu den Skripten Ordner innerhalb unserer Seitenstruktur.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Jetzt ist es an der Zeit, Bootstrap hinzuzufügen zu unserem Projekt. Gehen Sie 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 verkleinerten Komponenten gebrauchsfertig in einer ZIP-Datei herunterzuladen:
Gehen Sie nach Abschluss des Downloads zu Ihren Downloads Ordner, entpacken Sie die Datei und kopieren Sie die markierten Dateien in die angegebenen Verzeichnisse innerhalb Ihres Projekts:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Kopieren Sie nun CSS- und JS-Dateien in die entsprechenden Ordner in der Projektstruktur.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Wenn Sie nun die Struktur Ihrer Site in Netbeans erweitern, sollte sie wie folgt aussehen:
Referenzen hinzufügen
Das sieht sicher gut aus, aber wir haben es unserer index.html immer noch nicht gesagt Datei, um eine dieser Dateien zu verwenden. Der Einfachheit halber ersetzen wir zuerst den Inhalt dieser Datei durch eine Barebones-HTML-Datei:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Ziehen Sie dann einfach jede Datei per Drag-and-Drop aus dem Abschnitt des Projektnavigators in den Code innerhalb von </head> Tags, wie Sie im folgenden Screencast sehen können. Stellen Sie sicher, dass der Verweis auf jQuery vor dem Verweis auf Bootstrap erscheint, da letzterer von ersterem abhängt:
Das war’s – Sie haben die Referenzen sowohl zu jQuery als auch zu Bootstrap hinzugefügt und können jetzt mit dem Schreiben von Code beginnen.
Schreiben Sie Ihren ersten responsiven Code
Lassen Sie uns nun eine Navigationsleiste hinzufügen und sie oben auf unserer Seite platzieren. Fühlen Sie sich frei, 4-5 hinzuzufügen Links mit Dummy-Text und verlinke sie vorerst nicht mit irgendeinem Dokument – füge einfach das folgende Code-Snippet in den Hauptteil des Dokuments ein.
Vergessen Sie nicht, sich etwas Zeit zu nehmen, um sich mit der Autovervollständigungsfunktion in Netbeans vertraut zu machen, die Ihnen die von Bootstrap zur Verfügung gestellten Klassen zeigt, während Sie mit der Eingabe beginnen.
Das Herzstück des Code-Snippets unten ist der Container von Bootstrap -Klasse, die verwendet wird, um Inhalte in einem horizontalen Container zu platzieren, dessen Größe automatisch an die Größe des Bildschirms angepasst wird, auf dem er angezeigt wird. Nicht weniger wichtig ist die Container-Fluid-Klasse, die sicherstellt, dass der darin enthaltene Inhalt die gesamte Breite des Bildschirms einnimmt.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Ein weiteres Unterscheidungsmerkmal von Bootstrap ist der Verzicht auf Tabellen im HTML-Code. Stattdessen verwendet es ein Rastersystem zum Layout von Inhalten und sorgt dafür, dass sie sowohl auf großen als auch auf kleinen Geräten (von Telefonen bis hin zu großen Desktop- oder Laptop-Bildschirmen) richtig aussehen.
Im Rastersystem von Bootstrap ist das Bildschirmlayout in 12 Spalten unterteilt:
Ein typisches Setup besteht aus der Verwendung der 12-Spalte Layout unterteilt in 3 Gruppen zu je 4 Spalten, wie folgt:
Um diese Tatsache im Code anzugeben und ab mittelgroßen Geräten (z. B. Laptops) so anzuzeigen, fügen Sie den folgenden Code unter dem schließenden </nav> hinzu Stichwort:
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Sie müssen wahrscheinlich bemerkt haben, dass die Spaltenklassen im Bootstrap-Raster das Startlayout für bestimmte Gerätegrößen und höher als md angeben steht in diesem Beispiel für medium (was auch lg abdeckt , oder große Geräte).
Für kleinere Geräte (sm und xs ), den Inhalt divs werden gestapelt und erscheinen übereinander.
Im folgenden Screencast können Sie sehen, wie Ihre Seite jetzt aussehen sollte. Beachten Sie, dass Sie die Größe Ihres Browserfensters ändern können, um verschiedene Bildschirmgrößen zu simulieren, nachdem Sie das Projekt gestartet haben, indem Sie die Schaltfläche „Projekt ausführen“ verwenden, wie wir in Teil 1 gelernt haben .
Zusammenfassung
Herzlichen Glückwunsch! Sie müssen inzwischen eine einfache, aber funktionale, responsive Seite geschrieben haben. Vergessen Sie nicht, die Bootstrap-Website zu besuchen, um sich mit den nahezu unbegrenzten Funktionen dieses Frameworks vertraut zu machen.
Falls Sie eine Frage oder einen Kommentar haben, können Sie uns wie immer gerne über das unten stehende Formular kontaktieren.