1 00:00:03,730 --> 00:00:06,755 In den vorangegangenen Vorträgen 2 00:00:06,755 --> 00:00:12,055 haben wir etwas über Responsive Design und das Bootstrap Grid System gelernt. 3 00:00:12,055 --> 00:00:18,050 Wir haben gesehen, wie das Bootstrap-Grid es uns ermöglicht, responsive Websites zu entwerfen. 4 00:00:18,050 --> 00:00:21,890 Es ist an der Zeit, dass wir mit der nächsten Übung fortfahren. 5 00:00:21,890 --> 00:00:27,755 Wir beginnen mit der Index-HTML-Seite zu arbeiten, die wir in 6 00:00:27,755 --> 00:00:34,945 unserer vorherigen Übung erstellt haben, und wenden die Bootstrap-Grid-Klassen an, um sie reaktionsschnell zu machen. 7 00:00:34,945 --> 00:00:40,760 Wenn wir einen kurzen Blick auf unsere Webseite im Browser werfen, sehen wir, dass 8 00:00:40,760 --> 00:00:46,415 es immer noch schrecklich ist, obwohl die Schriftarten ein wenig verbessert haben, 9 00:00:46,415 --> 00:00:50,645 und wir verwenden jetzt die Bootstraps Standardschriftarten. 10 00:00:50,645 --> 00:01:00,930 Lassen Sie uns nun versuchen, die Bootstrap-Grid-Klassen auf index.html anzuwenden, um ihr Layout zu verbessern. 11 00:01:00,930 --> 00:01:03,805 Gehen Sie auf die Seite index.html und 12 00:01:03,805 --> 00:01:07,960 lassen Sie mich schnell auf diese bestimmte Zeile auf der 13 00:01:07,960 --> 00:01:12,805 Seite index.html aufmerksam machen, die wir bereits in der vorherigen Übung enthalten haben. 14 00:01:12,805 --> 00:01:14,660 Ich hatte auf diese Zeile Bezug genommen, 15 00:01:14,660 --> 00:01:17,065 dann sprachen wir über das Bootstrap-Grid-System. 16 00:01:17,065 --> 00:01:23,895 Also hier sehen wir, dass wir die Meta-Tags mit einem View-Port und dem Inhalt, 17 00:01:23,895 --> 00:01:26,090 Breite als Gerätebreite, 18 00:01:26,090 --> 00:01:29,205 und Anfangsmaßstab eins und schrumpfen auf Nein angegeben haben. 19 00:01:29,205 --> 00:01:33,210 Dieses Meta-Tag ermöglicht es uns, 20 00:01:33,210 --> 00:01:39,225 unsere Webseite reaktionsschnell zu machen, indem wir den View-Port-Charakter betrachten. 21 00:01:39,225 --> 00:01:42,630 Vorwärts zum nächsten Schritt. 22 00:01:42,630 --> 00:01:49,080 Wir werden auf den Hauptteil dieser index.html Seite rollen 23 00:01:49,080 --> 00:01:54,570 und dann das erste div nachschlagen, das direkt unter dem Header-Tag kommt, 24 00:01:54,570 --> 00:02:00,480 zu diesem div werden Sie den Klassencontainer anwenden. 25 00:02:00,480 --> 00:02:05,550 In der vorangegangenen Vorlesung haben wir bereits etwas über die Containerklasse erfahren. 26 00:02:05,550 --> 00:02:09,125 Sobald wir also die Container-Klasse anwenden, 27 00:02:09,125 --> 00:02:12,410 dann sehen wir, 28 00:02:12,410 --> 00:02:16,620 dass ein Teil des Inhalts direkt dort sich bereits angepasst hat. 29 00:02:16,620 --> 00:02:23,080 Schau dir den Unterschied zwischen dem Inhalt hier oben und dem unten an. 30 00:02:23,080 --> 00:02:25,370 Jetzt 31 00:02:25,370 --> 00:02:30,960 ist dieser Inhalt unten hier unten, in der Fußzeile unserer index.html Seite und dieser Inhalt ist in der Kopfzeile. 32 00:02:30,960 --> 00:02:36,890 Aber dieser Inhalt in der Mitte ist der eigentliche Inhalt unserer Webseite, 33 00:02:36,890 --> 00:02:40,785 dh innerhalb des div, auf das wir den Container anwenden. Wenn Sie 34 00:02:40,785 --> 00:02:47,480 also die Container-Klasse anwenden, können Sie sofort sehen, dass 35 00:02:47,480 --> 00:02:50,700 die Breite der Seite, in der unser Inhalt ausgelegt ist, jetzt 36 00:02:50,700 --> 00:02:54,660 geschrumpft ist, und dann haben Sie noch etwas zusätzlichen Platz auf beiden Seiten. Wenn 37 00:02:54,660 --> 00:02:58,935 diese Containerbreite ein Container mit fester Größe ist, 38 00:02:58,935 --> 00:03:02,330 wird unser Inhalt auf diese besondere Breite auf 39 00:03:02,330 --> 00:03:07,425 dem Bildschirm so dass genügend Rand auf beiden Seiten als Leerraum. 40 00:03:07,425 --> 00:03:13,315 Lassen Sie uns dieselbe Containerklasse sowohl auf die Kopf- als auch auf die Fußzeile anwenden 41 00:03:13,315 --> 00:03:17,355 und dann sehen, wie sich der Inhalt ändert. 42 00:03:17,355 --> 00:03:20,200 Zurück zu unserer Webseite, 43 00:03:20,200 --> 00:03:24,940 was ich jetzt tun werde, ist für den inneren Inhalt hier, 44 00:03:24,940 --> 00:03:28,165 das innere div innerhalb des Containers, 45 00:03:28,165 --> 00:03:34,110 ich werde die Klasse als Zeilenklasse hier anwenden, 46 00:03:34,110 --> 00:03:35,885 auf diese erste, 47 00:03:35,885 --> 00:03:38,125 und ich werde dies einfach kopieren. 48 00:03:38,125 --> 00:03:44,675 Ich werde das gleiche auf das zweite div hier anwenden, das für das div aufgereiht ist, 49 00:03:44,675 --> 00:03:49,230 und scrollen Sie auch nach unten und dann zum dritten div hier, 50 00:03:49,230 --> 00:03:51,375 ich wende auch die Zeilenklasse hier an. 51 00:03:51,375 --> 00:03:56,110 Also, jetzt 52 00:03:56,110 --> 00:03:57,950 ist der Inhalt in dieser äußersten Container-Klasse jetzt in drei Zeilen unterteilt, 53 00:03:57,950 --> 00:04:01,395 was auch immer hier drin ist, wird eine Zeile sein, 54 00:04:01,395 --> 00:04:02,640 was auch immer hier drin ist, 55 00:04:02,640 --> 00:04:06,150 wird die zweite Zeile sein und die hier drin wird die dritte Zeile sein. 56 00:04:06,150 --> 00:04:10,380 Wir werden später die Spaltenklassen darauf anwenden. 57 00:04:10,380 --> 00:04:17,695 Lassen Sie uns nun auf den Header in unserem index.html Körper bewegen. 58 00:04:17,695 --> 00:04:23,970 Und auf den Header werde ich eine Klasse anwenden, die als Jumbotron bezeichnet wird. 59 00:04:23,970 --> 00:04:28,265 Die Jumbotron-Komponente ermöglicht es Ihnen, 60 00:04:28,265 --> 00:04:33,805 den Inhalt innerhalb des Jumbotron vom Rest der Seite zu trennen. 61 00:04:33,805 --> 00:04:39,035 Wir werden das Ergebnis in kurzer Zeit sehen, wenn wir auf der resultierenden Webseite. 62 00:04:39,035 --> 00:04:42,215 Nun, zum div in diesem Header, 63 00:04:42,215 --> 00:04:46,360 werde ich die Klasse als Container anwenden, 64 00:04:46,360 --> 00:04:49,410 so dass alles, was sich im Inhalt befindet, 65 00:04:49,410 --> 00:04:52,945 jetzt durch die Containerbreite dort eingeschränkt wird. 66 00:04:52,945 --> 00:04:57,670 In ähnlicher Weise, wenn ich hier 67 00:04:58,780 --> 00:05:01,650 in der Fußzeile auch in der Fußzeile, 68 00:05:01,650 --> 00:05:04,720 dem ersten div in der Fußzeile, 69 00:05:04,720 --> 00:05:09,360 gehe ich die Klasse als Container an. 70 00:05:09,360 --> 00:05:13,055 Und das div drin, 71 00:05:13,055 --> 00:05:16,755 ich werde die Klasse als Reihe dort 72 00:05:16,755 --> 00:05:19,735 auf das div dort anwenden. 73 00:05:19,735 --> 00:05:25,225 Also wird dieses div uns den ganzen Weg zu diesem speziellen div hier bringen. 74 00:05:25,225 --> 00:05:29,105 Und dann das nächste div auch, das direkt darunter ist, 75 00:05:29,105 --> 00:05:31,820 werde ich die Klasse als Zeile anwenden. 76 00:05:31,820 --> 00:05:35,380 Jetzt enthält meine Fußzeile hier zwei Zeilen, 77 00:05:35,380 --> 00:05:38,520 wir werden den Inhalt mit Spalte formatieren, 78 00:05:38,520 --> 00:05:40,110 Klassen in kurzer Zeit. Wenn ich 79 00:05:40,110 --> 00:05:42,365 auch zum Header gehe, 80 00:05:42,365 --> 00:05:51,500 werde ich die Zeilenklasse auf das zweite div innerhalb des Container-div hier anwenden. 81 00:05:51,500 --> 00:05:54,920 Also dieses div, das mit mir übereinstimmt, 82 00:05:54,920 --> 00:05:58,605 wird eine einzelne Zeile in der Kopfzeile sein. 83 00:05:58,605 --> 00:06:02,400 Werfen wir einen Blick auf unsere resultierende Webseite. Wenn Sie 84 00:06:02,400 --> 00:06:04,365 auf unsere Webseite gehen, 85 00:06:04,365 --> 00:06:09,300 können Sie nun sehen, dass sich der Header-Inhalt jetzt von 86 00:06:09,300 --> 00:06:14,935 dem Rest in dieser grauen Box oben hier abhebt. 87 00:06:14,935 --> 00:06:22,735 Aber der Inhalt selbst ist jetzt mit dem Inhalt unten hier aufgereiht. 88 00:06:22,735 --> 00:06:25,685 Dies ist das Ergebnis der Verwendung des Containers. 89 00:06:25,685 --> 00:06:27,550 Wenn Sie in die Fußzeile wechseln, 90 00:06:27,550 --> 00:06:32,635 können Sie nun sehen, dass der Fußzeileninhalt jetzt auch innerhalb des Containers aufgereiht ist. 91 00:06:32,635 --> 00:06:36,800 Aber die Seite sieht immer noch nicht so toll aus, 92 00:06:36,800 --> 00:06:44,705 wir werden jetzt die Spaltenklassen auf die inneren divs anwenden. Wenn wir 93 00:06:44,705 --> 00:06:48,665 auf die Seite index.html zurückgehen, 94 00:06:48,665 --> 00:06:51,865 beginnen wir jetzt mit der Anwendung der Spaltenklassen. 95 00:06:51,865 --> 00:06:58,365 Gehen Sie also zum Header, zum zweiten inneren div innerhalb des Jumbotron hier, 96 00:06:58,365 --> 00:07:06,230 lassen Sie mich eine Klasse als Spalte 12, Spalte sm-6 anwenden. 97 00:07:06,230 --> 00:07:09,960 Also, hier 98 00:07:09,960 --> 00:07:15,525 wird der Inhalt in diesem ersten div die gesamte Zeile für extra kleine Bildschirmgrößen 99 00:07:15,525 --> 00:07:18,770 einnehmen und dann die Hälfte der Zeile einnehmen, deshalb Spalte 100 00:07:18,770 --> 00:07:24,235 sm-6 für kleine bis extra große Bildschirmgrößen. 101 00:07:24,235 --> 00:07:26,480 Nun, ähnlich für das zweite div hier, 102 00:07:26,480 --> 00:07:28,715 obwohl es dort keinen Inhalt enthält, 103 00:07:28,715 --> 00:07:37,840 werde ich die Spaltenklassen hier als Spalte 12 und dann Spalte sm definieren. 104 00:07:37,840 --> 00:07:40,990 Beachten Sie also, dass 105 00:07:40,990 --> 00:07:45,270 ich hier durch Angabe von Spalte 12 explizit feststelle, dass für extra kleine Bildschirmgrößen, was auch immer Inhalt 106 00:07:45,270 --> 00:07:49,860 in diesem div ist, unter dem Inhalt über hier gestapelt wird. 107 00:07:49,860 --> 00:07:54,150 Und dann für kleine bis extra große Bildschirmgrößen 108 00:07:54,150 --> 00:07:59,270 wird dieser Inhalt die übrige Anzahl an 109 00:07:59,270 --> 00:08:04,925 Spalten in der Zeile für kleine bis extragroße Bildschirmgrößen einnehmen. 110 00:08:04,925 --> 00:08:09,255 Also hier in diesem Fall, da sechs Spalten von diesem Inhalt besetzt sind, 111 00:08:09,255 --> 00:08:12,745 wird dies die restlichen sechs Spalten dorthin bekommen. 112 00:08:12,745 --> 00:08:18,030 Wenn ich hier zu den Inhaltszeilen gehe, 113 00:08:18,030 --> 00:08:20,110 für den Inhalt hier, 114 00:08:20,110 --> 00:08:22,860 also für diesen ersten Inhalt 115 00:08:22,860 --> 00:08:24,590 , der hier ein Label ist, 116 00:08:24,590 --> 00:08:29,240 werde ich die Klassen als Spalte 12, 117 00:08:29,240 --> 00:08:34,985 Spalte sm-4, Spalte md-3 anwenden. 118 00:08:34,985 --> 00:08:39,770 Also, besagt, dass 119 00:08:39,770 --> 00:08:42,650 dies für extra kleine Bildschirmgrößen die gesamte Reihe einnehmen wird, für kleine, 120 00:08:42,650 --> 00:08:44,160 wird es volle Spalten einnehmen, 121 00:08:44,160 --> 00:08:46,585 und dann 122 00:08:46,585 --> 00:08:50,395 wird es für mittlere bis extra große drei Spalten in der Reihe einnehmen. 123 00:08:50,395 --> 00:08:56,810 Nun, so wird der verbleibende Teil von dem Inhalt unten hier besetzt werden 124 00:08:56,810 --> 00:09:00,575 , so dass ich die Klassen als col anwenden, 125 00:09:00,575 --> 00:09:05,715 was anzeigt, dass dies unter 126 00:09:05,715 --> 00:09:12,690 dem Inhalt hier in den extra kleinen Bildschirmgrößen gestapelt 127 00:09:12,690 --> 00:09:16,940 wird, und dann werde ich sagen Spalte sm, was bedeutet, dass dies die verbleibenden acht Spalten hier, 128 00:09:16,940 --> 00:09:19,300 weil vier Spalten von dieser aufgenommen werden, 129 00:09:19,300 --> 00:09:22,360 und dann sagen wir Spalte md, 130 00:09:22,360 --> 00:09:24,320 was bedeutet, dass dies 131 00:09:24,320 --> 00:09:27,300 die restlichen neun Spalten belegen wird, weil drei Spalten 132 00:09:27,300 --> 00:09:33,230 für mittlere bis extra große Bildschirmgrößen durch den Inhalt hier oben aufgenommen werden. 133 00:09:33,230 --> 00:09:37,810 Jetzt, da ich für die erste Inhaltszeile definiert habe, 134 00:09:37,810 --> 00:09:43,070 nehme ich hier die gleiche Spaltenklassenanwendung 135 00:09:43,070 --> 00:09:49,415 und wende sie dann auf die zweite Zeile hier 136 00:09:49,415 --> 00:09:52,345 und auch die dritte Inhaltszeile an. 137 00:09:52,345 --> 00:09:57,240 In ähnlicher Weise werde ich diese kopieren und dann dasselbe auf 138 00:09:57,240 --> 00:10:04,690 die Inhaltsdivs unten anwenden. 139 00:10:04,690 --> 00:10:11,950 So haben wir nun sowohl den Header als auch die Inhaltsspalten dort konfiguriert. 140 00:10:11,950 --> 00:10:14,690 Gehen wir nun nach unten zur Fußzeile. 141 00:10:14,690 --> 00:10:21,260 In der Fußzeile werden Sie feststellen, dass dieses div hier drei innere divs enthält, 142 00:10:21,260 --> 00:10:23,720 also 143 00:10:23,720 --> 00:10:26,570 werde ich für jedes dieser drei inneren divs hier die entsprechenden Spaltenklassen anwenden. 144 00:10:26,570 --> 00:10:27,680 Also für die erste, 145 00:10:27,680 --> 00:10:35,280 die Links zu den verschiedenen Seiten enthält, die Teil dieser Website sein werden, 146 00:10:35,280 --> 00:10:38,395 werde ich eine Spaltenklasse anwenden, 147 00:10:38,395 --> 00:10:46,045 als Spalte vier, Spalte sm-2 hier. 148 00:10:46,045 --> 00:10:50,840 Das bedeutet, dass 149 00:10:50,840 --> 00:10:55,320 dies für extra kleine Bildschirmgrößen vier Spalten belegen wird und für kleine bis extra große, 150 00:10:55,320 --> 00:10:58,660 wird es hier nur zwei Spalten einnehmen. 151 00:10:59,040 --> 00:11:01,790 Dann 152 00:11:01,790 --> 00:11:08,425 werde ich für das zweite div dort die Klassen als Spalte sieben anwenden. 153 00:11:08,425 --> 00:11:12,050 Also beachten Sie, dass ich vier hier und dann sieben hier, 154 00:11:12,050 --> 00:11:14,755 so dass insgesamt 11 Spalten einnimmt. 155 00:11:14,755 --> 00:11:16,430 Ich habe eine Spalte leer gelassen. 156 00:11:16,430 --> 00:11:21,520 Ich komme später zurück, um einen Offset anzuwenden, um sich um die zusätzliche Spalte zu kümmern. 157 00:11:21,520 --> 00:11:23,400 Das ist also Spalte sieben, 158 00:11:23,400 --> 00:11:31,345 und dann col-sm-5 zum zweiten. 159 00:11:31,345 --> 00:11:33,630 Das ist also zwei plus fünf, sieben. 160 00:11:33,630 --> 00:11:36,390 Also habe ich noch fünf Spalten übrig, 161 00:11:36,390 --> 00:11:40,685 die ich für das dritte div hier verwenden kann. 162 00:11:40,685 --> 00:11:44,610 Jetzt für extra kleine Bildschirmgrößen 163 00:11:44,610 --> 00:11:47,700 werden diese beiden Inhalte nebeneinander positioniert, 164 00:11:47,700 --> 00:11:52,080 und dann wird dieses div, das Links zu 165 00:11:52,080 --> 00:11:58,585 einer Social-Media-Website enthält, in einer separaten Zeile unten gestapelt sein. 166 00:11:58,585 --> 00:12:04,390 Aber für kleine bis extra große Bildschirmgrößen 167 00:12:04,390 --> 00:12:07,680 wird die erste zwei Spalten einnehmen, 168 00:12:07,680 --> 00:12:10,240 die zweite wird fünf einnehmen und die restlichen werden 169 00:12:10,240 --> 00:12:13,545 von Social Media-Links hier aufgenommen. 170 00:12:13,545 --> 00:12:15,230 Also für die dritte, 171 00:12:15,230 --> 00:12:18,650 werde ich die Klasse 172 00:12:18,650 --> 00:12:26,515 als col-12 col-sm-4 hier anwenden. 173 00:12:26,515 --> 00:12:32,625 So col-12 col-sm-4, was bedeutet, dass dies 174 00:12:32,625 --> 00:12:37,090 einen separaten Satz von 12 Spalten besetzen wird, 175 00:12:37,090 --> 00:12:42,310 die unter dem vorherigen Inhalt für extra kleine Bildschirmgrößen gestapelt sind, 176 00:12:42,310 --> 00:12:45,040 aber für kleine bis extra große wird es vier Spalten einnehmen. 177 00:12:45,040 --> 00:12:46,815 Also hier sind wir vier plus fünf, 178 00:12:46,815 --> 00:12:48,430 neun plus zwei 11. 179 00:12:48,430 --> 00:12:52,635 So ist eine Säule noch übrig für kleine bis extra große. 180 00:12:52,635 --> 00:12:57,510 So werde ich die Spalte anwenden, die diesem am nächsten liegt. 181 00:12:57,510 --> 00:13:03,250 Nun, wir haben immer noch die hier unten, wo wir die Urheberrechte daran enthalten. 182 00:13:03,250 --> 00:13:08,745 Ich werde die Klasse als Spalte auto anwenden, 183 00:13:08,745 --> 00:13:12,050 was bedeutet, dass dieser Inhalt 184 00:13:12,050 --> 00:13:15,515 gerade genug Spalten belegt, wie es für den Inhalt dort erforderlich ist. 185 00:13:15,515 --> 00:13:20,405 Später werden Sie sehen, dass ich diesen Inhalt in der Mitte des 186 00:13:20,405 --> 00:13:26,385 Bildschirms positionieren werde, wodurch eine weitere Bootstrap-CSS-Klasse verwendet wird. 187 00:13:26,385 --> 00:13:29,035 Darauf kommen wir in der nächsten Übung. 188 00:13:29,035 --> 00:13:33,405 Damit haben wir verschiedene Spaltenklassen auf den Header, 189 00:13:33,405 --> 00:13:35,880 den Inhalt und die Fußzeile angewendet. 190 00:13:35,880 --> 00:13:39,280 Dies ist ein guter Zeitpunkt für uns, um die Änderungen zu speichern und dann gehen und werfen Sie 191 00:13:39,280 --> 00:13:43,475 einen Blick auf die aktualisierte indizierte oder HTML-Seite. Wenn Sie 192 00:13:43,475 --> 00:13:46,690 einen Blick auf unsere index.html Seite werfen, 193 00:13:46,690 --> 00:13:51,315 werden Sie feststellen, wie im Header, der Jumbotron 194 00:13:51,315 --> 00:13:55,145 ist, der Inhalt jetzt nur die Hälfte des Bildschirms dort belegt. 195 00:13:55,145 --> 00:14:00,210 Die andere Hälfte des Bildschirms dieser bestimmten Zeile ist nun leer gelassen. Wenn Sie 196 00:14:00,210 --> 00:14:03,180 zu den Inhaltszeilen kommen, 197 00:14:03,180 --> 00:14:07,685 sehen Sie, dass die Beschriftung auf der linken Seite 198 00:14:07,685 --> 00:14:14,280 drei oder vier Spalten besetzt, je nachdem, welche Bildschirmgröße verwendet wurde, 199 00:14:14,280 --> 00:14:18,250 und der Rest des Inhalts besetzt ist. 200 00:14:18,250 --> 00:14:19,780 Also hier haben wir eine Reihe, 201 00:14:19,780 --> 00:14:21,770 die zweite Reihe und die dritte Reihe. 202 00:14:21,770 --> 00:14:26,330 Und dann die Fußzeile hier können Sie sehen, dass die Links auf der linken Seite sind, 203 00:14:26,330 --> 00:14:28,065 die anderen in der Mitte, 204 00:14:28,065 --> 00:14:31,150 und dann die Social Media Links auf der rechten Seite. 205 00:14:31,150 --> 00:14:35,460 Dies ist also für einen mittelgroßen Bildschirm. 206 00:14:35,460 --> 00:14:42,765 Wenn Sie nun die gleiche Ansicht für eine zusätzliche kleine oder kleine Bildschirmgröße betrachten möchten, 207 00:14:42,765 --> 00:14:45,045 wenn Sie Chrome verwenden, 208 00:14:45,045 --> 00:14:47,960 dann hat Chrome die Entwicklertools, die Sie 209 00:14:47,960 --> 00:14:51,010 aktivieren können, indem Sie auf die Ansicht Entwicklertools klicken, 210 00:14:51,010 --> 00:14:53,105 und wenn die Entwicklertools kommen, 211 00:14:53,105 --> 00:14:56,890 werden Sie feststellen, lassen Sie mich die Größe reduzieren hier. 212 00:14:56,890 --> 00:15:00,930 Sie werden dieses kleine Fenster dort bemerken. 213 00:15:00,930 --> 00:15:06,500 Wenn Sie darauf klicken, wird die ansprechende Ansicht für diese Seiten dort eingeschaltet. 214 00:15:06,500 --> 00:15:15,680 So können Sie sehen, dass hier die Ansicht dieser gleichen Webseite auf einem Pixel zu Website, 215 00:15:15,680 --> 00:15:19,300 die 411 mal 731 im Portraitmodus 216 00:15:19,300 --> 00:15:22,805 ist, so dass eine extra kleine Bildschirmgröße entspricht, 217 00:15:22,805 --> 00:15:25,300 so dass Sie sehen können, wie der Inhalt angelegt ist. 218 00:15:25,300 --> 00:15:28,145 So können Sie den Jumbotron-Inhalt dort 219 00:15:28,145 --> 00:15:31,745 und dann den restlichen Teil des Inhalts unten sehen. 220 00:15:31,745 --> 00:15:34,585 Und dann runter in die Fußzeile. 221 00:15:34,585 --> 00:15:40,500 In der Fußzeile können Sie sehen, wie die Links und Anzeigen nebeneinander angelegt sind. 222 00:15:40,500 --> 00:15:45,880 Jetzt reduzieren Sie die Bildschirmgröße, so dass wir sehen können, wie diese Fußzeile hier angelegt ist. 223 00:15:45,880 --> 00:15:48,735 Also der verbleibende Teil, Sie haben die Links auf der linken Seite, 224 00:15:48,735 --> 00:15:51,470 Sie haben die Adresse auf der rechten Seite, 225 00:15:51,470 --> 00:15:56,515 und dann die Social Media Links unten unten in einer separaten Zeile hier, 226 00:15:56,515 --> 00:15:59,775 und dann das Copyright unten dort. 227 00:15:59,775 --> 00:16:04,935 Das ist also die interessante Ansicht, die wir für extra kleine Bildschirmgrößen sehen. 228 00:16:04,935 --> 00:16:07,450 Zurück zu unserem Code hier, 229 00:16:07,450 --> 00:16:11,710 werde ich jetzt die Reihenfolge und Offset-Klassen auf 230 00:16:11,710 --> 00:16:17,255 diesen Inhalt anwenden, um den Inhalt auf eine etwas andere Weise anzuzeigen. 231 00:16:17,255 --> 00:16:21,850 Also gehe ich hier zur Inhaltszeile, 232 00:16:21,850 --> 00:16:27,820 für die beiden divs, die den Inhalt enthalten, 233 00:16:27,820 --> 00:16:32,020 werde ich die Klassen als 234 00:16:32,020 --> 00:16:40,150 order-sm-last für die erste Zeile hier anwenden. 235 00:16:40,150 --> 00:16:50,120 Und dann für diesen unten hier unten werde ich Ordnung sm zuerst auf die Reihe hier unten anwenden. 236 00:16:50,120 --> 00:16:53,300 Das heißt, wenn dieser Inhalt angezeigt wird, 237 00:16:53,300 --> 00:16:56,090 wird dieser Inhalt auf die linke Seite des Bildschirms gezogen und dann 238 00:16:56,090 --> 00:16:58,880 wird diese Spalte auf die rechte Seite des Bildschirms gedrückt. 239 00:16:58,880 --> 00:17:02,400 So wird dies auf der rechten Seite bestellt und dies wird auf der linken Seite bestellt. 240 00:17:02,400 --> 00:17:08,075 Wie ich in der vorherigen Vorlesung über die Ordnungsklauseln erklärt habe. 241 00:17:08,075 --> 00:17:09,880 In ähnlicher Weise 242 00:17:09,880 --> 00:17:13,330 werde ich es von der zweiten Reihe als solche belassen, aber ab der dritten Zeile werde ich 243 00:17:13,330 --> 00:17:17,240 den gleichen Satz von Bestellklassen anwenden. 244 00:17:17,240 --> 00:17:20,290 Also werde ich hier zur dritten Zeile gehen 245 00:17:20,290 --> 00:17:25,425 und dann die Order-sm-last auf diese anwenden, 246 00:17:25,425 --> 00:17:30,850 und dann werde ich die Order-sm-first auf diese anwenden. 247 00:17:31,460 --> 00:17:36,450 Und so wird dieser wieder 248 00:17:36,450 --> 00:17:38,300 so neu geordnet, dass dieser Inhalt auf 249 00:17:38,300 --> 00:17:40,870 der linken Seite erscheint und dieser Inhalt auf der rechten Seite erscheint. 250 00:17:40,870 --> 00:17:46,640 Dies ist nur eine Möglichkeit, den Inhalt etwas interessanter zu positionieren. 251 00:17:46,640 --> 00:17:50,210 Jetzt gehe ich hier in die Fußzeile, 252 00:17:50,210 --> 00:17:54,690 jetzt werde ich hier eine Offset-Klasse anwenden. 253 00:17:54,690 --> 00:18:00,440 Beachten Sie also, dass ich erwähnt habe, dass diese beiden Spalten vier plus sieben, 11. 254 00:18:00,440 --> 00:18:02,130 Also ist eine Spalte übrig. 255 00:18:02,130 --> 00:18:07,295 Also werde ich eine Offset-1-Klasse auf diese anwenden. 256 00:18:07,295 --> 00:18:12,320 Was bedeutet, dass dieser Inhalt auf diesem div von einer Spalte hier rechts gedrückt wird. 257 00:18:12,320 --> 00:18:14,710 In ähnlicher Weise, da ich Offset eins sagte, 258 00:18:14,710 --> 00:18:23,145 wird dies auf extra kleine bis zu den extra großen Bildschirmgrößen angewendet werden. 259 00:18:23,145 --> 00:18:28,235 Und so ist das die Verwendung der Offset-Klasse. 260 00:18:28,235 --> 00:18:30,060 Nun, da wir die Änderungen vorgenommen haben, 261 00:18:30,060 --> 00:18:36,285 lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite im Browser. Wenn Sie 262 00:18:36,285 --> 00:18:38,430 zu diesem Browser zurückkehren, 263 00:18:38,430 --> 00:18:43,715 sehen Sie nun, wie der Header wie zuvor ist, 264 00:18:43,715 --> 00:18:46,850 aber in der ersten Inhaltszeile 265 00:18:46,850 --> 00:18:49,090 sehen Sie, dass dieser Inhalt auf 266 00:18:49,090 --> 00:18:51,925 die linke Seite und die Beschriftung auf die rechte Seite verschoben wurde. 267 00:18:51,925 --> 00:18:56,090 Die zweite Reihe ist anders wurde wie zuvor beibehalten. 268 00:18:56,090 --> 00:18:58,330 Aber für die dritte werden Sie sehen, dass dies 269 00:18:58,330 --> 00:19:00,780 nach rechts geschoben wurde und dies nach links geschoben wurde. 270 00:19:00,780 --> 00:19:06,900 Das ist also die Verwendung der order-sm-last und order-sm-first Klasse ist da. Wenn 271 00:19:06,900 --> 00:19:08,530 Sie nun in die Fußzeile gehen, 272 00:19:08,530 --> 00:19:18,195 sehen Sie jetzt, dass der Inhalt im ersten div hier um eine Spalte nach rechts gedrückt wurde,. 273 00:19:18,195 --> 00:19:21,560 Sie können also sehen, dass es hier eine Spalte mit Leerzeichen gibt, 274 00:19:21,560 --> 00:19:27,790 und dies wird nicht nach rechts geschoben und die übrigen wurden entsprechend formatiert. 275 00:19:27,790 --> 00:19:32,235 Damit schließen wir die Änderungen 276 00:19:32,235 --> 00:19:37,790 an unserer index.html Seite oder zusätzlicher Seite für diese spezielle Übung ab. 277 00:19:37,790 --> 00:19:41,665 Damit schließen wir diese besondere Übung ab. 278 00:19:41,665 --> 00:19:46,235 In dieser Übung haben wir uns die Verwendung der Container-, Zeilen- 279 00:19:46,235 --> 00:19:53,800 und Spaltenklassen angesehen, um unsere Webseite etwas schöner zu gestalten. 280 00:19:53,800 --> 00:19:57,705 Im zweiten Teil der Übung, die diesem folgen wird, werden 281 00:19:57,705 --> 00:20:04,680 wir mehr hinzufügen, um zu versuchen, die Art und Weise zu verbessern, wie diese Webseiten gerendert werden. 282 00:20:04,680 --> 00:20:08,375 Es ist immer noch nicht zu meiner Zufriedenheit. 283 00:20:08,375 --> 00:20:12,920 Offensichtlich gibt es noch Raum für Verbesserungen. 284 00:20:12,920 --> 00:20:16,290 Dies kann ein guter Zeitpunkt für Sie sein, einen Git-Kommentar mit 285 00:20:16,290 --> 00:20:21,470 der Nachricht Bootstrap Grid Part One zu machen.