1
00:00:03,910 --> 00:00:06,210
Schnallen Sie Ihre Stiefel an

2
00:00:06,210 --> 00:00:08,470
und beginnen Sie mit Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Ich bin sicher, dass deine Finger jucken, um Bootstrap die Hände zu kriegen.

4
00:00:13,045 --> 00:00:18,250
Also, ersten Schritt, gehen Sie zu

5
00:00:18,250 --> 00:00:22,280
den Übungsanweisungen, die diesem Video folgen auf

6
00:00:22,280 --> 00:00:27,805
Ihrer Bootstrap-Kursseite auf Coursera.

7
00:00:27,805 --> 00:00:29,840
Und dann

8
00:00:29,840 --> 00:00:35,520
sehen Sie in den Anweisungen einen Link zu dieser Datei Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Laden Sie die ZIP-Datei auf Ihren Computer herunter.

10
00:00:39,695 --> 00:00:46,610
Außerdem werden die Schritt-für-Schritt-Anweisungen, die in diesem Video gezeigt

11
00:00:46,610 --> 00:00:52,995
werden, auch in den Übungsanweisungen gegeben, die diesem Video folgen.

12
00:00:52,995 --> 00:01:00,595
Dort haben Sie Zugriff auf alle Code-Snippets, die Sie für diese Übung benötigen.

13
00:01:00,595 --> 00:01:04,920
Dies wäre auch für alle Übungen in der Zukunft der Fall.

14
00:01:04,920 --> 00:01:08,125
Also, sollten Sie die Code-Snippets bekommen müssen,

15
00:01:08,125 --> 00:01:10,145
das ist, wo Sie sie finden.

16
00:01:10,145 --> 00:01:12,180
Nachdem Sie die ZIP-Datei heruntergeladen haben,

17
00:01:12,180 --> 00:01:16,230
verschieben Sie diese ZIP-Datei an einen geeigneten Speicherort auf Ihrem Computer.

18
00:01:16,230 --> 00:01:23,375
Also, hier, ich habe es in einen Ordner namens Coursera auf meinem Computer verschoben,

19
00:01:23,375 --> 00:01:27,145
und dann habe ich die ZIP-Datei mit diesem langen Namen dort.

20
00:01:27,145 --> 00:01:28,765
Entpacken Sie einfach die Datei.

21
00:01:28,765 --> 00:01:30,445
Sobald Sie die Datei entpacken,

22
00:01:30,445 --> 00:01:36,715
finden Sie einen Ordner namens Bootstrap4, der auf Ihrem Computer erstellt wurde.

23
00:01:36,715 --> 00:01:38,965
Innerhalb des Bootstrap4-Ordners

24
00:01:38,965 --> 00:01:42,450
sehen Sie dort einen anderen Ordner namens ConFusion.

25
00:01:42,450 --> 00:01:46,260
Gehen Sie in den ConFusion-Ordner und Sie würden dort zwei Dateien sehen,

26
00:01:46,260 --> 00:01:49,600
index.html und package.json-Datei.

27
00:01:49,600 --> 00:01:53,795
Öffnen Sie nun ein Befehlsfenster oder

28
00:01:53,795 --> 00:02:00,290
ein Terminal und wechseln Sie dann zu diesem Ordner in Ihrem Befehlsfenster oder Terminal. Geben

29
00:02:00,290 --> 00:02:05,125
Sie an der Eingabeaufforderung npm install ein.

30
00:02:05,125 --> 00:02:09,150
Beachten Sie, dass ich bereits die package.json-Datei drin habe.

31
00:02:09,150 --> 00:02:12,745
Also ist die package.json-Datei so konfiguriert, dass

32
00:02:12,745 --> 00:02:19,200
die Lite-Server-Entwicklungsabhängigkeit installiert würde, wenn ich npm install tippe.

33
00:02:19,200 --> 00:02:21,150
Sobald Sie also npm install eingeben,

34
00:02:21,150 --> 00:02:27,160
werden Sie sehen, dass der lite-server jeweils in Ihrem node_modules Ordner installiert wird.

35
00:02:27,160 --> 00:02:30,415
Sobald dies abgeschlossen ist,

36
00:02:30,415 --> 00:02:35,930
öffnen Sie diesen Ordner in Ihrem bevorzugten Editor.

37
00:02:35,930 --> 00:02:39,060
Sobald Sie den Ordner in Ihrem Editor geöffnet haben,

38
00:02:39,060 --> 00:02:45,170
erstellen Sie eine.gitignore Datei und

39
00:02:45,170 --> 00:02:50,530
legen Sie dann node_modules in die gitignore Datei und speichern Sie.

40
00:02:50,530 --> 00:02:54,940
Dies soll also sicherstellen, dass beim Ausführen eines gitcommit

41
00:02:54,940 --> 00:02:57,615
der Ordner node_modules nicht festgeschrieben wird.

42
00:02:57,615 --> 00:03:05,475
Danach ist es Zeit zu gehen und Bootstrap für die Verwendung in unserem Projekt zu holen.

43
00:03:05,475 --> 00:03:08,050
Bevor wir Bootstrap holen,

44
00:03:08,050 --> 00:03:11,810
lassen Sie uns einen Commit des aktuellen Status der Datei machen.

45
00:03:11,810 --> 00:03:18,535
Also, mach git init und initialisiere dein Git-Repository.

46
00:03:18,535 --> 00:03:21,600
Dann können Sie den Git-Status überprüfen,

47
00:03:21,600 --> 00:03:25,290
und Sie würden sehen, dass diese Dateien festgeschrieben werden müssen,

48
00:03:25,290 --> 00:03:29,315
fügen Sie alle Dateien hinzu,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m „Initial Setup“.

50
00:03:38,885 --> 00:03:43,745
Dies ist also der Ausgangspunkt Ihres Ordners in diesem Moment.

51
00:03:43,745 --> 00:03:52,785
Damit wurde Ihr Ausgangspunkt Ihres Webprojekts jetzt zu git verpflichtet.

52
00:03:52,785 --> 00:03:57,770
Jetzt können Sie diesen git so einrichten, dass er mit einem Online-Repository synchronisiert wird,

53
00:03:57,770 --> 00:04:00,800
genau wie wir in den Git-Übungen gesprochen haben.

54
00:04:00,800 --> 00:04:05,690
Sie können also ein Repository entweder auf Bitbucket oder auf Github einrichten und dann

55
00:04:05,690 --> 00:04:11,430
dieses Projekt mit diesem Git-Repository synchronisieren.

56
00:04:11,430 --> 00:04:15,265
Unser nächster Schritt ist es, Bootstrap zu holen.

57
00:04:15,265 --> 00:04:25,260
Fügen Sie dazu die Eingabeaufforderung npm install bootstrap @4 .0.0 und auch —save hinzu,

58
00:04:25,260 --> 00:04:29,470
und lassen Sie das Bootstrap installieren.

59
00:04:29,470 --> 00:04:31,880
Sobald Bootstrap installiert ist,

60
00:04:31,880 --> 00:04:35,535
erkennen wir, dass wir auch seinen Peer installieren müssen,

61
00:04:35,535 --> 00:04:38,975
der sowohl jQuery als auch Popper.js ist.

62
00:04:38,975 --> 00:04:46,350
Also lassen Sie uns voran und installieren sowohl jQuery als auch Popper.js in diesem Projektordner.

63
00:04:46,350 --> 00:04:50,905
Fügen Sie dazu die Eingabeaufforderung npm install

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
und Popper.js @1 .12.9 —save hinzu.

66
00:05:03,185 --> 00:05:06,385
Wenn ich jetzt eines der npm-Pakete installiere,

67
00:05:06,385 --> 00:05:11,620
gebe ich explizit die Version des Pakets an, das Sie installieren sollten.

68
00:05:11,620 --> 00:05:17,580
Der Grund dafür ist, dass ich sicherstellen möchte, dass, wenn Sie diese Übung durchlaufen,

69
00:05:17,580 --> 00:05:19,500
alle Schritte korrekt funktionieren.

70
00:05:19,500 --> 00:05:25,380
Also gebe ich die genaue Version der zu installierenden npm-Module an.

71
00:05:25,380 --> 00:05:33,235
Also, hier installieren wir die jQuery Version 3.3.1 und Popper.js Version 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Anschließend werde ich auch die genauen Versionen der Module angeben, die installiert werden sollen.

73
00:05:40,895 --> 00:05:44,130
Also lasst uns voran gehen und diese installieren.

74
00:05:46,530 --> 00:05:49,030
Und sobald sie installiert sind,

75
00:05:49,030 --> 00:05:51,055
können wir mit dem nächsten Schritt gehen. Wenn Sie

76
00:05:51,055 --> 00:05:55,615
zu unserem Projektordner zurückkehren,

77
00:05:55,615 --> 00:05:58,070
würden Sie sehen, dass Sie, wenn Sie in node_modules gehen,

78
00:05:58,070 --> 00:06:02,675
dort einen Ordner namens Bootstrap sehen werden.

79
00:06:02,675 --> 00:06:04,865
Und in dem Ordner mit dem Namen Bootstrap

80
00:06:04,865 --> 00:06:07,845
finden Sie einen Ordner namens dist.

81
00:06:07,845 --> 00:06:09,910
Also, im Ordner dist

82
00:06:09,910 --> 00:06:13,705
finden Sie zwei Unterordner namens CSS und js.

83
00:06:13,705 --> 00:06:15,775
Wenn Sie in den CSS-Ordner gehen,

84
00:06:15,775 --> 00:06:20,820
finden Sie hier eine ganze Reihe vorkompilierter CSS-Dateien.

85
00:06:20,820 --> 00:06:27,630
Die, die für uns am Anfang von Interesse ist, ist Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
Das ist die Datei, die wir in unsere

87
00:06:31,620 --> 00:06:36,020
index.html Datei aufnehmen werden, um Bootstrap in unserem Projekt zu nutzen.

88
00:06:36,020 --> 00:06:38,820
In ähnlicher Weise

89
00:06:38,820 --> 00:06:42,165
würden Sie in den js-Ordner gehen, sehen, dass es eine Bootstrap min.js Datei gibt.

90
00:06:42,165 --> 00:06:45,680
Wir werden das auch in unsere index.htm aufnehmen.

91
00:06:45,680 --> 00:06:48,790
Das wird also der nächste Schritt sein, den Sie mich tun sehen werden.

92
00:06:48,790 --> 00:06:51,215
Bevor wir mit dem nächsten Schritt gehen,

93
00:06:51,215 --> 00:06:55,550
lassen Sie uns unseren Lite-Server starten, damit wir die Änderungen, die wir an der

94
00:06:55,550 --> 00:07:01,860
index.html vornehmen, sofort in Echtzeit in unserer Webseite widerspiegeln.

95
00:07:01,860 --> 00:07:03,630
Also lassen Sie uns Lite-Server starten.

96
00:07:03,630 --> 00:07:07,240
Geben Sie also den Eingabeaufforderungstyp npm start ein,

97
00:07:07,240 --> 00:07:09,915
und dann sollte der Lite-Server starten.

98
00:07:09,915 --> 00:07:13,485
Sie können nun auf dem Bildschirm

99
00:07:13,485 --> 00:07:21,785
meinen Editor auf der linken Seite und die aktuelle Version der index.html Seite auf der rechten Seite sehen.

100
00:07:21,785 --> 00:07:23,215
Wie Sie sehen können,

101
00:07:23,215 --> 00:07:27,615
habe ich die Seite index.html bereits mit einigen Inhalten konfiguriert.

102
00:07:27,615 --> 00:07:33,820
Diese Webseite sieht aus wie die typische Webseite eines Informatik-Professors.

103
00:07:33,820 --> 00:07:41,170
Lassen Sie uns nun die index.html Seite in unserem Editor öffnen.

104
00:07:41,170 --> 00:07:45,645
Und dann im Kopfteil der index.html Seite,

105
00:07:45,645 --> 00:07:47,360
direkt vor dem Titel,

106
00:07:47,360 --> 00:07:49,935
werde ich ein wenig Code einfügen.

107
00:07:49,935 --> 00:07:53,730
Dieses Code-Snippet wird Ihnen in den Anweisungen gegeben.

108
00:07:53,730 --> 00:07:56,740
Sie können also dieses Code-Snippet einfach kopieren und einfügen,

109
00:07:56,740 --> 00:08:00,765
und ich werde Sie durch das führen, was dieses Code-Snippet zu tun versucht.

110
00:08:00,765 --> 00:08:05,585
Sie werden feststellen, dass ich hier drei Meta-Tags habe.

111
00:08:05,585 --> 00:08:09,130
Der erste sagt charset = „utf-8".

112
00:08:09,130 --> 00:08:11,860
Dies ist also der Unicode, der verwendet werden soll.

113
00:08:11,860 --> 00:08:17,675
Die zweite Zeile, die meta name = „viewport“ sagt,

114
00:08:17,675 --> 00:08:21,100
werde ich zurückkommen und

115
00:08:21,100 --> 00:08:25,745
Ihnen diese spezielle Zeile in der nächsten Lektion erklären, wenn wir uns das responsive Webdesign ansehen werden.

116
00:08:25,745 --> 00:08:30,100
Lassen Sie mich Ihre Aufmerksamkeit auf diese bestimmte Zeile lenken, die

117
00:08:30,100 --> 00:08:34,840
link rel="stylesheet“ sagt, und dann href.

118
00:08:34,840 --> 00:08:43,495
Beachten Sie, dass ich href als „node_modules/bootstrap/dist/css/bootstrap.min.css“ angebe.

119
00:08:43,495 --> 00:08:49,150
Was ich also angebe, ist, dass die Datei bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
die die CSS-Klassen enthält, die Bootstrap entsprechen, die wir

121
00:08:52,970 --> 00:08:57,995
mit NPM in unseren Ordner node_modules heruntergeladen haben,

122
00:08:57,995 --> 00:09:05,350
ich das in den Kopf meiner index.html Seite aufnehmen werde.

123
00:09:05,350 --> 00:09:09,370
Sie müssen also die CSS-Klassen enthalten, die von Bootstrap bereitgestellt werden.

124
00:09:09,370 --> 00:09:15,150
Sie müssen auch die JavaScript-Klassen enthalten,

125
00:09:15,150 --> 00:09:19,445
die von Bootstrap bereitgestellt werden, was wir am Ende dieser Seite tun werden.

126
00:09:19,445 --> 00:09:27,400
Gehen Sie zum Ende dieser Seite, beachten Sie, dass

127
00:09:27,400 --> 00:09:32,820
ich kurz vor dem schließenden Körper-Tag den Code einfügen werde, um alle Skripte dort aufzunehmen.

128
00:09:32,820 --> 00:09:35,105
Um dies zu tun,

129
00:09:35,105 --> 00:09:41,300
füge ich einfach die drei Zeilen für das Skript ein, um die jQuery

130
00:09:41,300 --> 00:09:45,085
, Popper.js und auch die Bootstrap min.js einzuschließen.

131
00:09:45,085 --> 00:09:48,635
Und beachten Sie die Reihenfolge, in der ich das aufgenommen habe.

132
00:09:48,635 --> 00:09:50,895
So ist der Bootstrap an der Unterseite.

133
00:09:50,895 --> 00:09:57,340
Dann, da Bootstrap sowohl von jQuery als auch von Popper in dieser Reihenfolge abhängig ist,

134
00:09:57,340 --> 00:09:59,945
werde ich zuerst jQuery eingeben.

135
00:09:59,945 --> 00:10:03,835
Und danach geben wir Popper ein, und dann schließlich

136
00:10:03,835 --> 00:10:09,585
Bootstrap min.js am Ende der Datei index.html.

137
00:10:09,585 --> 00:10:13,400
Jetzt ist dies unten auf der Seite enthalten.

138
00:10:13,400 --> 00:10:18,665
Wenn Sie die Seite von einem Webserver laden,

139
00:10:18,665 --> 00:10:24,360
möchten Sie, dass die CSS-Klassen sofort geladen werden, so dass, wenn die Seite mit dem Rendern beginnt,

140
00:10:24,360 --> 00:10:26,430
wenn das JavaScript abgerufen wird,

141
00:10:26,430 --> 00:10:29,810
das JavaScript ausgeführt werden muss,

142
00:10:29,810 --> 00:10:33,395
um Änderungen an Ihrer Seite mit dem JavaScript-Code vorzunehmen,

143
00:10:33,395 --> 00:10:34,970
und dass wird ein wenig Zeit in Anspruch nehmen.

144
00:10:34,970 --> 00:10:38,060
Sie möchten also nicht, dass der Benutzer darauf wartet, dass

145
00:10:38,060 --> 00:10:43,805
die gesamte Seite geladen wird, bevor er etwas in seinem Browserfenster sieht.

146
00:10:43,805 --> 00:10:48,720
Deshalb laden wir normalerweise die JavaScript-Klassen

147
00:10:48,720 --> 00:10:55,325
gegen Ende unserer HTML-Seite kurz vor der Body Tech.

148
00:10:55,325 --> 00:10:58,270
Nachdem Sie diese Änderungen vorgenommen haben,

149
00:10:58,270 --> 00:11:00,065
speichern wir die Datei.

150
00:11:00,065 --> 00:11:04,420
Nun, der Grund, warum ich die

151
00:11:04,420 --> 00:11:09,385
Datei index.html in meinem Editor und auch den Browser direkt daneben zeige, ist,

152
00:11:09,385 --> 00:11:13,630
wenn Sie die Änderungen speichern, die Sie an der Datei index.html vorgenommen haben,

153
00:11:13,630 --> 00:11:18,920
beachten

154
00:11:18,920 --> 00:11:26,525
Sie, wie das Browser-Rendering dieser Datei sofort aktualisiert und Bootstrap bereits in Aktion auf die Seite.

155
00:11:26,525 --> 00:11:33,150
Im Moment sehen Sie, dass Ihre Seite Times New Roman verwendet, um den gesamten Inhalt zu rendern.

156
00:11:33,150 --> 00:11:36,130
In dem Moment, in dem ich die Webseite speichere,

157
00:11:36,130 --> 00:11:42,670
bemerken Sie, dass sich die Schriftarten, die auf Ihrer Webseite verwendet werden, geändert haben.

158
00:11:42,670 --> 00:11:48,425
Jetzt ist Ihre Webseite so eingerichtet, dass die Bootstrap-Klassen verwendet werden,

159
00:11:48,425 --> 00:11:53,850
und es verwendet Bootstraps Standardtypografie, um den gesamten Inhalt zu rendern.

160
00:11:53,850 --> 00:12:01,360
Bootstrap verwendet standardmäßig Helvetica Neue für die Schriftart.

161
00:12:01,360 --> 00:12:06,180
Sie können die Standardschriftart für Bootstrap usw. ändern,

162
00:12:06,180 --> 00:12:09,905
aber das wird jetzt über den Rahmen unserer Diskussion hinausgehen.

163
00:12:09,905 --> 00:12:15,120
Sobald Sie also Ihre index.html Seite eingerichtet und gespeichert

164
00:12:15,120 --> 00:12:20,710
haben, werden Sie sofort sehen, dass Bootstrap auf unserer Webseite in Aktion kommt.

165
00:12:20,710 --> 00:12:23,675
So werde ich weiter veranschaulichen,

166
00:12:23,675 --> 00:12:27,385
wie wir verschiedene Bootstraps, CSS-Klassen

167
00:12:27,385 --> 00:12:30,435
und Komponenten zu unserer Webseite hinzufügen,

168
00:12:30,435 --> 00:12:35,720
wie sich das Rendering in unserem Browser weiter ändert.

169
00:12:35,720 --> 00:12:44,860
Nun, offensichtlich ist das Rendering der Seite in unserem Browser immer noch schrecklich.

170
00:12:44,860 --> 00:12:49,230
Es ist besser als die typische Informatik-Professoren-Webseite,

171
00:12:49,230 --> 00:12:51,715
aber definitiv nicht lesbar.

172
00:12:51,715 --> 00:12:58,320
Wir müssen nun die verschiedenen CSS-Klassen und die

173
00:12:58,320 --> 00:12:59,910
JavaScript-Komponenten, die

174
00:12:59,910 --> 00:13:06,960
unser Bootstrap-Web-UI-Framework zur Verfügung stellt, in die Tat umsetzen, um unsere Webseite zu gestalten.

175
00:13:06,960 --> 00:13:12,720
So werden wir das Schritt für Schritt tun, während wir diese Übung durchlaufen.

176
00:13:12,720 --> 00:13:18,535
Dies kann eine bequeme Zeit für Sie sein, ein Git-Commit

177
00:13:18,535 --> 00:13:24,355
der von Ihnen vorgenommenen Änderungen durchzuführen, so dass am Ende dieser Übung

178
00:13:24,355 --> 00:13:36,610
Ihr Status Ihres Projektordners in Ihrem Git-Repository gespeichert wird.

179
00:13:36,610 --> 00:13:38,990
Wenn ich zu meinem ConFusion-Ordner in einer anderen Registerkarte meines Terminalfensters gehe,

180
00:13:38,990 --> 00:13:44,455
sehe ich jetzt, dass meine Datei index.html und das Paket der JSON-Datei geändert wurden.

181
00:13:44,455 --> 00:13:47,930
Also werde ich ein Commit machen.

182
00:13:59,540 --> 00:14:04,635
Also, jetzt

183
00:14:04,635 --> 00:14:10,610
wurde mein Status des Ordners am Ende dieser Übung in mein Git-Repository übertragen.

184
00:14:10,610 --> 00:14:13,920
Sie können diese mit Ihrem Online-Repository synchronisieren, sodass

185
00:14:13,920 --> 00:14:18,390
der Status Ihres Projekts an dieser Stelle gespeichert wird.

186
00:14:18,390 --> 00:14:24,955
Damit absolvieren wir unsere erste Bootstrap-Übung.

187
00:14:24,955 --> 00:14:33,210
Sie haben jetzt gesehen, wie wir Bootstrap für die Verwendung in unserem Webprojekt konfigurieren können.

188
00:14:33,210 --> 00:14:36,140
Während wir mit den nächsten Übungen fortfahren,

189
00:14:36,140 --> 00:14:42,470
werden wir die Bootstrap-Klassen beschäftigen, um unsere Webseiten zu gestalten.