Wir werden mit der Bootstrap-Grid-Übung fortfahren
, die wir in der vorherigen Übung begonnen haben.
Wir werden noch ein paar Dinge zu unserer index.html
Seite tun, um ihr Layout zu verbessern.
Wir werden einige benutzerdefinierte CSS-Klassen verwenden und etwas Farbe
zu unserer index.html Seite mit benutzerdefinierten CSS-Klassen hinzufügen.
Das nächste, was ich tun werde, ist gehen Sie in die Fußzeile und für diese UL hier,
werden Sie feststellen, dass diese Liste, wenn Sie auf
unserer Webseite schauen, wird auf der Webseite mit dieser Aufzählungsliste hier angezeigt.
Ich bin nicht allzu glücklich mit dieser Aufzählungsliste,
ich möchte diese Aufzählungspunkte entfernen und sie dann einfach als nur die Links dort zeigen.
Um das zu tun, werde ich einen anderen Listenstil verwenden, der als
list- unstyled genannt wird und das auf dieses UL-Tag dort anwenden. Wenn ich
auf unsere Webseite zurückgehe,
zu diesem UL-Tag in der Fußzeile,
werde ich die Klasse als list-unstylt anwenden,
und dies würde diese Aufzählungszeichen vor diesen Links entfernen.
Lassen Sie mich nun ein paar benutzerdefinierte CSS-Klassen zur Seite index.html hinzufügen.
Dazu erstellen wir nun hier einen Ordner und benennen ihn hier als CSS-Ordner.
Innerhalb des CSS-Ordners
werde ich eine neue Datei erstellen und die Datei als styles.css benennen.
Jetzt, in der Datei styles.css,
kann ich jetzt einige CSS-Klassen hinzufügen, um unsere Seite zu stylen.
Lassen Sie mich hier einige CSS-Klassen hinzufügen.
Also würde ich meine erste Klasse als Zeilenkopf hinzufügen.
Wie der Name schon sagt,
wende ich diese Klasse auf den Header an.
Und dann würde ich den Rand als
Null Pixel Auto anwenden und
dann als Null Pixel Auto auffüllen.
Also, dies ist für den Zeilenkopf.
Also, ich werde Null-Marge und Null-Padding für den Zeilenheader haben.
Und dann für den Zeileninhalt,
also werde ich eine weitere CSS-Klasse namens Zeileninhalt hinzufügen.
Und dann füge ich Marge Null Pixel Auto hinzu,
und dann haben Padding es bei 50 Pixel,
Null Pixel, 50 und Null Pixel.
Dann werde ich
hier unten in meiner Reihe einen Rahmen hinzufügen.
Und dann, die Grenze werde ich ihm ein Pixel geben und dann nennen es einen Grat.
Und ich werde hier die minimale Höhe auf 400 Pixel für den Inhalt einstellen.
Auf diese Weise wird meine Webseite wie schöner auf dem Bildschirm aussehen.
Nun, dies wieder, müssen Sie versuchen, zu
sehen, bis Sie mit der Art und Weise, wie die Seite angelegt ist, zufrieden sind.
Jetzt werde ich auch
eine weitere Klasse einschließen, die als Fußzeile bezeichnet wird, die, wie Sie vielleicht bereits erraten haben,
ich werde auf die Fußzeile
anwenden und ich werde eine Hintergrundfarbe auf die Fußzeile als D1C4E9 anwenden.
Wenn Sie mich fragen, wie ich die Farbe ausgewählt
habe, habe ich nur die Farbe gesucht und dann war ich glücklich mit dieser Farbe.
Sie können jede Farbe wählen, die Sie anwenden möchten,
aber diese Farbe scheint gut für mich zu sein.
Also, ich fügte diese Farbe hinzu.
Und für die Polsterung, für die Fußzeile,
würde ich 20 Pixel und Null Pixel hinzufügen.
Nachdem ich diese Stile zu meiner CSS-Datei hinzugefügt habe,
lassen Sie mich die CSS-Datei auf die Seite index.html anwenden.
Ich gehe auf die Seite index.html.
Offensichtlich muss ich diese CSS-Datei in meiner index.html Seite verwenden.
Also direkt nach der Bootstrap-CSS-Datei
werde ich einen Link und ein Stylesheet machen,
und das ist style.css Datei dort.
Also, dort ist meine CSS-Datei gespeichert.
Also, ich werde das in meine index.html Seite aufnehmen.
Jetzt werde ich in den Körper gehen und die Klassen anwenden, die ich gerade erstellt habe.
Also, wenn ich zum Header gehe,
werde ich die Zeilenkopfklasse auf das div im Header anwenden.
Dann
würde ich für den Inhalt die Zeileninhaltsklassen auf die Zeilen dort anwenden.
Also, auf die drei Zeilen im Inhalt
wende ich die Zeileninhaltsklasse an und gehe dann in die Fußzeile,
auf das Fußzeilen-Tag,
werde ich die Klassenfußzeile hier anwenden
und dann die Änderungen speichern.
Schauen wir uns diese Seite jetzt an.
Gehen Sie auf Ihre Webseite,
wir fangen bereits an, einige interessante Änderungen an der Webseite zu sehen.
So können Sie jetzt sehen, dass
der Inhalt auf der Webseite etwas sauberer angelegt wurde.
Das ist der Rand unten, den wir dem Zeileninhalt hinzugefügt haben,
so dass Sie sehen können, dass es genügend Trennung zwischen den Zeilen gibt, obwohl
der Inhalt der Zeilen immer noch nach oben in den Zeilen positioniert ist,
also haben Sie diese drei Zeilen und schauen Sie sich die Fußzeile an,
die Fußzeile hat jetzt erwarb die Hintergrundfarbe, die ich angewendet habe,
und merke, wie die Links mit der Liste unstylt auf der linken Seite hier gestylt werden.
Wir sind noch nicht fertig, wir müssen noch ein paar Änderungen an der Seite index.html vornehmen
und dann zurückkommen und uns das Endergebnis dieser Übung ansehen. Wenn ich
zu Ihrem Editor
zurückgehe, werde ich ein paar weitere CSS-Klassen in meiner Stilstruktur hinzufügen,
es ist eine Datei, also gehe ich hinein und füge dann eine Klasse namens Jumbotron hinzu.
So werden Sie sehen, dass wir den Jumbotron bereits auf unseren Header angewendet haben.
Nun, wenn ich hier weitere Eigenschaften zu dieser Jumbotron-Klasse hinzufüge,
wird dies auf den Jumbotron angewendet werden,
zusätzlich zu dem Standard-Standard-Jumbotron, das Bootstrap bereits enthält.
Ich werde in ein paar weitere Dinge hinzufügen,
ich werde in einer Polsterung von
70 und 30 Pixel auf seiner Umgebung hinzufügen,
und dann einen Rand von Null Pixel ringsum,
und ich werde den Hintergrund davon auf 9575CD setzen.
Dies ist etwas von einer dunkleren lila Farbe, die sehr gut auf dem Jumbotron zu gehen scheint.
Auch hier, durch Versuch und Irrtum,
wählte ich diese Farbe,
und auch die Textfarbe als florales Weiß.
Also für den Jumbotron,
werden wir diese Klassen anwenden, und auch
werde ich eine weitere Klasse auf die Adressklasse anwenden.
Wir haben eine Adresse in der Fußzeile,
also werde ich die Schriftgröße ändern, die zu 80 Prozent,
eine etwas kleinere Schriftart als die normale Schriftart,
und der Rand, ich werde ihm eine Null Pixel geben,
und die Farbe, Ich werde Null F, Null F,
Null F verwenden,
und dann speichern Sie die Änderungen.
Also fügen Sie weitere CSS-Klassen hinzu und
wechseln Sie zurück zu index.html.
Was ich jetzt tun werde,
ist, zu den Inhaltszeilen zu gehen und dann
werde ich versuchen, diesen Inhalt in der Mitte,
vertikal in dieser Zeile zu positionieren.
Hier werde ich die Hilfe der
vertikalen Ausrichtung übernehmen, die Bootstrap-Grid durch die Flexbox-Unterstützung unterstützt.
Um dies zu tun, würde ich sagen, align-items-center,
also ist dies die andere Klasse, die ich hinzufügen muss, align-items-center.
Und ich werde das auch zu den verbleibenden zwei Zeilen hinzufügen,
align-items-center zur zweiten und dritten Zeile,
und das sollte eine vertikale Begründung des Inhalts der Zeilen tun.
Wir werden das Ergebnis in einer Minute sehen.
Ich gehe runter in die Fußzeile.
In der Fußzeile sehen Sie, dass wir
die Spalte auto für diesen Copyright-Inhalt dort verwendet haben.
Nun, ich werde dies direkt in der Mitte horizontal
mit dieser Justify-Content-Center-Klasse positionieren,
also gibt es einen Rechtfertigungsinhalt und ein paar andere Klassen dort.
Ich werde dazu verwenden, um die Content-Center-Klasse zu rechtfertigen.
Dadurch wird diese Spalte im Wesentlichen in der Mitte der Zeile positioniert.
Das galt dazu, und dann,
eine kleine Änderung, die ich tun werde,
ist zu diesem inneren div dort,
ich werde eine Klasse als Textcenter darauf anwenden,
so dass diese Links auf dem Bildschirm zentriert sind.
Lassen Sie uns mit diesen Änderungen einen Blick auf die Webseite werfen,
am Ende dieser Übung. Wenn Sie
auf unsere Webseite gehen,
beginnt unsere Webseite jetzt noch besser aussehen,
so dass Sie jetzt sehen können, dass der Jumbotron jetzt mit einer neuen Hintergrundfarbe gestylt
ist, die dort ein wenig dunkelviolett ist,
und der Schriftzug ist jetzt in floraler weißer Farbe,
etwas eingerückt dort,
dann sehen Sie nun, dass der Inhalt in den Inhaltszeilen jetzt vertikal zentriert ist,
für die drei Inhaltszeilen.
Dies ist die Verwendung des align-items-center, das wir auf die Zeilen dort angewendet haben. Wenn Sie
dann in die Fußzeile gehen,
können Sie jetzt sehen, dass dieses Copyright jetzt in der Mitte des Bildschirms gerechtfertigt ist.
Sehen Sie sich an, wie die Links hier zentriert wurden.
Ich erkannte, dass ich diese vertikale Zentrierung auch auf diese bestimmte Zeile positionieren möchte.
Lassen Sie uns also eine weitere Klasse anwenden, um dies
vertikal in die Mitte dieser bestimmten Reihe zu verschieben.
Also, um das zu tun, gehen Sie zurück zum Index.
html, in der Fußzeile für diese bestimmte Spalte, die diese enthält,
werde ich die Klasse als align-self-center anwenden.
Dies sollte auf das div angewendet werden, das die Spaltenklasse verwendet.
Damit wird dieser bestimmte Inhalt an der Mitte der Zeile ausgerichtet.
Der verbleibende Inhalt bleibt weiterhin an der Spitze.
Werfen wir einen letzten Blick auf die Fußzeile. Wenn
Sie in die Fußzeile unserer Webseite gehen,
können Sie nun sehen, wie diese vertikal in der Mitte positioniert wurde.
Diese beiden Inhalte sind immer noch an der Spitze der Zeile ausgerichtet,
das ist in Ordnung, weil das dort in Ordnung aussieht,
aber dieses habe ich es vertikal zur Mitte dieser bestimmten Reihe nach unten gezogen.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir die Verwendung von benutzerdefinierten CSS-Klassen gesehen
und auch einige der Klassen verwendet, um
den Inhalt horizontal und vertikal in unseren Zeilen zu rechtfertigen.
Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit der Nachricht,
Bootstrap-Grid, Teil zwei zu machen.