In den vorangegangenen Vorträgen
haben wir etwas über Responsive Design und das Bootstrap Grid System gelernt.
Wir haben gesehen, wie das Bootstrap-Grid es uns ermöglicht, responsive Websites zu entwerfen.
Es ist an der Zeit, dass wir mit der nächsten Übung fortfahren.
Wir beginnen mit der Index-HTML-Seite zu arbeiten, die wir in
unserer vorherigen Übung erstellt haben, und wenden die Bootstrap-Grid-Klassen an, um sie reaktionsschnell zu machen.
Wenn wir einen kurzen Blick auf unsere Webseite im Browser werfen, sehen wir, dass
es immer noch schrecklich ist, obwohl die Schriftarten ein wenig verbessert haben,
und wir verwenden jetzt die Bootstraps Standardschriftarten.
Lassen Sie uns nun versuchen, die Bootstrap-Grid-Klassen auf index.html anzuwenden, um ihr Layout zu verbessern.
Gehen Sie auf die Seite index.html und
lassen Sie mich schnell auf diese bestimmte Zeile auf der
Seite index.html aufmerksam machen, die wir bereits in der vorherigen Übung enthalten haben.
Ich hatte auf diese Zeile Bezug genommen,
dann sprachen wir über das Bootstrap-Grid-System.
Also hier sehen wir, dass wir die Meta-Tags mit einem View-Port und dem Inhalt,
Breite als Gerätebreite,
und Anfangsmaßstab eins und schrumpfen auf Nein angegeben haben.
Dieses Meta-Tag ermöglicht es uns,
unsere Webseite reaktionsschnell zu machen, indem wir den View-Port-Charakter betrachten.
Vorwärts zum nächsten Schritt.
Wir werden auf den Hauptteil dieser index.html Seite rollen
und dann das erste div nachschlagen, das direkt unter dem Header-Tag kommt,
zu diesem div werden Sie den Klassencontainer anwenden.
In der vorangegangenen Vorlesung haben wir bereits etwas über die Containerklasse erfahren.
Sobald wir also die Container-Klasse anwenden,
dann sehen wir,
dass ein Teil des Inhalts direkt dort sich bereits angepasst hat.
Schau dir den Unterschied zwischen dem Inhalt hier oben und dem unten an.
Jetzt
ist dieser Inhalt unten hier unten, in der Fußzeile unserer index.html Seite und dieser Inhalt ist in der Kopfzeile.
Aber dieser Inhalt in der Mitte ist der eigentliche Inhalt unserer Webseite,
dh innerhalb des div, auf das wir den Container anwenden. Wenn Sie
also die Container-Klasse anwenden, können Sie sofort sehen, dass
die Breite der Seite, in der unser Inhalt ausgelegt ist, jetzt
geschrumpft ist, und dann haben Sie noch etwas zusätzlichen Platz auf beiden Seiten. Wenn
diese Containerbreite ein Container mit fester Größe ist,
wird unser Inhalt auf diese besondere Breite auf
dem Bildschirm so dass genügend Rand auf beiden Seiten als Leerraum.
Lassen Sie uns dieselbe Containerklasse sowohl auf die Kopf- als auch auf die Fußzeile anwenden
und dann sehen, wie sich der Inhalt ändert.
Zurück zu unserer Webseite,
was ich jetzt tun werde, ist für den inneren Inhalt hier,
das innere div innerhalb des Containers,
ich werde die Klasse als Zeilenklasse hier anwenden,
auf diese erste,
und ich werde dies einfach kopieren.
Ich werde das gleiche auf das zweite div hier anwenden, das für das div aufgereiht ist,
und scrollen Sie auch nach unten und dann zum dritten div hier,
ich wende auch die Zeilenklasse hier an.
Also, jetzt
ist der Inhalt in dieser äußersten Container-Klasse jetzt in drei Zeilen unterteilt,
was auch immer hier drin ist, wird eine Zeile sein,
was auch immer hier drin ist,
wird die zweite Zeile sein und die hier drin wird die dritte Zeile sein.
Wir werden später die Spaltenklassen darauf anwenden.
Lassen Sie uns nun auf den Header in unserem index.html Körper bewegen.
Und auf den Header werde ich eine Klasse anwenden, die als Jumbotron bezeichnet wird.
Die Jumbotron-Komponente ermöglicht es Ihnen,
den Inhalt innerhalb des Jumbotron vom Rest der Seite zu trennen.
Wir werden das Ergebnis in kurzer Zeit sehen, wenn wir auf der resultierenden Webseite.
Nun, zum div in diesem Header,
werde ich die Klasse als Container anwenden,
so dass alles, was sich im Inhalt befindet,
jetzt durch die Containerbreite dort eingeschränkt wird.
In ähnlicher Weise, wenn ich hier
in der Fußzeile auch in der Fußzeile,
dem ersten div in der Fußzeile,
gehe ich die Klasse als Container an.
Und das div drin,
ich werde die Klasse als Reihe dort
auf das div dort anwenden.
Also wird dieses div uns den ganzen Weg zu diesem speziellen div hier bringen.
Und dann das nächste div auch, das direkt darunter ist,
werde ich die Klasse als Zeile anwenden.
Jetzt enthält meine Fußzeile hier zwei Zeilen,
wir werden den Inhalt mit Spalte formatieren,
Klassen in kurzer Zeit. Wenn ich
auch zum Header gehe,
werde ich die Zeilenklasse auf das zweite div innerhalb des Container-div hier anwenden.
Also dieses div, das mit mir übereinstimmt,
wird eine einzelne Zeile in der Kopfzeile sein.
Werfen wir einen Blick auf unsere resultierende Webseite. Wenn Sie
auf unsere Webseite gehen,
können Sie nun sehen, dass sich der Header-Inhalt jetzt von
dem Rest in dieser grauen Box oben hier abhebt.
Aber der Inhalt selbst ist jetzt mit dem Inhalt unten hier aufgereiht.
Dies ist das Ergebnis der Verwendung des Containers.
Wenn Sie in die Fußzeile wechseln,
können Sie nun sehen, dass der Fußzeileninhalt jetzt auch innerhalb des Containers aufgereiht ist.
Aber die Seite sieht immer noch nicht so toll aus,
wir werden jetzt die Spaltenklassen auf die inneren divs anwenden. Wenn wir
auf die Seite index.html zurückgehen,
beginnen wir jetzt mit der Anwendung der Spaltenklassen.
Gehen Sie also zum Header, zum zweiten inneren div innerhalb des Jumbotron hier,
lassen Sie mich eine Klasse als Spalte 12, Spalte sm-6 anwenden.
Also, hier
wird der Inhalt in diesem ersten div die gesamte Zeile für extra kleine Bildschirmgrößen
einnehmen und dann die Hälfte der Zeile einnehmen, deshalb Spalte
sm-6 für kleine bis extra große Bildschirmgrößen.
Nun, ähnlich für das zweite div hier,
obwohl es dort keinen Inhalt enthält,
werde ich die Spaltenklassen hier als Spalte 12 und dann Spalte sm definieren.
Beachten Sie also, dass
ich hier durch Angabe von Spalte 12 explizit feststelle, dass für extra kleine Bildschirmgrößen, was auch immer Inhalt
in diesem div ist, unter dem Inhalt über hier gestapelt wird.
Und dann für kleine bis extra große Bildschirmgrößen
wird dieser Inhalt die übrige Anzahl an
Spalten in der Zeile für kleine bis extragroße Bildschirmgrößen einnehmen.
Also hier in diesem Fall, da sechs Spalten von diesem Inhalt besetzt sind,
wird dies die restlichen sechs Spalten dorthin bekommen.
Wenn ich hier zu den Inhaltszeilen gehe,
für den Inhalt hier,
also für diesen ersten Inhalt
, der hier ein Label ist,
werde ich die Klassen als Spalte 12,
Spalte sm-4, Spalte md-3 anwenden.
Also, besagt, dass
dies für extra kleine Bildschirmgrößen die gesamte Reihe einnehmen wird, für kleine,
wird es volle Spalten einnehmen,
und dann
wird es für mittlere bis extra große drei Spalten in der Reihe einnehmen.
Nun, so wird der verbleibende Teil von dem Inhalt unten hier besetzt werden
, so dass ich die Klassen als col anwenden,
was anzeigt, dass dies unter
dem Inhalt hier in den extra kleinen Bildschirmgrößen gestapelt
wird, und dann werde ich sagen Spalte sm, was bedeutet, dass dies die verbleibenden acht Spalten hier,
weil vier Spalten von dieser aufgenommen werden,
und dann sagen wir Spalte md,
was bedeutet, dass dies
die restlichen neun Spalten belegen wird, weil drei Spalten
für mittlere bis extra große Bildschirmgrößen durch den Inhalt hier oben aufgenommen werden.
Jetzt, da ich für die erste Inhaltszeile definiert habe,
nehme ich hier die gleiche Spaltenklassenanwendung
und wende sie dann auf die zweite Zeile hier
und auch die dritte Inhaltszeile an.
In ähnlicher Weise werde ich diese kopieren und dann dasselbe auf
die Inhaltsdivs unten anwenden.
So haben wir nun sowohl den Header als auch die Inhaltsspalten dort konfiguriert.
Gehen wir nun nach unten zur Fußzeile.
In der Fußzeile werden Sie feststellen, dass dieses div hier drei innere divs enthält,
also
werde ich für jedes dieser drei inneren divs hier die entsprechenden Spaltenklassen anwenden.
Also für die erste,
die Links zu den verschiedenen Seiten enthält, die Teil dieser Website sein werden,
werde ich eine Spaltenklasse anwenden,
als Spalte vier, Spalte sm-2 hier.
Das bedeutet, dass
dies für extra kleine Bildschirmgrößen vier Spalten belegen wird und für kleine bis extra große,
wird es hier nur zwei Spalten einnehmen.
Dann
werde ich für das zweite div dort die Klassen als Spalte sieben anwenden.
Also beachten Sie, dass ich vier hier und dann sieben hier,
so dass insgesamt 11 Spalten einnimmt.
Ich habe eine Spalte leer gelassen.
Ich komme später zurück, um einen Offset anzuwenden, um sich um die zusätzliche Spalte zu kümmern.
Das ist also Spalte sieben,
und dann col-sm-5 zum zweiten.
Das ist also zwei plus fünf, sieben.
Also habe ich noch fünf Spalten übrig,
die ich für das dritte div hier verwenden kann.
Jetzt für extra kleine Bildschirmgrößen
werden diese beiden Inhalte nebeneinander positioniert,
und dann wird dieses div, das Links zu
einer Social-Media-Website enthält, in einer separaten Zeile unten gestapelt sein.
Aber für kleine bis extra große Bildschirmgrößen
wird die erste zwei Spalten einnehmen,
die zweite wird fünf einnehmen und die restlichen werden
von Social Media-Links hier aufgenommen.
Also für die dritte,
werde ich die Klasse
als col-12 col-sm-4 hier anwenden.
So col-12 col-sm-4, was bedeutet, dass dies
einen separaten Satz von 12 Spalten besetzen wird,
die unter dem vorherigen Inhalt für extra kleine Bildschirmgrößen gestapelt sind,
aber für kleine bis extra große wird es vier Spalten einnehmen.
Also hier sind wir vier plus fünf,
neun plus zwei 11.
So ist eine Säule noch übrig für kleine bis extra große.
So werde ich die Spalte anwenden, die diesem am nächsten liegt.
Nun, wir haben immer noch die hier unten, wo wir die Urheberrechte daran enthalten.
Ich werde die Klasse als Spalte auto anwenden,
was bedeutet, dass dieser Inhalt
gerade genug Spalten belegt, wie es für den Inhalt dort erforderlich ist.
Später werden Sie sehen, dass ich diesen Inhalt in der Mitte des
Bildschirms positionieren werde, wodurch eine weitere Bootstrap-CSS-Klasse verwendet wird.
Darauf kommen wir in der nächsten Übung.
Damit haben wir verschiedene Spaltenklassen auf den Header,
den Inhalt und die Fußzeile angewendet.
Dies ist ein guter Zeitpunkt für uns, um die Änderungen zu speichern und dann gehen und werfen Sie
einen Blick auf die aktualisierte indizierte oder HTML-Seite. Wenn Sie
einen Blick auf unsere index.html Seite werfen,
werden Sie feststellen, wie im Header, der Jumbotron
ist, der Inhalt jetzt nur die Hälfte des Bildschirms dort belegt.
Die andere Hälfte des Bildschirms dieser bestimmten Zeile ist nun leer gelassen. Wenn Sie
zu den Inhaltszeilen kommen,
sehen Sie, dass die Beschriftung auf der linken Seite
drei oder vier Spalten besetzt, je nachdem, welche Bildschirmgröße verwendet wurde,
und der Rest des Inhalts besetzt ist.
Also hier haben wir eine Reihe,
die zweite Reihe und die dritte Reihe.
Und dann die Fußzeile hier können Sie sehen, dass die Links auf der linken Seite sind,
die anderen in der Mitte,
und dann die Social Media Links auf der rechten Seite.
Dies ist also für einen mittelgroßen Bildschirm.
Wenn Sie nun die gleiche Ansicht für eine zusätzliche kleine oder kleine Bildschirmgröße betrachten möchten,
wenn Sie Chrome verwenden,
dann hat Chrome die Entwicklertools, die Sie
aktivieren können, indem Sie auf die Ansicht Entwicklertools klicken,
und wenn die Entwicklertools kommen,
werden Sie feststellen, lassen Sie mich die Größe reduzieren hier.
Sie werden dieses kleine Fenster dort bemerken.
Wenn Sie darauf klicken, wird die ansprechende Ansicht für diese Seiten dort eingeschaltet.
So können Sie sehen, dass hier die Ansicht dieser gleichen Webseite auf einem Pixel zu Website,
die 411 mal 731 im Portraitmodus
ist, so dass eine extra kleine Bildschirmgröße entspricht,
so dass Sie sehen können, wie der Inhalt angelegt ist.
So können Sie den Jumbotron-Inhalt dort
und dann den restlichen Teil des Inhalts unten sehen.
Und dann runter in die Fußzeile.
In der Fußzeile können Sie sehen, wie die Links und Anzeigen nebeneinander angelegt sind.
Jetzt reduzieren Sie die Bildschirmgröße, so dass wir sehen können, wie diese Fußzeile hier angelegt ist.
Also der verbleibende Teil, Sie haben die Links auf der linken Seite,
Sie haben die Adresse auf der rechten Seite,
und dann die Social Media Links unten unten in einer separaten Zeile hier,
und dann das Copyright unten dort.
Das ist also die interessante Ansicht, die wir für extra kleine Bildschirmgrößen sehen.
Zurück zu unserem Code hier,
werde ich jetzt die Reihenfolge und Offset-Klassen auf
diesen Inhalt anwenden, um den Inhalt auf eine etwas andere Weise anzuzeigen.
Also gehe ich hier zur Inhaltszeile,
für die beiden divs, die den Inhalt enthalten,
werde ich die Klassen als
order-sm-last für die erste Zeile hier anwenden.
Und dann für diesen unten hier unten werde ich Ordnung sm zuerst auf die Reihe hier unten anwenden.
Das heißt, wenn dieser Inhalt angezeigt wird,
wird dieser Inhalt auf die linke Seite des Bildschirms gezogen und dann
wird diese Spalte auf die rechte Seite des Bildschirms gedrückt.
So wird dies auf der rechten Seite bestellt und dies wird auf der linken Seite bestellt.
Wie ich in der vorherigen Vorlesung über die Ordnungsklauseln erklärt habe.
In ähnlicher Weise
werde ich es von der zweiten Reihe als solche belassen, aber ab der dritten Zeile werde ich
den gleichen Satz von Bestellklassen anwenden.
Also werde ich hier zur dritten Zeile gehen
und dann die Order-sm-last auf diese anwenden,
und dann werde ich die Order-sm-first auf diese anwenden.
Und so wird dieser wieder
so neu geordnet, dass dieser Inhalt auf
der linken Seite erscheint und dieser Inhalt auf der rechten Seite erscheint.
Dies ist nur eine Möglichkeit, den Inhalt etwas interessanter zu positionieren.
Jetzt gehe ich hier in die Fußzeile,
jetzt werde ich hier eine Offset-Klasse anwenden.
Beachten Sie also, dass ich erwähnt habe, dass diese beiden Spalten vier plus sieben, 11.
Also ist eine Spalte übrig.
Also werde ich eine Offset-1-Klasse auf diese anwenden.
Was bedeutet, dass dieser Inhalt auf diesem div von einer Spalte hier rechts gedrückt wird.
In ähnlicher Weise, da ich Offset eins sagte,
wird dies auf extra kleine bis zu den extra großen Bildschirmgrößen angewendet werden.
Und so ist das die Verwendung der Offset-Klasse.
Nun, da wir die Änderungen vorgenommen haben,
lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite im Browser. Wenn Sie
zu diesem Browser zurückkehren,
sehen Sie nun, wie der Header wie zuvor ist,
aber in der ersten Inhaltszeile
sehen Sie, dass dieser Inhalt auf
die linke Seite und die Beschriftung auf die rechte Seite verschoben wurde.
Die zweite Reihe ist anders wurde wie zuvor beibehalten.
Aber für die dritte werden Sie sehen, dass dies
nach rechts geschoben wurde und dies nach links geschoben wurde.
Das ist also die Verwendung der order-sm-last und order-sm-first Klasse ist da. Wenn
Sie nun in die Fußzeile gehen,
sehen Sie jetzt, dass der Inhalt im ersten div hier um eine Spalte nach rechts gedrückt wurde,.
Sie können also sehen, dass es hier eine Spalte mit Leerzeichen gibt,
und dies wird nicht nach rechts geschoben und die übrigen wurden entsprechend formatiert.
Damit schließen wir die Änderungen
an unserer index.html Seite oder zusätzlicher Seite für diese spezielle Übung ab.
Damit schließen wir diese besondere Übung ab.
In dieser Übung haben wir uns die Verwendung der Container-, Zeilen-
und Spaltenklassen angesehen, um unsere Webseite etwas schöner zu gestalten.
Im zweiten Teil der Übung, die diesem folgen wird, werden
wir mehr hinzufügen, um zu versuchen, die Art und Weise zu verbessern, wie diese Webseiten gerendert werden.
Es ist immer noch nicht zu meiner Zufriedenheit.
Offensichtlich gibt es noch Raum für Verbesserungen.
Dies kann ein guter Zeitpunkt für Sie sein, einen Git-Kommentar mit
der Nachricht Bootstrap Grid Part One zu machen.