Schnallen Sie Ihre Stiefel an
und beginnen Sie mit Bootstrap.
Ich bin sicher, dass deine Finger jucken, um Bootstrap die Hände zu kriegen.
Also, ersten Schritt, gehen Sie zu
den Übungsanweisungen, die diesem Video folgen auf
Ihrer Bootstrap-Kursseite auf Coursera.
Und dann
sehen Sie in den Anweisungen einen Link zu dieser Datei Bootstrap4-starter.zip.
Laden Sie die ZIP-Datei auf Ihren Computer herunter.
Außerdem werden die Schritt-für-Schritt-Anweisungen, die in diesem Video gezeigt
werden, auch in den Übungsanweisungen gegeben, die diesem Video folgen.
Dort haben Sie Zugriff auf alle Code-Snippets, die Sie für diese Übung benötigen.
Dies wäre auch für alle Übungen in der Zukunft der Fall.
Also, sollten Sie die Code-Snippets bekommen müssen,
das ist, wo Sie sie finden.
Nachdem Sie die ZIP-Datei heruntergeladen haben,
verschieben Sie diese ZIP-Datei an einen geeigneten Speicherort auf Ihrem Computer.
Also, hier, ich habe es in einen Ordner namens Coursera auf meinem Computer verschoben,
und dann habe ich die ZIP-Datei mit diesem langen Namen dort.
Entpacken Sie einfach die Datei.
Sobald Sie die Datei entpacken,
finden Sie einen Ordner namens Bootstrap4, der auf Ihrem Computer erstellt wurde.
Innerhalb des Bootstrap4-Ordners
sehen Sie dort einen anderen Ordner namens ConFusion.
Gehen Sie in den ConFusion-Ordner und Sie würden dort zwei Dateien sehen,
index.html und package.json-Datei.
Öffnen Sie nun ein Befehlsfenster oder
ein Terminal und wechseln Sie dann zu diesem Ordner in Ihrem Befehlsfenster oder Terminal. Geben
Sie an der Eingabeaufforderung npm install ein.
Beachten Sie, dass ich bereits die package.json-Datei drin habe.
Also ist die package.json-Datei so konfiguriert, dass
die Lite-Server-Entwicklungsabhängigkeit installiert würde, wenn ich npm install tippe.
Sobald Sie also npm install eingeben,
werden Sie sehen, dass der lite-server jeweils in Ihrem node_modules Ordner installiert wird.
Sobald dies abgeschlossen ist,
öffnen Sie diesen Ordner in Ihrem bevorzugten Editor.
Sobald Sie den Ordner in Ihrem Editor geöffnet haben,
erstellen Sie eine.gitignore Datei und
legen Sie dann node_modules in die gitignore Datei und speichern Sie.
Dies soll also sicherstellen, dass beim Ausführen eines gitcommit
der Ordner node_modules nicht festgeschrieben wird.
Danach ist es Zeit zu gehen und Bootstrap für die Verwendung in unserem Projekt zu holen.
Bevor wir Bootstrap holen,
lassen Sie uns einen Commit des aktuellen Status der Datei machen.
Also, mach git init und initialisiere dein Git-Repository.
Dann können Sie den Git-Status überprüfen,
und Sie würden sehen, dass diese Dateien festgeschrieben werden müssen,
fügen Sie alle Dateien hinzu,
gitcommit -m „Initial Setup“.
Dies ist also der Ausgangspunkt Ihres Ordners in diesem Moment.
Damit wurde Ihr Ausgangspunkt Ihres Webprojekts jetzt zu git verpflichtet.
Jetzt können Sie diesen git so einrichten, dass er mit einem Online-Repository synchronisiert wird,
genau wie wir in den Git-Übungen gesprochen haben.
Sie können also ein Repository entweder auf Bitbucket oder auf Github einrichten und dann
dieses Projekt mit diesem Git-Repository synchronisieren.
Unser nächster Schritt ist es, Bootstrap zu holen.
Fügen Sie dazu die Eingabeaufforderung npm install bootstrap @4 .0.0 und auch —save hinzu,
und lassen Sie das Bootstrap installieren.
Sobald Bootstrap installiert ist,
erkennen wir, dass wir auch seinen Peer installieren müssen,
der sowohl jQuery als auch Popper.js ist.
Also lassen Sie uns voran und installieren sowohl jQuery als auch Popper.js in diesem Projektordner.
Fügen Sie dazu die Eingabeaufforderung npm install
jquery @3 .3.1
und Popper.js @1 .12.9 —save hinzu.
Wenn ich jetzt eines der npm-Pakete installiere,
gebe ich explizit die Version des Pakets an, das Sie installieren sollten.
Der Grund dafür ist, dass ich sicherstellen möchte, dass, wenn Sie diese Übung durchlaufen,
alle Schritte korrekt funktionieren.
Also gebe ich die genaue Version der zu installierenden npm-Module an.
Also, hier installieren wir die jQuery Version 3.3.1 und Popper.js Version 1.12.9.
Anschließend werde ich auch die genauen Versionen der Module angeben, die installiert werden sollen.
Also lasst uns voran gehen und diese installieren.
Und sobald sie installiert sind,
können wir mit dem nächsten Schritt gehen. Wenn Sie
zu unserem Projektordner zurückkehren,
würden Sie sehen, dass Sie, wenn Sie in node_modules gehen,
dort einen Ordner namens Bootstrap sehen werden.
Und in dem Ordner mit dem Namen Bootstrap
finden Sie einen Ordner namens dist.
Also, im Ordner dist
finden Sie zwei Unterordner namens CSS und js.
Wenn Sie in den CSS-Ordner gehen,
finden Sie hier eine ganze Reihe vorkompilierter CSS-Dateien.
Die, die für uns am Anfang von Interesse ist, ist Bootstrap min.css.
Das ist die Datei, die wir in unsere
index.html Datei aufnehmen werden, um Bootstrap in unserem Projekt zu nutzen.
In ähnlicher Weise
würden Sie in den js-Ordner gehen, sehen, dass es eine Bootstrap min.js Datei gibt.
Wir werden das auch in unsere index.htm aufnehmen.
Das wird also der nächste Schritt sein, den Sie mich tun sehen werden.
Bevor wir mit dem nächsten Schritt gehen,
lassen Sie uns unseren Lite-Server starten, damit wir die Änderungen, die wir an der
index.html vornehmen, sofort in Echtzeit in unserer Webseite widerspiegeln.
Also lassen Sie uns Lite-Server starten.
Geben Sie also den Eingabeaufforderungstyp npm start ein,
und dann sollte der Lite-Server starten.
Sie können nun auf dem Bildschirm
meinen Editor auf der linken Seite und die aktuelle Version der index.html Seite auf der rechten Seite sehen.
Wie Sie sehen können,
habe ich die Seite index.html bereits mit einigen Inhalten konfiguriert.
Diese Webseite sieht aus wie die typische Webseite eines Informatik-Professors.
Lassen Sie uns nun die index.html Seite in unserem Editor öffnen.
Und dann im Kopfteil der index.html Seite,
direkt vor dem Titel,
werde ich ein wenig Code einfügen.
Dieses Code-Snippet wird Ihnen in den Anweisungen gegeben.
Sie können also dieses Code-Snippet einfach kopieren und einfügen,
und ich werde Sie durch das führen, was dieses Code-Snippet zu tun versucht.
Sie werden feststellen, dass ich hier drei Meta-Tags habe.
Der erste sagt charset = „utf-8".
Dies ist also der Unicode, der verwendet werden soll.
Die zweite Zeile, die meta name = „viewport“ sagt,
werde ich zurückkommen und
Ihnen diese spezielle Zeile in der nächsten Lektion erklären, wenn wir uns das responsive Webdesign ansehen werden.
Lassen Sie mich Ihre Aufmerksamkeit auf diese bestimmte Zeile lenken, die
link rel="stylesheet“ sagt, und dann href.
Beachten Sie, dass ich href als „node_modules/bootstrap/dist/css/bootstrap.min.css“ angebe.
Was ich also angebe, ist, dass die Datei bootstrap.min.css,
die die CSS-Klassen enthält, die Bootstrap entsprechen, die wir
mit NPM in unseren Ordner node_modules heruntergeladen haben,
ich das in den Kopf meiner index.html Seite aufnehmen werde.
Sie müssen also die CSS-Klassen enthalten, die von Bootstrap bereitgestellt werden.
Sie müssen auch die JavaScript-Klassen enthalten,
die von Bootstrap bereitgestellt werden, was wir am Ende dieser Seite tun werden.
Gehen Sie zum Ende dieser Seite, beachten Sie, dass
ich kurz vor dem schließenden Körper-Tag den Code einfügen werde, um alle Skripte dort aufzunehmen.
Um dies zu tun,
füge ich einfach die drei Zeilen für das Skript ein, um die jQuery
, Popper.js und auch die Bootstrap min.js einzuschließen.
Und beachten Sie die Reihenfolge, in der ich das aufgenommen habe.
So ist der Bootstrap an der Unterseite.
Dann, da Bootstrap sowohl von jQuery als auch von Popper in dieser Reihenfolge abhängig ist,
werde ich zuerst jQuery eingeben.
Und danach geben wir Popper ein, und dann schließlich
Bootstrap min.js am Ende der Datei index.html.
Jetzt ist dies unten auf der Seite enthalten.
Wenn Sie die Seite von einem Webserver laden,
möchten Sie, dass die CSS-Klassen sofort geladen werden, so dass, wenn die Seite mit dem Rendern beginnt,
wenn das JavaScript abgerufen wird,
das JavaScript ausgeführt werden muss,
um Änderungen an Ihrer Seite mit dem JavaScript-Code vorzunehmen,
und dass wird ein wenig Zeit in Anspruch nehmen.
Sie möchten also nicht, dass der Benutzer darauf wartet, dass
die gesamte Seite geladen wird, bevor er etwas in seinem Browserfenster sieht.
Deshalb laden wir normalerweise die JavaScript-Klassen
gegen Ende unserer HTML-Seite kurz vor der Body Tech.
Nachdem Sie diese Änderungen vorgenommen haben,
speichern wir die Datei.
Nun, der Grund, warum ich die
Datei index.html in meinem Editor und auch den Browser direkt daneben zeige, ist,
wenn Sie die Änderungen speichern, die Sie an der Datei index.html vorgenommen haben,
beachten
Sie, wie das Browser-Rendering dieser Datei sofort aktualisiert und Bootstrap bereits in Aktion auf die Seite.
Im Moment sehen Sie, dass Ihre Seite Times New Roman verwendet, um den gesamten Inhalt zu rendern.
In dem Moment, in dem ich die Webseite speichere,
bemerken Sie, dass sich die Schriftarten, die auf Ihrer Webseite verwendet werden, geändert haben.
Jetzt ist Ihre Webseite so eingerichtet, dass die Bootstrap-Klassen verwendet werden,
und es verwendet Bootstraps Standardtypografie, um den gesamten Inhalt zu rendern.
Bootstrap verwendet standardmäßig Helvetica Neue für die Schriftart.
Sie können die Standardschriftart für Bootstrap usw. ändern,
aber das wird jetzt über den Rahmen unserer Diskussion hinausgehen.
Sobald Sie also Ihre index.html Seite eingerichtet und gespeichert
haben, werden Sie sofort sehen, dass Bootstrap auf unserer Webseite in Aktion kommt.
So werde ich weiter veranschaulichen,
wie wir verschiedene Bootstraps, CSS-Klassen
und Komponenten zu unserer Webseite hinzufügen,
wie sich das Rendering in unserem Browser weiter ändert.
Nun, offensichtlich ist das Rendering der Seite in unserem Browser immer noch schrecklich.
Es ist besser als die typische Informatik-Professoren-Webseite,
aber definitiv nicht lesbar.
Wir müssen nun die verschiedenen CSS-Klassen und die
JavaScript-Komponenten, die
unser Bootstrap-Web-UI-Framework zur Verfügung stellt, in die Tat umsetzen, um unsere Webseite zu gestalten.
So werden wir das Schritt für Schritt tun, während wir diese Übung durchlaufen.
Dies kann eine bequeme Zeit für Sie sein, ein Git-Commit
der von Ihnen vorgenommenen Änderungen durchzuführen, so dass am Ende dieser Übung
Ihr Status Ihres Projektordners in Ihrem Git-Repository gespeichert wird.
Wenn ich zu meinem ConFusion-Ordner in einer anderen Registerkarte meines Terminalfensters gehe,
sehe ich jetzt, dass meine Datei index.html und das Paket der JSON-Datei geändert wurden.
Also werde ich ein Commit machen.
Also, jetzt
wurde mein Status des Ordners am Ende dieser Übung in mein Git-Repository übertragen.
Sie können diese mit Ihrem Online-Repository synchronisieren, sodass
der Status Ihres Projekts an dieser Stelle gespeichert wird.
Damit absolvieren wir unsere erste Bootstrap-Übung.
Sie haben jetzt gesehen, wie wir Bootstrap für die Verwendung in unserem Webprojekt konfigurieren können.
Während wir mit den nächsten Übungen fortfahren,
werden wir die Bootstrap-Klassen beschäftigen, um unsere Webseiten zu gestalten.