1 00:00:03,800 --> 00:00:07,660 Wir werden mit der Bootstrap-Grid-Übung fortfahren 2 00:00:07,660 --> 00:00:11,074 , die wir in der vorherigen Übung begonnen haben. 3 00:00:11,074 --> 00:00:14,535 Wir werden noch ein paar Dinge zu unserer index.html 4 00:00:14,535 --> 00:00:18,965 Seite tun, um ihr Layout zu verbessern. 5 00:00:18,965 --> 00:00:24,085 Wir werden einige benutzerdefinierte CSS-Klassen verwenden und etwas Farbe 6 00:00:24,085 --> 00:00:30,535 zu unserer index.html Seite mit benutzerdefinierten CSS-Klassen hinzufügen. 7 00:00:30,535 --> 00:00:39,265 Das nächste, was ich tun werde, ist gehen Sie in die Fußzeile und für diese UL hier, 8 00:00:39,265 --> 00:00:42,790 werden Sie feststellen, dass diese Liste, wenn Sie auf 9 00:00:42,790 --> 00:00:49,705 unserer Webseite schauen, wird auf der Webseite mit dieser Aufzählungsliste hier angezeigt. 10 00:00:49,705 --> 00:00:52,820 Ich bin nicht allzu glücklich mit dieser Aufzählungsliste, 11 00:00:52,820 --> 00:00:59,350 ich möchte diese Aufzählungspunkte entfernen und sie dann einfach als nur die Links dort zeigen. 12 00:00:59,350 --> 00:01:03,440 Um das zu tun, werde ich einen anderen Listenstil verwenden, der als 13 00:01:03,440 --> 00:01:08,120 list- unstyled genannt wird und das auf dieses UL-Tag dort anwenden. Wenn ich 14 00:01:08,120 --> 00:01:09,950 auf unsere Webseite zurückgehe, 15 00:01:09,950 --> 00:01:12,425 zu diesem UL-Tag in der Fußzeile, 16 00:01:12,425 --> 00:01:21,520 werde ich die Klasse als list-unstylt anwenden, 17 00:01:23,230 --> 00:01:32,275 und dies würde diese Aufzählungszeichen vor diesen Links entfernen. 18 00:01:32,275 --> 00:01:40,375 Lassen Sie mich nun ein paar benutzerdefinierte CSS-Klassen zur Seite index.html hinzufügen. 19 00:01:40,375 --> 00:01:49,635 Dazu erstellen wir nun hier einen Ordner und benennen ihn hier als CSS-Ordner. 20 00:01:49,635 --> 00:01:51,650 Innerhalb des CSS-Ordners 21 00:01:51,650 --> 00:01:59,670 werde ich eine neue Datei erstellen und die Datei als styles.css benennen. 22 00:01:59,670 --> 00:02:02,835 Jetzt, in der Datei styles.css, 23 00:02:02,835 --> 00:02:11,685 kann ich jetzt einige CSS-Klassen hinzufügen, um unsere Seite zu stylen. 24 00:02:11,685 --> 00:02:14,600 Lassen Sie mich hier einige CSS-Klassen hinzufügen. 25 00:02:14,600 --> 00:02:18,765 Also würde ich meine erste Klasse als Zeilenkopf hinzufügen. 26 00:02:18,765 --> 00:02:21,035 Wie der Name schon sagt, 27 00:02:21,035 --> 00:02:23,770 wende ich diese Klasse auf den Header an. 28 00:02:23,770 --> 00:02:28,865 Und dann würde ich den Rand als 29 00:02:28,865 --> 00:02:34,330 Null Pixel Auto anwenden und 30 00:02:34,330 --> 00:02:40,150 dann als Null Pixel Auto auffüllen. 31 00:02:40,150 --> 00:02:41,820 Also, dies ist für den Zeilenkopf. 32 00:02:41,820 --> 00:02:46,100 Also, ich werde Null-Marge und Null-Padding für den Zeilenheader haben. 33 00:02:46,100 --> 00:02:48,840 Und dann für den Zeileninhalt, 34 00:02:48,840 --> 00:02:54,005 also werde ich eine weitere CSS-Klasse namens Zeileninhalt hinzufügen. 35 00:02:54,005 --> 00:03:01,470 Und dann füge ich Marge Null Pixel Auto hinzu, 36 00:03:01,470 --> 00:03:07,815 und dann haben Padding es bei 50 Pixel, 37 00:03:07,815 --> 00:03:16,170 Null Pixel, 50 und Null Pixel. 38 00:03:16,170 --> 00:03:21,060 Dann werde ich 39 00:03:21,060 --> 00:03:28,880 hier unten in meiner Reihe einen Rahmen hinzufügen. 40 00:03:28,880 --> 00:03:35,195 Und dann, die Grenze werde ich ihm ein Pixel geben und dann nennen es einen Grat. 41 00:03:35,195 --> 00:03:45,915 Und ich werde hier die minimale Höhe auf 400 Pixel für den Inhalt einstellen. 42 00:03:45,915 --> 00:03:51,910 Auf diese Weise wird meine Webseite wie schöner auf dem Bildschirm aussehen. 43 00:03:51,910 --> 00:03:55,475 Nun, dies wieder, müssen Sie versuchen, zu 44 00:03:55,475 --> 00:03:59,900 sehen, bis Sie mit der Art und Weise, wie die Seite angelegt ist, zufrieden sind. 45 00:03:59,900 --> 00:04:03,560 Jetzt werde ich auch 46 00:04:03,560 --> 00:04:08,320 eine weitere Klasse einschließen, die als Fußzeile bezeichnet wird, die, wie Sie vielleicht bereits erraten haben, 47 00:04:08,320 --> 00:04:13,560 ich werde auf die Fußzeile 48 00:04:13,560 --> 00:04:21,100 anwenden und ich werde eine Hintergrundfarbe auf die Fußzeile als D1C4E9 anwenden. 49 00:04:29,140 --> 00:04:32,465 Wenn Sie mich fragen, wie ich die Farbe ausgewählt 50 00:04:32,465 --> 00:04:37,630 habe, habe ich nur die Farbe gesucht und dann war ich glücklich mit dieser Farbe. 51 00:04:37,630 --> 00:04:41,460 Sie können jede Farbe wählen, die Sie anwenden möchten, 52 00:04:41,460 --> 00:04:44,460 aber diese Farbe scheint gut für mich zu sein. 53 00:04:44,460 --> 00:04:46,950 Also, ich fügte diese Farbe hinzu. 54 00:04:46,950 --> 00:04:50,110 Und für die Polsterung, für die Fußzeile, 55 00:04:50,110 --> 00:04:58,890 würde ich 20 Pixel und Null Pixel hinzufügen. 56 00:04:59,100 --> 00:05:06,160 Nachdem ich diese Stile zu meiner CSS-Datei hinzugefügt habe, 57 00:05:06,160 --> 00:05:10,610 lassen Sie mich die CSS-Datei auf die Seite index.html anwenden. 58 00:05:10,610 --> 00:05:12,820 Ich gehe auf die Seite index.html. 59 00:05:12,820 --> 00:05:18,950 Offensichtlich muss ich diese CSS-Datei in meiner index.html Seite verwenden. 60 00:05:18,950 --> 00:05:22,160 Also direkt nach der Bootstrap-CSS-Datei 61 00:05:22,160 --> 00:05:32,200 werde ich einen Link und ein Stylesheet machen, 62 00:05:32,970 --> 00:05:39,900 und das ist style.css Datei dort. 63 00:05:39,900 --> 00:05:43,525 Also, dort ist meine CSS-Datei gespeichert. 64 00:05:43,525 --> 00:05:49,760 Also, ich werde das in meine index.html Seite aufnehmen. 65 00:05:49,760 --> 00:05:56,350 Jetzt werde ich in den Körper gehen und die Klassen anwenden, die ich gerade erstellt habe. 66 00:05:56,350 --> 00:05:57,955 Also, wenn ich zum Header gehe, 67 00:05:57,955 --> 00:06:03,055 werde ich die Zeilenkopfklasse auf das div im Header anwenden. 68 00:06:03,055 --> 00:06:07,475 Dann 69 00:06:07,475 --> 00:06:14,085 würde ich für den Inhalt die Zeileninhaltsklassen auf die Zeilen dort anwenden. 70 00:06:14,085 --> 00:06:21,180 Also, auf die drei Zeilen im Inhalt 71 00:06:21,190 --> 00:06:26,690 wende ich die Zeileninhaltsklasse an und gehe dann in die Fußzeile, 72 00:06:26,690 --> 00:06:28,325 auf das Fußzeilen-Tag, 73 00:06:28,325 --> 00:06:32,315 werde ich die Klassenfußzeile hier anwenden 74 00:06:32,315 --> 00:06:35,240 und dann die Änderungen speichern. 75 00:06:35,240 --> 00:06:38,290 Schauen wir uns diese Seite jetzt an. 76 00:06:38,290 --> 00:06:40,430 Gehen Sie auf Ihre Webseite, 77 00:06:40,430 --> 00:06:45,970 wir fangen bereits an, einige interessante Änderungen an der Webseite zu sehen. 78 00:06:45,970 --> 00:06:48,960 So können Sie jetzt sehen, dass 79 00:06:48,960 --> 00:06:52,445 der Inhalt auf der Webseite etwas sauberer angelegt wurde. 80 00:06:52,445 --> 00:06:58,290 Das ist der Rand unten, den wir dem Zeileninhalt hinzugefügt haben, 81 00:06:58,290 --> 00:07:03,200 so dass Sie sehen können, dass es genügend Trennung zwischen den Zeilen gibt, obwohl 82 00:07:03,200 --> 00:07:08,530 der Inhalt der Zeilen immer noch nach oben in den Zeilen positioniert ist, 83 00:07:08,530 --> 00:07:11,900 also haben Sie diese drei Zeilen und schauen Sie sich die Fußzeile an, 84 00:07:11,900 --> 00:07:17,740 die Fußzeile hat jetzt erwarb die Hintergrundfarbe, die ich angewendet habe, 85 00:07:17,740 --> 00:07:26,717 und merke, wie die Links mit der Liste unstylt auf der linken Seite hier gestylt werden. 86 00:07:26,717 --> 00:07:33,495 Wir sind noch nicht fertig, wir müssen noch ein paar Änderungen an der Seite index.html vornehmen 87 00:07:33,495 --> 00:07:39,320 und dann zurückkommen und uns das Endergebnis dieser Übung ansehen. Wenn ich 88 00:07:39,320 --> 00:07:41,485 zu Ihrem Editor 89 00:07:41,485 --> 00:07:46,955 zurückgehe, werde ich ein paar weitere CSS-Klassen in meiner Stilstruktur hinzufügen, 90 00:07:46,955 --> 00:07:53,290 es ist eine Datei, also gehe ich hinein und füge dann eine Klasse namens Jumbotron hinzu. 91 00:07:53,290 --> 00:07:59,265 So werden Sie sehen, dass wir den Jumbotron bereits auf unseren Header angewendet haben. 92 00:07:59,265 --> 00:08:03,145 Nun, wenn ich hier weitere Eigenschaften zu dieser Jumbotron-Klasse hinzufüge, 93 00:08:03,145 --> 00:08:05,875 wird dies auf den Jumbotron angewendet werden, 94 00:08:05,875 --> 00:08:11,535 zusätzlich zu dem Standard-Standard-Jumbotron, das Bootstrap bereits enthält. 95 00:08:11,535 --> 00:08:13,835 Ich werde in ein paar weitere Dinge hinzufügen, 96 00:08:13,835 --> 00:08:17,355 ich werde in einer Polsterung von 97 00:08:17,735 --> 00:08:28,765 70 und 30 Pixel auf seiner Umgebung hinzufügen, 98 00:08:29,095 --> 00:08:38,515 und dann einen Rand von Null Pixel ringsum, 99 00:08:38,515 --> 00:08:51,685 und ich werde den Hintergrund davon auf 9575CD setzen. 100 00:08:51,685 --> 00:09:01,065 Dies ist etwas von einer dunkleren lila Farbe, die sehr gut auf dem Jumbotron zu gehen scheint. 101 00:09:01,065 --> 00:09:03,430 Auch hier, durch Versuch und Irrtum, 102 00:09:03,430 --> 00:09:04,975 wählte ich diese Farbe, 103 00:09:04,975 --> 00:09:11,735 und auch die Textfarbe als florales Weiß. 104 00:09:13,205 --> 00:09:15,305 Also für den Jumbotron, 105 00:09:15,305 --> 00:09:18,615 werden wir diese Klassen anwenden, und auch 106 00:09:18,615 --> 00:09:24,765 werde ich eine weitere Klasse auf die Adressklasse anwenden. 107 00:09:24,765 --> 00:09:26,520 Wir haben eine Adresse in der Fußzeile, 108 00:09:26,520 --> 00:09:34,685 also werde ich die Schriftgröße ändern, die zu 80 Prozent, 109 00:09:34,685 --> 00:09:38,935 eine etwas kleinere Schriftart als die normale Schriftart, 110 00:09:38,955 --> 00:09:43,455 und der Rand, ich werde ihm eine Null Pixel geben, 111 00:09:43,455 --> 00:09:50,285 und die Farbe, Ich werde Null F, Null F, 112 00:09:50,285 --> 00:09:52,350 Null F verwenden, 113 00:09:52,350 --> 00:09:54,730 und dann speichern Sie die Änderungen. 114 00:09:54,730 --> 00:09:58,730 Also fügen Sie weitere CSS-Klassen hinzu und 115 00:09:58,730 --> 00:10:01,530 wechseln Sie zurück zu index.html. 116 00:10:01,530 --> 00:10:03,475 Was ich jetzt tun werde, 117 00:10:03,475 --> 00:10:07,775 ist, zu den Inhaltszeilen zu gehen und dann 118 00:10:07,775 --> 00:10:11,990 werde ich versuchen, diesen Inhalt in der Mitte, 119 00:10:11,990 --> 00:10:14,605 vertikal in dieser Zeile zu positionieren. 120 00:10:14,605 --> 00:10:17,930 Hier werde ich die Hilfe der 121 00:10:17,930 --> 00:10:23,050 vertikalen Ausrichtung übernehmen, die Bootstrap-Grid durch die Flexbox-Unterstützung unterstützt. 122 00:10:23,050 --> 00:10:31,395 Um dies zu tun, würde ich sagen, align-items-center, 123 00:10:31,495 --> 00:10:38,620 also ist dies die andere Klasse, die ich hinzufügen muss, align-items-center. 124 00:10:38,620 --> 00:10:45,475 Und ich werde das auch zu den verbleibenden zwei Zeilen hinzufügen, 125 00:10:45,475 --> 00:10:51,735 align-items-center zur zweiten und dritten Zeile, 126 00:10:53,185 --> 00:11:01,965 und das sollte eine vertikale Begründung des Inhalts der Zeilen tun. 127 00:11:01,965 --> 00:11:03,880 Wir werden das Ergebnis in einer Minute sehen. 128 00:11:03,880 --> 00:11:06,230 Ich gehe runter in die Fußzeile. 129 00:11:06,230 --> 00:11:09,835 In der Fußzeile sehen Sie, dass wir 130 00:11:09,835 --> 00:11:13,825 die Spalte auto für diesen Copyright-Inhalt dort verwendet haben. 131 00:11:13,825 --> 00:11:18,265 Nun, ich werde dies direkt in der Mitte horizontal 132 00:11:18,265 --> 00:11:24,160 mit dieser Justify-Content-Center-Klasse positionieren, 133 00:11:24,160 --> 00:11:32,755 also gibt es einen Rechtfertigungsinhalt und ein paar andere Klassen dort. 134 00:11:32,755 --> 00:11:35,890 Ich werde dazu verwenden, um die Content-Center-Klasse zu rechtfertigen. 135 00:11:35,890 --> 00:11:44,605 Dadurch wird diese Spalte im Wesentlichen in der Mitte der Zeile positioniert. 136 00:11:44,725 --> 00:11:48,560 Das galt dazu, und dann, 137 00:11:48,560 --> 00:11:51,415 eine kleine Änderung, die ich tun werde, 138 00:11:51,415 --> 00:11:53,370 ist zu diesem inneren div dort, 139 00:11:53,370 --> 00:12:01,665 ich werde eine Klasse als Textcenter darauf anwenden, 140 00:12:01,665 --> 00:12:06,435 so dass diese Links auf dem Bildschirm zentriert sind. 141 00:12:06,435 --> 00:12:11,340 Lassen Sie uns mit diesen Änderungen einen Blick auf die Webseite werfen, 142 00:12:11,340 --> 00:12:14,135 am Ende dieser Übung. Wenn Sie 143 00:12:14,135 --> 00:12:16,120 auf unsere Webseite gehen, 144 00:12:16,120 --> 00:12:20,020 beginnt unsere Webseite jetzt noch besser aussehen, 145 00:12:20,020 --> 00:12:25,885 so dass Sie jetzt sehen können, dass der Jumbotron jetzt mit einer neuen Hintergrundfarbe gestylt 146 00:12:25,885 --> 00:12:28,955 ist, die dort ein wenig dunkelviolett ist, 147 00:12:28,955 --> 00:12:34,980 und der Schriftzug ist jetzt in floraler weißer Farbe, 148 00:12:34,980 --> 00:12:37,190 etwas eingerückt dort, 149 00:12:37,190 --> 00:12:44,345 dann sehen Sie nun, dass der Inhalt in den Inhaltszeilen jetzt vertikal zentriert ist, 150 00:12:44,345 --> 00:12:47,500 für die drei Inhaltszeilen. 151 00:12:47,500 --> 00:12:54,645 Dies ist die Verwendung des align-items-center, das wir auf die Zeilen dort angewendet haben. Wenn Sie 152 00:12:54,645 --> 00:12:56,525 dann in die Fußzeile gehen, 153 00:12:56,525 --> 00:13:03,380 können Sie jetzt sehen, dass dieses Copyright jetzt in der Mitte des Bildschirms gerechtfertigt ist. 154 00:13:03,380 --> 00:13:08,155 Sehen Sie sich an, wie die Links hier zentriert wurden. 155 00:13:08,155 --> 00:13:15,985 Ich erkannte, dass ich diese vertikale Zentrierung auch auf diese bestimmte Zeile positionieren möchte. 156 00:13:15,985 --> 00:13:19,855 Lassen Sie uns also eine weitere Klasse anwenden, um dies 157 00:13:19,855 --> 00:13:24,540 vertikal in die Mitte dieser bestimmten Reihe zu verschieben. 158 00:13:24,540 --> 00:13:27,100 Also, um das zu tun, gehen Sie zurück zum Index. 159 00:13:27,100 --> 00:13:34,115 html, in der Fußzeile für diese bestimmte Spalte, die diese enthält, 160 00:13:34,115 --> 00:13:41,795 werde ich die Klasse als align-self-center anwenden. 161 00:13:41,795 --> 00:13:48,485 Dies sollte auf das div angewendet werden, das die Spaltenklasse verwendet. 162 00:13:48,485 --> 00:13:54,185 Damit wird dieser bestimmte Inhalt an der Mitte der Zeile ausgerichtet. 163 00:13:54,185 --> 00:13:56,570 Der verbleibende Inhalt bleibt weiterhin an der Spitze. 164 00:13:56,570 --> 00:13:59,575 Werfen wir einen letzten Blick auf die Fußzeile. Wenn 165 00:13:59,575 --> 00:14:01,705 Sie in die Fußzeile unserer Webseite gehen, 166 00:14:01,705 --> 00:14:06,345 können Sie nun sehen, wie diese vertikal in der Mitte positioniert wurde. 167 00:14:06,345 --> 00:14:10,715 Diese beiden Inhalte sind immer noch an der Spitze der Zeile ausgerichtet, 168 00:14:10,715 --> 00:14:15,215 das ist in Ordnung, weil das dort in Ordnung aussieht, 169 00:14:15,215 --> 00:14:21,340 aber dieses habe ich es vertikal zur Mitte dieser bestimmten Reihe nach unten gezogen. 170 00:14:21,340 --> 00:14:25,545 Damit schließen wir diese Übung ab. 171 00:14:25,545 --> 00:14:30,005 In dieser Übung haben wir die Verwendung von benutzerdefinierten CSS-Klassen gesehen 172 00:14:30,005 --> 00:14:35,125 und auch einige der Klassen verwendet, um 173 00:14:35,125 --> 00:14:41,660 den Inhalt horizontal und vertikal in unseren Zeilen zu rechtfertigen. 174 00:14:41,660 --> 00:14:45,695 Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit der Nachricht, 175 00:14:45,695 --> 00:14:48,735 Bootstrap-Grid, Teil zwei zu machen.