1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 In dieser Übung werden wir uns die Unterstützung von Bootstrap für Schaltflächen und Formulare ansehen. 3 00:00:11,490 --> 00:00:17,293 Also werden wir ein paar Schaltflächen und Schaltflächengruppe in unsere Webseite aufnehmen. 4 00:00:17,293 --> 00:00:24,190 Und wir betrachten auch das Entwerfen von Formularen und das Styling der Formulare mit Bootstrap-Klassen. 5 00:00:25,780 --> 00:00:31,080 Um Sie zu beginnen, gehen Sie auf die Anweisungsseite und 6 00:00:31,080 --> 00:00:36,900 laden Sie die Datei contactus.html.zip herunter, die wir dort zur Verfügung gestellt haben. 7 00:00:36,900 --> 00:00:39,798 Klicken Sie also mit der rechten Maustaste darauf und 8 00:00:39,798 --> 00:00:44,969 speichern Sie diesen Link in Ihrem ConFusion-Ordner. 9 00:00:48,512 --> 00:00:49,568 Als, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip Datei. 11 00:01:01,598 --> 00:01:08,580 Und dann, sobald die ZIP-Datei heruntergeladen wird, entpacken Sie die Datei, um die Seite contactus.html zu erhalten. 12 00:01:09,740 --> 00:01:11,580 Dann können Sie die ZIP-Datei löschen. 13 00:01:13,440 --> 00:01:18,764 Sobald Sie die Datei entpackt und contactus.html Seite erhalten haben, 14 00:01:18,764 --> 00:01:23,084 würden Sie feststellen, dass, wenn Sie diese Seite in Ihrem 15 00:01:23,084 --> 00:01:28,107 Browser mit localhost: 3000/ contactus.html laden, 16 00:01:28,107 --> 00:01:34,748 dann würden Sie sehen, dass diese Seite bereits mit einigen Inhalten vorformatiert ist. 17 00:01:34,748 --> 00:01:38,550 So können Sie feststellen, dass Sie bereits die Navigationsleiste dort haben. 18 00:01:38,550 --> 00:01:42,846 Wir haben das Jumbotron bereits für uns formatiert. 19 00:01:42,846 --> 00:01:48,061 Und Sie würden bemerken, dass ich die Paniermehl und 20 00:01:48,061 --> 00:01:52,190 den Kontakt uns hier formatiert habe. 21 00:01:52,190 --> 00:01:57,730 Dann sehen Sie einige zusätzliche Informationen, die Adresse hier. 22 00:01:57,730 --> 00:02:04,180 Und Sie werden auch feststellen, dass die Fußzeile bereits formatiert ist. 23 00:02:04,180 --> 00:02:06,580 Aber Sie werden hier zwei Dinge bemerken, 24 00:02:06,580 --> 00:02:11,820 Sie werden feststellen, dass es hier eine Zeile gibt, die besagt, dass Schaltflächengruppen hier gehen und 25 00:02:11,820 --> 00:02:15,678 dann eine weitere Zeile hier, die sagt, Formular geht hier. 26 00:02:15,678 --> 00:02:20,280 Also werden wir diese beiden durch eine Schaltflächengruppe und ein Formular ersetzen. 27 00:02:20,280 --> 00:02:25,380 Und auf dem Weg, lernen Bootstrap Unterstützung für Schaltflächen und Formulare. 28 00:02:25,380 --> 00:02:31,015 Bevor wir fortfahren, jetzt, da wir drei Seiten auf unserer Website haben, 29 00:02:31,015 --> 00:02:34,585 ist es eine gute Idee für uns, sie miteinander zu verknüpfen, 30 00:02:34,585 --> 00:02:39,525 sowohl in der Navigationsleiste als auch in den Links in der Fußzeile. 31 00:02:39,525 --> 00:02:45,165 Lassen Sie uns diese beiden ändern, so dass wir leicht zwischen diesen drei Seiten navigieren können. Wenn Sie 32 00:02:45,165 --> 00:02:52,008 also auf die Seite contactus.html gehen, werden Sie feststellen, dass 33 00:02:52,008 --> 00:02:56,816 ich in der Navigationsleiste bereits die Links zu index.html richtig eingerichtet habe. 34 00:02:58,908 --> 00:03:03,568 Und Sie würden feststellen, dass 35 00:03:03,568 --> 00:03:08,450 Sie unten hier den Kontaktlink haben. 36 00:03:08,450 --> 00:03:15,550 Aber der Link, der dem Info entspricht, wurde nicht richtig konfiguriert. 37 00:03:15,550 --> 00:03:19,905 Gehen Sie also zu diesem Link hier und aktualisieren Sie das dann auf 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 Der Kontakt-uns-Link kann als solcher allein gelassen werden. 40 00:03:27,788 --> 00:03:31,050 Und dann speichern Sie die Änderungen. 41 00:03:31,050 --> 00:03:35,070 Wechseln Sie nun in ähnlicher Weise zur Fußzeile dieser Seite. 42 00:03:35,070 --> 00:03:40,975 Und Sie werden feststellen, dass wir in der Fußzeile diese drei Links hier haben. 43 00:03:40,975 --> 00:03:45,215 Und das kann ein guter Punkt sein, um die Links 44 00:03:45,215 --> 00:03:48,015 durch die Links zu den entsprechenden Seiten zu ersetzen. 45 00:03:48,015 --> 00:03:54,342 Also werde ich sagen, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 und, contactus.html. 47 00:03:59,665 --> 00:04:01,325 Und speichern Sie die Änderungen. 48 00:04:01,325 --> 00:04:08,117 In ähnlicher Weise gehen Sie zu index.html, und dann 49 00:04:08,117 --> 00:04:12,280 wurde in index.html auch der Kontakt-uns Link nicht eingerichtet. 50 00:04:12,280 --> 00:04:18,640 Lassen Sie uns das auf contactus.html aktualisieren. 51 00:04:18,640 --> 00:04:21,900 Und dann in ähnlicher Weise aktualisieren Sie die Links in der Fußzeile. 52 00:04:23,050 --> 00:04:27,258 Gehen Sie auch zu aboutus.html und reparieren Sie dann die Links auch dort. 53 00:04:27,258 --> 00:04:32,540 Also in der aboutus.html auch, in der Kopfzeile werde ich den Link reparieren. 54 00:04:37,461 --> 00:04:41,690 Und auch in der Fußzeile von aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Wenn Sie nun auf Ihre Website gehen, 56 00:04:44,050 --> 00:04:49,290 können Sie zurück zu Ihrer Startseite navigieren, zu Ihrer Info Seite. 57 00:04:49,290 --> 00:04:52,950 Und von der Über Seite können Sie sogar zur Kontaktseite zurückkehren. 58 00:04:52,950 --> 00:04:57,780 Also sollten alle Links zwischen den drei Seiten in den entsprechenden Kopfzeilen und 59 00:04:57,780 --> 00:05:01,480 auch den Fußzeilen hier eingerichtet werden. 60 00:05:01,480 --> 00:05:06,500 So dass, wenn Sie auf eine dieser klicken, werden Sie auf die entsprechende Seite. 61 00:05:08,190 --> 00:05:12,660 Jetzt ist es an der Zeit, mit der Arbeit an den Schaltflächen zu beginnen, die wir 62 00:05:12,660 --> 00:05:17,040 in unsere contactus.html Seite aufnehmen werden. 63 00:05:17,040 --> 00:05:23,060 Was ich also tun werde, ist, dass ich diese Zeile durch den Code für 64 00:05:23,060 --> 00:05:25,580 die Schaltfläche und die Schaltflächengruppe ersetzen 65 00:05:25,580 --> 00:05:30,465 werde und danach werden wir zurückkommen, um zu erklären, wie diese ganze Sache funktioniert. Wenn wir 66 00:05:30,465 --> 00:05:34,650 contactus.html in unserem Editor öffnen, 67 00:05:34,650 --> 00:05:40,402 werden wir den Ort finden, wo diese Anweisung, Schaltfläche Gruppe geht hier, existiert. 68 00:05:40,402 --> 00:05:44,230 Und dann werde ich das 69 00:05:44,230 --> 00:05:46,920 zuerst durch den Code ersetzen, der dieser Schaltflächengruppe entspricht. 70 00:05:46,920 --> 00:05:51,600 Und dann komme ich zurück, um zu erklären, wie dieser Code funktioniert. 71 00:05:51,600 --> 00:05:56,570 Lassen Sie uns also die Änderungen speichern und dann einen Blick darauf werfen, wie 72 00:05:56,570 --> 00:06:00,920 diese Schaltflächengruppe in unserem Browser aussieht. Wenn Sie 73 00:06:02,550 --> 00:06:07,224 zu Ihrem Browser gehen, können Sie nun sehen, dass 74 00:06:07,224 --> 00:06:12,310 auf unserer Webseite die Schaltflächengruppe erstellt wurde. 75 00:06:12,310 --> 00:06:15,040 So können Sie sehen, dass es hier drei Schaltflächen gibt, Anruf-, 76 00:06:15,040 --> 00:06:17,540 Skype- und E-Mail-Tasten. 77 00:06:17,540 --> 00:06:21,990 Jetzt sind alle diese drei zu einer einzigen Leiste oder 78 00:06:21,990 --> 00:06:26,800 Tastenleiste zusammengefügt oder was in Bootstrap Begriffen als Schaltflächengruppe bezeichnet wird. 79 00:06:26,800 --> 00:06:31,350 Schauen wir uns an, wie wir so etwas in 80 00:06:31,350 --> 00:06:32,390 Bootstrap-Code konstruieren. 81 00:06:33,530 --> 00:06:41,530 Also hier habe ich sowohl das Browserfenster als auch meinen Code nebeneinander geöffnet. 82 00:06:41,530 --> 00:06:44,990 Lassen Sie uns also einen Blick darauf werfen, wie wir diesen Schaltflächencode erstellen. 83 00:06:44,990 --> 00:06:48,536 Wenn Sie sich den Code ansehen, bemerken Sie, dass 84 00:06:48,536 --> 00:06:53,745 die Schaltflächen hier in einem div enthalten sind. 85 00:06:53,745 --> 00:06:57,060 Auf das div wenden wir die Klasse, btn-group an. 86 00:06:57,060 --> 00:07:02,255 Also, wenn Sie eine Gruppe von Schaltflächen haben, die Sie zusammenfügen und 87 00:07:02,255 --> 00:07:06,225 als eine Gruppe von Schaltflächen, als eine Leiste von Schaltflächen präsentieren möchten, 88 00:07:06,225 --> 00:07:10,990 dann würden Sie ein div mit der Schaltflächengruppenklasse und 89 00:07:10,990 --> 00:07:14,540 die Rolle als Gruppe hier zu diesem div verwenden. 90 00:07:14,540 --> 00:07:18,332 Jetzt werden Sie feststellen, dass ich das, a, 91 00:07:18,332 --> 00:07:20,550 -Tag verwende, um die drei Schaltflächen zu definieren. 92 00:07:20,550 --> 00:07:23,590 Also schauen wir uns an, wie wir die drei Schaltfläche definieren. 93 00:07:23,590 --> 00:07:26,430 Schauen wir uns an, wie wir die Schaltfläche Anrufen definieren. 94 00:07:26,430 --> 00:07:30,030 Diese bestimmte Zeile definiert also die Schaltfläche „Anrufen“. 95 00:07:30,030 --> 00:07:33,718 Also sage ich, eine, Rolle ist gleich Taste. 96 00:07:33,718 --> 00:07:38,375 Also dies, ein Tag hier, 97 00:07:38,375 --> 00:07:42,565 ich benutze es als einen Knopf hier. 98 00:07:42,565 --> 00:07:44,955 Deshalb gebe ich die Rolle als Schaltfläche an. 99 00:07:44,955 --> 00:07:46,545 Das ist also wichtig. 100 00:07:46,545 --> 00:07:49,591 Und dann schauen Sie sich die Klassen an, die ich dafür bewerbe. 101 00:07:49,591 --> 00:07:54,926 Also der erste ist btn Klasse. 102 00:07:54,926 --> 00:07:59,880 Die btn-Klasse ist die Bootstrap Button Klasse. 103 00:07:59,880 --> 00:08:03,720 So wird es das als klassische Bootstrap-Button angezeigt. 104 00:08:03,720 --> 00:08:07,300 Der zweite Teil sagt, ist btn-primär. 105 00:08:07,300 --> 00:08:10,940 Also, das ist, was die Farbe der Schaltfläche hier definiert. 106 00:08:10,940 --> 00:08:15,910 Also, in diesem Fall ist diese Tastenfarbe blau. 107 00:08:15,910 --> 00:08:18,750 Und so ist dies die primäre Farbe in Bootstrap. 108 00:08:18,750 --> 00:08:20,670 So bt-primär. 109 00:08:20,670 --> 00:08:25,510 Und dann schauen Sie sich die Verwendung des href hier an. 110 00:08:25,510 --> 00:08:30,850 Da dies ein A-Tag ist, kann ich ein href-Attribut in diesem A-Tag verwenden. 111 00:08:30,850 --> 00:08:33,610 Das href Attribut verweist also auf die Telefonnummer. 112 00:08:35,110 --> 00:08:40,940 Und dann folgendes bemerken Sie, dass ich hier ein Schriftartsymbol für das Telefon verwende. 113 00:08:40,940 --> 00:08:47,560 Deshalb habe ich i Klasse fa fa-phone und dann nach dem Wort Anruf. 114 00:08:47,560 --> 00:08:53,170 Dies ist also, was es ermöglicht, diesen 115 00:08:53,170 --> 00:08:58,550 blauen Knopf zu konstruieren, der hier in dieser Tastenleiste enthalten ist. 116 00:08:58,550 --> 00:09:04,150 In ähnlicher Weise bemerken Sie, dass dies auch Rollenschaltfläche sagt. 117 00:09:04,150 --> 00:09:07,795 Und dann, wenn du durchgehst, siehst du diese BTN-Info. 118 00:09:07,795 --> 00:09:12,235 BTN-Info gibt ihm eine Farbe von hellblau in der Farbe. 119 00:09:12,235 --> 00:09:18,665 So bezieht sich btn-info standardmäßig auf eine hellblaue Schaltfläche hier. 120 00:09:18,665 --> 00:09:22,975 Und dann können Sie sehen, dass ich das Skype hier definiert habe. 121 00:09:22,975 --> 00:09:28,172 Und dann die dritte, die, ist ein grüner Knopf dort mit E-Mail. 122 00:09:28,172 --> 00:09:34,542 Beachten Sie, dass ich Buchstaben a role = button class = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Also, wenn du btn-success sagst, wird das hier ein grüner Knopf sein. 124 00:09:38,132 --> 00:09:44,102 Sie haben also einige Farben, die bereits in Bootstrap definiert sind. 125 00:09:44,102 --> 00:09:48,322 Primär bezieht sich auf blau in für die erste, hellblaue Erfolg bezieht sich auf 126 00:09:49,390 --> 00:09:54,250 die grüne Farbe, dann haben Sie Warnung, die eine hellgelbe Farbe sein würde, und 127 00:09:54,250 --> 00:09:56,150 dann Gefahr, die eine rote Farbe ist. 128 00:09:56,150 --> 00:09:59,763 Dies sind also Standardfarben, die in Bootstrap eingerichtet wurden. 129 00:10:01,712 --> 00:10:06,602 Und dann das href Setup, mit dem mailto hier, und 130 00:10:06,602 --> 00:10:10,140 dann danach, haben Sie die. 131 00:10:11,972 --> 00:10:16,030 Schriftart als Symbol hier und dann die E-Mail dort. 132 00:10:16,030 --> 00:10:21,410 Also diese drei e-Tags, die derzeit als Schaltflächen fungieren, 133 00:10:21,410 --> 00:10:26,780 sind in der Seite jener div eingeschlossen, die als btn-Gruppe fungiert. 134 00:10:26,780 --> 00:10:32,100 So zeigen wir eine Gruppe von Schaltflächen in Bootstrap an. 135 00:10:32,100 --> 00:10:34,470 Wenn Sie nur eine einzelne Schaltfläche möchten, 136 00:10:34,470 --> 00:10:37,220 müssen Sie nur eine dieser Zeilen dort einschließen. 137 00:10:38,270 --> 00:10:41,130 Sie könnten also auch das Tasten-Tag verwenden. 138 00:10:41,130 --> 00:10:44,270 Wenn Sie das Button-Tag verwenden, müssen Sie die Rolle nicht angeben, 139 00:10:44,270 --> 00:10:46,730 stattdessen sagen Sie einfach „type button“. 140 00:10:46,730 --> 00:10:49,700 Weil eine Schaltfläche dort auch als Submit-Button fungieren könnte. 141 00:10:49,700 --> 00:10:54,140 Also später, in Formularen werden wir uns die Verwendung des Schaltflächen-Tags ansehen, 142 00:10:54,140 --> 00:10:57,040 um eine Schaltfläche zu erstellen, die in unserem Formular aufgenommen werden soll. 143 00:10:58,600 --> 00:11:03,900 Weiter mit der Übung, unser nächster Schritt wäre, mit 144 00:11:03,900 --> 00:11:08,790 der Entwicklung des Formulars zu beginnen, das wir in die Seite contactus.html aufnehmen werden. 145 00:11:08,790 --> 00:11:13,350 Wir werden es Schritt für Schritt tun, damit wir in jedem Schritt ein wenig lernen, 146 00:11:13,350 --> 00:11:17,610 wie Sie einige Elemente in ihre Form einbeziehen. 147 00:11:17,610 --> 00:11:24,480 Also, als Anfang, wenn Sie auf die Seite contactus.html gehen, 148 00:11:24,480 --> 00:11:29,430 genau dort, werden Sie diese Anweisung namens sehen, Formular geht hier. 149 00:11:29,430 --> 00:11:34,771 Nun, was ich tun werde, ist, dies von col-sm 150 00:11:34,771 --> 00:11:39,480 zu col-md zu ändern, so dass für 151 00:11:39,480 --> 00:11:44,290 extra kleine bis kleine Bildschirmgrößen meine Form angelegt wird, 152 00:11:44,290 --> 00:11:49,352 die die gesamte Breite des Bildschirms einnimmt, weil es col-xs-12 verwendet. 153 00:11:49,352 --> 00:11:53,024 Aber von mittlerer Größe Bildschirm auf Stationen, 154 00:11:53,024 --> 00:11:57,290 es wird nur 9 von den 12 Spalten besetzen. 155 00:11:57,290 --> 00:11:59,600 Lassen Sie uns also anfangen, das Formular zu konstruieren. 156 00:11:59,600 --> 00:12:05,470 Also, was ich tun werde, ist, dass ich das durch meinen ersten Teil Code ersetzen werde. 157 00:12:06,580 --> 00:12:11,300 Wir werden zwei Felder in unser Formular aufnehmen, für 158 00:12:11,300 --> 00:12:14,280 den Vor- und Nachnamen des Benutzers. 159 00:12:14,280 --> 00:12:17,440 Lassen Sie mich den Code hinzufügen, dann schauen wir uns das Ergebnis an. 160 00:12:17,440 --> 00:12:19,750 Und dann kommen wir zurück und untersuchen den Code. 161 00:12:19,750 --> 00:12:23,190 Also, fügen Sie den Code an diesem Punkt, 162 00:12:23,190 --> 00:12:27,820 wie immer diese Code-Snippets sind in den Anweisungen. 163 00:12:27,820 --> 00:12:30,510 Also, lassen Sie mich die Änderungen speichern. 164 00:12:30,510 --> 00:12:35,690 Und dann gehen wir zurück und schauen uns an, wie dieses Formular im Browser aussieht. 165 00:12:35,690 --> 00:12:40,250 Wenn Sie sich das Formular ansehen, werden Sie sehen, dass sie jetzt zwei Themen im Formular hier haben. 166 00:12:42,060 --> 00:12:46,790 Die erste, hat eine Beschriftung auf der linken Seite, 167 00:12:46,790 --> 00:12:49,780 die Vorname sagt, und dann haben Sie das Eingabefeld hier. 168 00:12:49,780 --> 00:12:52,800 Und dann der Nachname und dann ein Eingabefeld hier. 169 00:12:52,800 --> 00:12:56,710 Jetzt bemerken Sie auch, dass dieses Formular so ausgelegt ist, 170 00:12:56,710 --> 00:13:00,510 dass dieser Teil den Halbteil des Bildschirms einnimmt und 171 00:13:00,510 --> 00:13:03,620 der verbleibende Teil vom verbleibenden Teil des Bildschirms besetzt ist. 172 00:13:03,620 --> 00:13:08,400 Sie beginnen sich zu fragen, wie wir das machen? 173 00:13:09,720 --> 00:13:15,095 Hilft Bootstrap Grid uns, sich für diese Größen zu entscheiden. 174 00:13:15,095 --> 00:13:18,725 Das wäre eine sehr gute Frage für Sie, sich selbst zu stellen. 175 00:13:18,725 --> 00:13:21,695 Lassen Sie uns den Code sehen und verstehen, wie er aussieht. 176 00:13:21,695 --> 00:13:26,595 Bevor wir das tun, werfen wir einen Blick auf das gleiche Formularlayout, 177 00:13:26,595 --> 00:13:29,595 in der extra kleinen Bildschirmgröße. 178 00:13:29,595 --> 00:13:32,795 Also, auf die extra kleine Bildschirmgröße zu wechseln. 179 00:13:32,795 --> 00:13:34,425 Also gehen wir zum Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Sie bemerken, wie das Formular in der extra kleinen Bildschirmgröße ausgelegt ist. 181 00:13:40,060 --> 00:13:44,304 Also, Sie werden sehen, dass die Beschriftung oben ist, und 182 00:13:44,304 --> 00:13:50,590 dann das Feld selbst, Eingabefeld selbst ist die Unterseite, ähnlich für den Nachnamen. 183 00:13:50,590 --> 00:13:53,420 Also, Sie bemerken, dass Bootstrap. 184 00:13:53,420 --> 00:13:57,500 Übrigens stellt es diese Formularklassen zur Verfügung. 185 00:13:57,500 --> 00:14:02,460 Automatisch, macht Ihr Formular reaktionsschnell, so dass, wenn es 186 00:14:02,460 --> 00:14:07,450 auf verschiedenen Bildschirmgrößen ausgelegt ist, das Formular angemessen ausgelegt wird, 187 00:14:07,450 --> 00:14:12,550 so dass es nicht alle auf kleinen Bildschirmgrößen zerquetscht wird. 188 00:14:13,610 --> 00:14:17,220 Aber für größere Bildschirmgrößen, weil Sie größere Immobilien haben, 189 00:14:17,220 --> 00:14:23,480 sind Sie in der Lage, die Form zu dehnen, um den zusätzlichen Platz zu nutzen, den Sie haben. 190 00:14:24,830 --> 00:14:31,150 Werfen Sie einen Blick auf diesen Quellcode und das Formular nebeneinander, offensichtlich 191 00:14:31,150 --> 00:14:36,140 das erste, was Sie bemerken, ist, dass Ihr Formular mit dem Formular-Tag hier beginnt. 192 00:14:36,140 --> 00:14:40,160 Also, Formular und dann das abschließende Formular, Tag hier. 193 00:14:40,160 --> 00:14:45,970 Also, im Inneren beschreiben Sie die verschiedenen Teile Ihres Formulars. 194 00:14:45,970 --> 00:14:49,150 Lassen Sie uns also einen Blick darauf werfen, wie der Vorname konstruiert ist, 195 00:14:49,150 --> 00:14:54,390 sollte der Nachname offensichtlich, wie er aussieht, einen ähnlichen Ansatz verwenden. 196 00:14:54,390 --> 00:15:01,240 Also, in der Standardeinstellung, was Sie bemerken, ist, dass es hier ein div gibt. 197 00:15:01,240 --> 00:15:06,480 Div-Element hier, mit dem schließenden div hier. 198 00:15:06,480 --> 00:15:10,515 Dieses div-Element hat also eine Klasse namens form-group. 199 00:15:11,920 --> 00:15:15,108 Und dann gefolgt von einer Zeilenklasse. 200 00:15:15,108 --> 00:15:17,080 Also 201 00:15:17,080 --> 00:15:22,580 sagt die Form-Gruppen-Klasse im Wesentlichen, was in diesem Div ist, wird als eine Gruppe von Elementen behandelt. 202 00:15:22,580 --> 00:15:26,120 Und dann werden sie entsprechend angelegt. 203 00:15:26,120 --> 00:15:30,902 Und der zweite Teil, sehen Sie die Verwendung von Zeile hier. 204 00:15:30,902 --> 00:15:35,740 Sie würden also sehen, dass die Reihe der Bootstrap-Gruppe hier ins Spiel kommt. 205 00:15:35,740 --> 00:15:40,610 Und so kann diese spezielle Formulargruppe 206 00:15:40,610 --> 00:15:45,480 mit der Zeile und den Spaltenklassen, die Sie aus dem Bootstrap-Raster haben, angelegt werden. 207 00:15:45,480 --> 00:15:48,506 Also, wenn Sie die Zeile auf dieses div anwenden, 208 00:15:48,506 --> 00:15:52,956 was auch immer darin ist, können Sie die Spaltenklassen verwenden, 209 00:15:52,956 --> 00:15:58,741 um genau zu entscheiden, wie viel Platz jeder von ihnen auf dem Bildschirm einnehmen wird. 210 00:15:58,741 --> 00:16:05,390 Nun, das macht es klarer, so dass diese Form Gruppe umschließt. 211 00:16:05,390 --> 00:16:06,650 Diese Einheit. 212 00:16:06,650 --> 00:16:08,570 Wir werden diese Wiederholung immer und 213 00:16:08,570 --> 00:16:14,460 immer wieder sehen, wenn wir die verschiedenen Elemente der Form entwerfen. 214 00:16:14,460 --> 00:16:20,020 Dann, darunter, sehen Sie dieses Label-Tag hier. 215 00:16:20,020 --> 00:16:25,180 Für das label-Tag gibt es bestimmte Attribute, die ihm zugewiesen wurden. 216 00:16:25,180 --> 00:16:28,740 Sie sehen also, dass das Label-Tag einen für Vorname verwendet. 217 00:16:28,740 --> 00:16:33,650 Dieses Label ist also für etwas mit der ID Vorname. 218 00:16:33,650 --> 00:16:37,690 Also, was ist das Eingabefeld, das direkt darunter folgt. 219 00:16:37,690 --> 00:16:39,790 Wir werden uns das in kurzer Zeit ansehen. 220 00:16:39,790 --> 00:16:46,136 Und dann schauen Sie sich die Klassen an, die auf die Labelklasse col-md-2 angewendet werden. 221 00:16:46,136 --> 00:16:50,029 Das bedeutet also, dass für mittlere bis extra große Bildschirme 222 00:16:50,029 --> 00:16:56,040 dieses besondere Element 2 Spalten des Raumes einnehmen wird. 223 00:16:56,040 --> 00:16:57,884 Und dann notiere den anderen. 224 00:16:57,884 --> 00:17:00,764 Es steht, Col-Form-Label. 225 00:17:00,764 --> 00:17:05,957 Das col-form-label gibt also im Wesentlichen an 226 00:17:05,957 --> 00:17:11,780 , dass dieses Label positioniert werden sollte, um mit 227 00:17:11,780 --> 00:17:18,270 dem anderen Element, das Teil dieser Formulargruppe ist, ausgerichtet zu werden. 228 00:17:18,270 --> 00:17:20,576 Also, in diesem Fall, das Eingabefeld. 229 00:17:20,576 --> 00:17:24,508 Und so bedeutet das auch, dass 230 00:17:24,508 --> 00:17:29,868 das Etikett in der Mitte 231 00:17:29,868 --> 00:17:35,550 horizontal mit dem Eingabefeld aufgereiht wird. 232 00:17:35,550 --> 00:17:39,535 Das ist der Grund, warum wir die col-form-label-Klasse verwenden. 233 00:17:39,535 --> 00:17:43,725 Wenn Sie dies nicht anwenden, wird Ihre Beschriftung am 234 00:17:43,725 --> 00:17:48,185 oberen Rand Ihres Eingabefeldes ausgerichtet. 235 00:17:48,185 --> 00:17:53,551 Welche Ihre Form wird nicht so gut aussehen auf mittleren bis extra großen Bildschirmgrößen. 236 00:17:53,551 --> 00:17:59,727 Nun, auf der linken Seite, natürlich, weil dieses Browserfenster gequetscht ist, 237 00:17:59,727 --> 00:18:05,360 so dass es hier die Ansicht in einer kleinen oder extra kleinen Bildschirmgröße zeigt. 238 00:18:05,360 --> 00:18:11,650 Deshalb sehen Sie das Etikett, das sich hier oben im Eingabefeld stapelt. 239 00:18:11,650 --> 00:18:14,560 Dies ist also das Etikett, das angibt. 240 00:18:14,560 --> 00:18:18,380 Wenn Sie also ein Label haben, das Sie einem Element zuweisen möchten, 241 00:18:18,380 --> 00:18:20,890 so werden Sie das Label zuweisen. 242 00:18:20,890 --> 00:18:25,740 Unten hier unten sehen Sie eine div Klasse col-md-10. 243 00:18:25,740 --> 00:18:29,120 Dies nimmt also die restlichen 10 der 12 Spalten ein. 244 00:18:29,120 --> 00:18:31,670 Also zwei Spalten, die von der Beschriftung besetzt sind. 245 00:18:31,670 --> 00:18:36,070 Und die restlichen zehn Spalten, die von diesem besetzt sind, sind aber innerhalb des div eingeschlossen. 246 00:18:36,070 --> 00:18:38,230 Und in diesem div 247 00:18:38,230 --> 00:18:43,493 sehen Sie, dass es dort ein Eingabe-Tag-Element mit dem Typtext gibt. 248 00:18:43,493 --> 00:18:49,734 Das bedeutet also, dass dieses Eingabefeld Texteingaben akzeptiert. 249 00:18:49,734 --> 00:18:52,170 Und die Klasse, sieh dir die Klasse hier an. 250 00:18:52,170 --> 00:18:54,800 Es steht Form-Kontrolle. 251 00:18:54,800 --> 00:18:57,730 Dies ist wichtig, um hier auf das Eingabefeld anzuwenden. 252 00:18:57,730 --> 00:19:01,301 Also Form-Steuerung und ID Vorname. 253 00:19:01,301 --> 00:19:04,550 Und der Name, der Vorname ist. 254 00:19:04,550 --> 00:19:07,630 Dann Platzhalter Vorname. 255 00:19:07,630 --> 00:19:12,840 Der Platzhalter ist also das, was innerhalb des Feldes als Platzhalter für 256 00:19:12,840 --> 00:19:14,610 das Eingabefeld angezeigt wird. 257 00:19:14,610 --> 00:19:17,470 Also sind alle diese Attribute zugewiesen. 258 00:19:17,470 --> 00:19:18,690 Noch wichtiger ist, 259 00:19:18,690 --> 00:19:23,810 beachten Sie die Verwendung der Form-Control-Klasse, die auf den Eingabetyp angewendet wird. 260 00:19:23,810 --> 00:19:29,960 So strukturieren Sie diese beiden Elemente in Ihrem Formular. 261 00:19:29,960 --> 00:19:35,425 Für kleine Bildschirmgrößen und darunter, stapelt es die beiden Dinge. 262 00:19:35,425 --> 00:19:37,118 Aber für mittlere bis extra große, 263 00:19:37,118 --> 00:19:41,500 haben Sie gesehen, dass es sie horizontal nebeneinander positioniert. 264 00:19:41,500 --> 00:19:45,645 Dasselbe gilt auch für den Nachnamen-Code. 265 00:19:45,645 --> 00:19:49,670 Es wird sehr ähnlich sein, wie der Vorname strukturiert ist. 266 00:19:49,670 --> 00:19:54,380 Also möchte ich, dass Sie ein wenig Zeit damit verbringen, sich diesen Code auch anzuschauen. 267 00:19:54,380 --> 00:19:58,150 So dass Sie sehen, basierend auf Ihrem Verständnis davon, 268 00:19:58,150 --> 00:20:00,230 wie dies auch formatiert ist. 269 00:20:01,550 --> 00:20:08,360 Die nächste Art von formalem Ereignis, das wir hinzufügen werden, ist ein Eingabegruppenelement. 270 00:20:08,360 --> 00:20:09,330 Lassen Sie mich den Code hinzufügen. 271 00:20:09,330 --> 00:20:13,111 Wir werden uns ansehen, wie sich das Formular herausstellt. 272 00:20:13,111 --> 00:20:15,560 Und dann gehen wir zurück und untersuchen den Code. 273 00:20:15,560 --> 00:20:19,542 Also genau hier, nach dem zweiten div, nach dem Nachname-Feld, 274 00:20:19,542 --> 00:20:24,840 werde ich den Code für das nächste Element hier einfügen. 275 00:20:25,880 --> 00:20:28,142 Und dann speichern wir die Änderungen. 276 00:20:28,142 --> 00:20:30,466 Und dann, sofort, 277 00:20:30,466 --> 00:20:36,360 würden Sie ein paar weitere Dinge in Ihr Formular aufgenommen sehen. 278 00:20:36,360 --> 00:20:38,975 Hier wird ein Rufnummernfeld hinzugefügt. 279 00:20:38,975 --> 00:20:42,985 Dies, aus dem Aussehen, sehen Sie, dass dies sehr ähnlich ist. 280 00:20:42,985 --> 00:20:45,335 Also werde ich den Code dafür nicht erklären. 281 00:20:45,335 --> 00:20:48,110 Das sollte sehr einfach für Sie sein zu verstehen. 282 00:20:48,110 --> 00:20:52,073 Und dann sollte dieses E-Mail-Feld auch sehr einfach für 283 00:20:52,073 --> 00:20:53,747 Sie sein zu verstehen. 284 00:20:53,747 --> 00:20:56,537 Weil dies dem Nachnamen sehr ähnlich aussieht. 285 00:20:56,537 --> 00:21:02,477 Abgesehen davon, dass für diese, das Eingabefeld, der Typ wird auf E-Mail gesetzt. 286 00:21:02,477 --> 00:21:06,739 So dass die eingebauten Formularprüffunktionen 287 00:21:06,739 --> 00:21:10,094 Ihres Browsers automatisch in Kraft treten. 288 00:21:10,094 --> 00:21:14,113 Wenn Sie also etwas eingeben, das nicht wie eine E-Mail aussieht, 289 00:21:14,113 --> 00:21:16,860 dann wird es sich angemessen beschweren. 290 00:21:16,860 --> 00:21:21,780 Lassen Sie uns also diesen bestimmten Teil des Formulars hier untersuchen. 291 00:21:21,780 --> 00:21:27,500 Beachten Sie, dass wir in diesem Fall in der linken Klammer und 292 00:21:27,500 --> 00:21:31,430 der rechten Klammer zu diesem bestimmten Eingabefeld hinzufügen. 293 00:21:31,430 --> 00:21:36,570 Wie fügst du solche Dinge in deine Box ein? 294 00:21:36,570 --> 00:21:41,330 Wenn Sie sich den Code hier in Ihrem Editor ansehen, 295 00:21:41,330 --> 00:21:45,750 sehen Sie, dass Sie immer noch die Formulargruppenzeile haben, die Sie bereits verstehen. 296 00:21:45,750 --> 00:21:50,942 Und unten hier unten haben Sie Eingabetyp-Formularelement id telnum, 297 00:21:50,942 --> 00:21:54,460 und so weiter, was Ihnen auch sehr klar sein sollte. 298 00:21:54,460 --> 00:21:57,360 Also glaube ich nicht, dass ich dir diesen Teil erklären muss. 299 00:21:57,360 --> 00:22:04,366 Beachten Sie, wie ich die Grid-Spaltenklassen des Bootstrap für jede dieser Klassen verwende. 300 00:22:04,366 --> 00:22:08,060 So wird das Etikett col-md-2 gegeben. 301 00:22:08,060 --> 00:22:12,062 Und dann wird die Telefonnummer eins 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 und col-md-7 hier gegeben. 303 00:22:16,880 --> 00:22:23,100 So ist die Telefonnummer, dieses Element richtig positioniert. 304 00:22:23,100 --> 00:22:27,310 Aber insbesondere lassen Sie uns auf diesen Teil achten. 305 00:22:27,310 --> 00:22:31,470 Also dieser hier ist in diesem div. 306 00:22:32,670 --> 00:22:36,250 Beachten Sie also in diesem div die Klasse, die ihm gegeben wurde. 307 00:22:36,250 --> 00:22:38,689 Die Klasse sagt Input-Gruppe. 308 00:22:38,689 --> 00:22:43,587 Im Wesentlichen bedeutet, dass was immer in diesem div ist, 309 00:22:43,587 --> 00:22:45,350 hier als eine Gruppe von Elementen behandelt wird. 310 00:22:45,350 --> 00:22:49,030 Deshalb ist die angegebene Klasse Input-group. 311 00:22:49,030 --> 00:22:53,600 Nun, um so etwas hinzuzufügen, verwenden Sie 312 00:22:53,600 --> 00:22:59,000 eine Klasse namens Input-group-Addon. 313 00:22:59,000 --> 00:23:04,490 Und dann bemerken Sie, dass ich ein div verwende, um dieses Element zu halten. 314 00:23:04,490 --> 00:23:08,200 Ich kann hier alles verwenden, aber ein div ist hier nützlich. 315 00:23:08,200 --> 00:23:12,980 Also sage ich div Klasse Input-Group-Addon. 316 00:23:12,980 --> 00:23:16,250 Und dann der schließende div-Typ innen, wo, 317 00:23:16,250 --> 00:23:18,500 beachten Sie, dass ich die linke Klammer habe. 318 00:23:18,500 --> 00:23:25,477 So können Sie 319 00:23:25,477 --> 00:23:30,963 hier ein zusätzliches Anhängsel zu Ihrem Eingabefeld hinzufügen. 320 00:23:30,963 --> 00:23:38,390 In ähnlicher Weise ist die hier unten auch ein Eingabe-Group-Addon rechte Klammer. 321 00:23:38,390 --> 00:23:42,350 Das ist also, was die andere rechte Klammer hier hinzufügt. 322 00:23:42,350 --> 00:23:46,270 Nun, zwischen diesen beiden, natürlich, haben Sie den Eingabetyp. 323 00:23:46,270 --> 00:23:51,094 Die Eingabe mit dem Typ tel und Klasse Form-Steuerung, ID, Name, 324 00:23:51,094 --> 00:23:54,310 Platzhalter, alles hier vorhanden. 325 00:23:54,310 --> 00:23:57,190 Das ist also nichts anderes als der Vorwahlteil. 326 00:23:57,190 --> 00:24:02,049 Also, wenn Sie diese Eingabegruppe zusammen mit Eingabe-Group-Addons 327 00:24:02,049 --> 00:24:04,440 wie diese auf beiden Seiten verwenden. 328 00:24:04,440 --> 00:24:10,070 Diese Dinge werden zu Ihrem Eingabeelement wie folgt hinzugefügt. 329 00:24:10,070 --> 00:24:15,880 Das bietet Ihnen eine schöne Möglichkeit, Ihr Formular mit einigen hinzugefügt zu entwerfen. 330 00:24:15,880 --> 00:24:20,170 Wenn Sie beispielsweise ein Feld haben, das 331 00:24:22,450 --> 00:24:27,360 Geld als Eingabe akzeptiert, können Sie einfach ein Dollarzeichen auf der linken Seite hinzufügen, um 332 00:24:27,360 --> 00:24:33,050 dem Benutzer anzuzeigen, dass es sich um ein Feld handelt, das momentan einen Währungswert annimmt. 333 00:24:33,050 --> 00:24:37,558 Momentan nimmt dieses Feld in diesem Fall eine Vorwahl ein. 334 00:24:37,558 --> 00:24:43,330 Und wenn Sie sehen, wie die Vorwahlnummern in den Vereinigten Staaten und 335 00:24:43,330 --> 00:24:47,640 Kanada geschrieben sind, wissen Sie, dass sie in der linken und rechten Klammer eingeschlossen sind. 336 00:24:47,640 --> 00:24:52,680 Also, das erlaubt mir, so etwas in meiner Form dort anzugeben. 337 00:24:53,900 --> 00:24:56,460 Meine nächste Gruppe von Elementen, die ich meinem 338 00:24:56,460 --> 00:25:01,530 Formular hinzufügen werde, sind ein Kontrollkästchen und eine Auswahl. 339 00:25:01,530 --> 00:25:03,460 Also, wie fügen wir das hinzu? 340 00:25:03,460 --> 00:25:09,014 Wenn Sie also mit HTML-Formularen vertraut sind, verstehen Sie, wie Select funktioniert, und 341 00:25:09,014 --> 00:25:13,070 Sie verstehen, wie Kontrollkästchen in HTML-Formularen funktionieren. 342 00:25:13,070 --> 00:25:15,880 Bootstrap bietet Ihnen nun einige zusätzliche 343 00:25:15,880 --> 00:25:20,080 Klassen, mit denen Sie diese Elemente entsprechend formatieren können. 344 00:25:20,080 --> 00:25:21,740 Also, lassen Sie mich das Zitat hinzufügen. 345 00:25:23,400 --> 00:25:25,120 Speichern wir die Änderungen. 346 00:25:25,120 --> 00:25:29,695 Werfen Sie einen Blick auf das Ergebnis im Formular hier. 347 00:25:29,695 --> 00:25:32,480 Und dann werfen Sie einen Blick auf den Code. 348 00:25:32,480 --> 00:25:38,060 Hier sehen Sie, dass ich ein Kontrollkästchen und eine Nachricht hier habe. 349 00:25:38,060 --> 00:25:45,372 Und dann ist dies ein Selektor, mit dem ich hier eine Reihe von Optionen auswählen kann. 350 00:25:47,324 --> 00:25:53,309 Jetzt ist das Formular, wie es hier existiert, was Sie in kleinen und 351 00:25:53,309 --> 00:25:56,080 extra kleinen Bildschirmgrößen sehen werden. 352 00:25:56,080 --> 00:25:59,940 Werfen wir einen Blick auf es auf einer größeren Bildschirmgröße. 353 00:25:59,940 --> 00:26:04,740 Die gleiche Form, wenn sie auf mittleren bis extra großen 354 00:26:04,740 --> 00:26:06,760 Bildschirmgrößen ausgelegt wird, sieht so aus. 355 00:26:06,760 --> 00:26:11,440 So können Sie sehen, wie die Kontakttelefonnummer hier positioniert ist, 356 00:26:11,440 --> 00:26:14,500 und E-Mail wird hier positioniert. 357 00:26:14,500 --> 00:26:19,825 Beachten Sie also, dass diese Etiketten 358 00:26:19,825 --> 00:26:26,510 bis zu einer Linie in der Mitte mit den Boxen hier gereiht sind. 359 00:26:26,510 --> 00:26:32,640 Das ist es, was die Col-Form-Label-Klasse zuerst erreicht. 360 00:26:32,640 --> 00:26:36,940 Konzentrieren wir uns auf das, was wir gerade hinzugefügt haben. 361 00:26:36,940 --> 00:26:40,060 Hier sehen wir, dass wir ein Kontrollkästchen hinzugefügt haben. 362 00:26:40,060 --> 00:26:43,312 Und dann ein Textfeld hier. 363 00:26:43,312 --> 00:26:44,650 Dürfen wir Sie kontaktieren? 364 00:26:44,650 --> 00:26:51,370 So würden Sie zum Beispiel erwarten, dass der Benutzer es entweder ein- und auscheckt. 365 00:26:51,370 --> 00:26:53,500 Was ist der Grund für ein Kontrollkästchen? 366 00:26:53,500 --> 00:26:56,330 In ähnlicher Weise könnten Sie Optionsfelder haben. 367 00:26:56,330 --> 00:27:02,020 Bootstrap unterstützt Optionsfelder, die in HTML-Formularen verfügbar sind. 368 00:27:02,020 --> 00:27:05,650 Und stellen Sie einige Klassen bereit, um sie richtig zu stylen. 369 00:27:05,650 --> 00:27:10,850 Und dann ist dies natürlich der Selektor, mit dem Sie zwischen den Auswahlmöglichkeiten auswählen können. 370 00:27:10,850 --> 00:27:13,113 Also gehen Sie zurück und schauen Sie sich den Code an. 371 00:27:13,113 --> 00:27:15,250 Mal sehen, wie dies implementiert wird. Wenn Sie 372 00:27:16,340 --> 00:27:22,030 zurückkommen, um einen Blick auf den Code zu werfen, sehen Sie, dass dieser hier wieder ein 373 00:27:22,030 --> 00:27:28,630 Formulargruppenzeilendiv ist, das hier zwei Dinge umschließt. 374 00:27:28,630 --> 00:27:32,859 Eins ist ein Form-Check 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 Das ist also, was ein Kontrollkästchen in diesem div-Element einschließt. 377 00:27:45,120 --> 00:27:53,902 Und dann unten hier unten habe ich eine div-Klasse, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Beachten Sie also, dass hier Form-Check col-md-6 offset-md-2 sagt. 379 00:27:59,979 --> 00:28:04,197 Der Grund, warum ich ein Offset-md-2 mache, ist, dass ich kein Label habe. 380 00:28:04,197 --> 00:28:08,166 Also benutzte ich normalerweise zwei Spalten für die Beschriftungen. 381 00:28:08,166 --> 00:28:13,160 Also, da dieses Kontrollkästchen sollte sich auf der rechten Seite im Formular ausrichten. 382 00:28:13,160 --> 00:28:16,591 Deshalb habe ich hier offset-md-2 verwendet. 383 00:28:16,591 --> 00:28:22,654 Und dann drinnen heißt es label class = „form-check-label“. 384 00:28:22,654 --> 00:28:28,042 Und dann bietet es Eingabe-Tag 385 00:28:28,042 --> 00:28:32,790 hier mit Typ-Checkbox. 386 00:28:32,790 --> 00:28:35,070 So erstellen Sie ein Kontrollkästchen. 387 00:28:35,070 --> 00:28:38,300 Und dann ist die Klasse, die Bootstrap-Klasse, die Sie auf 388 00:28:38,300 --> 00:28:41,768 Ihre Checkbox anwenden werden, Form-Check-Input. 389 00:28:41,768 --> 00:28:49,390 Und dann ist der Name und der Anfangswert leer. 390 00:28:49,390 --> 00:28:54,262 Und dann ist dies das eigentliche Label, das Sie sehen, 391 00:28:54,262 --> 00:28:58,670 dass es auf dieses bestimmte Kontrollkästchen angewendet wird. 392 00:28:58,670 --> 00:29:04,260 Beachten Sie also, wie diese beiden hier in einem Label-Tag eingeschlossen sind. 393 00:29:04,260 --> 00:29:09,070 So erstellen Sie also ein Kontrollkästchen zusammen mit seiner Beschriftung und 394 00:29:09,070 --> 00:29:12,980 positionieren dieses dann in Ihrem Formular hier. 395 00:29:12,980 --> 00:29:15,840 Dies verwendet also hier Form-Check-Label. 396 00:29:15,840 --> 00:29:19,880 Und dann müssen Sie hier ein Kontrollkästchen, Eingabetyp = „Checkbox“ haben und sich 397 00:29:19,880 --> 00:29:21,340 dann selbst beschriften. 398 00:29:21,340 --> 00:29:23,620 Also hier sehen Sie stark, können wir Sie kontaktieren? 399 00:29:23,620 --> 00:29:29,770 Deshalb wird es in Fettschrift direkt neben dem Kontrollkästchen hier angezeigt. 400 00:29:29,770 --> 00:29:37,390 Jetzt unten im Code haben Sie eine div-Klasse col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Dies nimmt also drei Spalten innerhalb eines Spaltenversatzes ein. 402 00:29:40,760 --> 00:29:42,980 Also die Summe von vier Spalten hier. 403 00:29:42,980 --> 00:29:50,113 Das ist also col-md-6 plus 2, also acht Spalten. 404 00:29:50,113 --> 00:29:51,480 Also 8 plus 4, 12. 405 00:29:51,480 --> 00:29:55,140 So kümmert sich das um Ihre 12 Spalten für Ihr Raster dort. 406 00:29:55,140 --> 00:30:01,740 Jetzt in diesem, sehen Sie eine Auswahl hier angewendet. 407 00:30:02,880 --> 00:30:07,320 Nun ist dies die Auswahloption, die HTML-Dateiformulare unterstützen. 408 00:30:07,320 --> 00:30:09,240 Und schauen Sie sich die Klasse an, die darauf angewendet wurde. 409 00:30:09,240 --> 00:30:12,870 Es sagt class = „form-control“ zur Auswahl. 410 00:30:12,870 --> 00:30:15,830 Und dann geben Sie die Optionen in der Auswahl hier. 411 00:30:15,830 --> 00:30:18,638 Also