Unsere nächste Übung befasst sich mit Möglichkeiten, Inhalte auf unserer Webseite anzuzeigen.
Sie betrachten, wie wir Tabellen in unsere Webseite aufnehmen können und wie wir
diese Tabellen mit Bootstrap-Klassen für Styling-Tabellen formatieren können,
einschließlich des responsiven Designs von Tabellen.
Wir werden uns auch eine andere vielseitige Komponente ansehen
, die in Bootstrap verfügbar ist, die als Karte bezeichnet wird. Mit
einer Karte können Sie Inhalte auf Millionen von Arten anzeigen.
Wir werden uns also zwei verschiedene Möglichkeiten ansehen, eine Karte zum Anzeigen von Inhalten zu verwenden.
Später werden wir die Verwendung von Karten
für zukünftige Designs bestimmter Teile unserer Website immer wieder sehen.
Um zu beginnen, öffnen Sie die Seite aboutus.html.
Wir werden eine Tabelle und zwei Karten
in die aboutus.html Seite einfügen, um eine Karte anzuzeigen.
Lassen Sie uns zuerst langsam nach unten scrollen, bis nach dieser Karte für Führungsinformationen,
und genau dort werde ich ein anderes div vorstellen
, in dem ich die Tabelle hier einschließen werde.
Also, ich werde hier eine neue Zeile vorstellen,
mit der Klasse als Zeileninhalt.
Und in diesem div
werden wir eine Spalte vorstellen, die die Tabelle hier hosten wird.
Also, ich werde eine Spalte, Spalte 12,
Spalte sm-9 einführen und das div schließen.
Und in div, lassen Sie mich hier eine Überschrift geben
Fakten und Zahlen und schließen Sie die h2.
Gleich danach möchte ich ein anderes div vorstellen,
dass die Klassen sm und Spalte sm-3 spalten und dieses div dort abschließen.
Im Moment werden wir das zweite div leer lassen.
Ich werde hier die Tabelle in das erste div ausfüllen und
dann werden wir einen kurzen Blick auf die Tabelle werfen, nachdem ich den Code für die Tabelle hinzugefügt habe.
Also hier habe ich im Code für die Tabelle aufgelistet.
Werfen wir einen kurzen Blick auf den Tisch und dann kommen wir zurück, um diesen Code hier zu besprechen.
Gehen Sie zu unserer About Seite, an der wir bereits von früher gearbeitet haben,
nach dem Abschnitt Corporate Leadership,
sehen Sie hier eine neue Zeile, die die Tabelle einführt.
Beachten Sie also, wie die Tabelle gestylt ist,
also haben wir den Header mit einem h2 darin enthalten,
aber konzentrieren wir uns speziell auf diese Tabelle.
Sie sehen also, dass diese Tabelle
mit einigen Bootstrap-Klassen formatiert wurde, die verwendet werden, um die Tabelle zu verbessern.
Die Kopfzeile wurde mit einem dunklen Hintergrund gerendert,
und dann sind die Regeln alle so gestaltet, dass alternative Zeilen
in unterschiedlicher Farbe sind, so dass Sie die Zeilen dieser Tabelle deutlich unterscheiden können.
Dies ist, was in Bootstrap Begriffen wird als gestreifte Tabelle bezeichnet.
Dies ist ein Beispiel dafür, wie Sie eine Tabelle formatieren können.
Interessanterweise, wenn Sie sich die gleiche Tabelle in einem kleinen Gerät ansehen,
würden Sie feststellen, dass die Tabelle immer noch
sichtbar ist, außer dass diese Tabelle jetzt scrollbar wird.
Also, was im Inhalt angezeigt werden kann, wird angezeigt und der
Rest der Tabelle kann horizontal an Ort und Stelle gescrollt werden.
Dies ist also die responsive Komponente von Bootstrap Unterstützung für Tabellen in Aktion.
Jetzt gehen wir und werfen einen Blick auf den Code selbst.
Jetzt ist diese Tabelle offensichtlich ziemlich einfach,
sie hat eine Reihe von Zeilen und einige Spalten.
Sie werden also erwarten, dass ich
dort die typischen th, td und tr Tags verwende. Wenn Sie
zurück zum Code wechseln,
werden Sie feststellen, dass ich diese Tabelle in
div einschließe, auf die ich die Klassentabelle ansprechend angewendet habe.
Dies ist es, was diese Tabelle reaktionsschnell macht, so dass
Sie auf kleineren Bildschirmen horizontal in der Tabelle scrollen können.
Beachten Sie nun für die Tabelle selbst, wie ich zwei Klassen angewendet habe.
Eine ist die Tabellenklasse,
also überschreibt dies das
Standard-Tabellenrendern in Browsern, indem Bootstrap eigene Klassen bereitgestellt wird.
Und der zweite sagt Tisch gestreift.
So entwirft hier eine Tabelle mit alternativen Zeilen in verschiedenen Farben.
Dann der Kopf selbst,
so können Sie sehen, dass die Header hier mit der Klasse thead-dark beschrieben,
so dass dies macht den Kopf dunkel.
Und dann sehen Sie die Tabelle zeichnen selbst hier mit den th Tags beschrieben.
Dies ist also Standardtabellendefinition.
Der Hauptteil der Tabelle selbst ist die Standard-HTML-Verwendung von tr
und td und th Elemente, die Sie bereits in html5 vertraut sind.
So ist das, was der Tisch konstruiert ist,
und dann schließen Sie den Tischkörper. Das war's also.
Also wir alles, was an Bootstrap selbst einzigartig ist, ist die Anwendung
dieser spezifischen Bootstrap-Klassen auf
das Tabellenelement selbst, um es weiter zu stylen,
um in eine Bootstrap-Design-Webseite zu passen.
Die nächste Komponente, die ich der
Seite aboutus.html hinzufügen werde, ist eine Kartenkomponente in Bootstrap.
Die Kartenkomponente ermöglicht es uns, Inhalte anzuzeigen,
indem Sie sie vom Rest dieses Inhalts abheben.
Jetzt hier, scrollend zur ersten Zeile hier,
dort haben wir unsere Geschichte in der zweiten div Verwendung,
beachten Sie, dass das erste div bereits col-sm-6 besetzt,
das zweite div ist derzeit leer.
Also zu diesem div
werde ich in der Klasse als col-sm hinzufügen.
Danach, wenn ich in dieses div gehe, werde ich hier ein anderes div zur Klassenkarte vorstellen.
Also in diesen div
werde ich meine Karte aufbauen, um hier einige Inhalte anzuzeigen.
Also in diesem div, werden wir ein h3 vorstellen, dass
die Klasse als card-header bg-primary.
Sie werden also sehen, dass diese h3 als
Kartenüberschrift mit diesem Hintergrund als primärer
und dann Text weiß angezeigt wird, welche Bootstrap-Klasse den Text definiert, um weiß in der Farbe zu sein.
Und dann in diesem h3,
werde ich den Titel für diese Karte hier vorstellen, die
„Fakten auf einen Blick“ ist.
Damit ich hier einige Inhalte in diesem div anzeigen kann.
Nun, zu dieser Karte, als
nächstes werde ich in einem anderen inneren div
hier mit der Klasse als Karte-Körper hinzufügen,
und
in diesem Karte-Körper wird der tatsächliche Inhalt, der auf dieser Karte angezeigt wurde.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite. Wenn wir
auf unsere Webseite gehen,
können wir bereits sehen, dass die Karte Gestalt in unserer Webseite annimmt,
so dass Sie sehen können, dass die linke Hälfte von der Geschichte besetzt ist
und in der rechten Hälfte sehen Sie die Karte an Ort und Stelle gesetzt.
Lassen Sie uns einige Inhalte in dieser Karte hinzufügen.
Wenn ich in diesen Kartenblock
gehe, werde ich jetzt eine Beschreibungsliste verwenden
und diese Beschreibungsliste in Bootstrap ermöglicht es mir,
die Zeilen- und Spaltenklassen darauf anzuwenden und dadurch den Inhalt zu formatieren.
Also in dieser Beschreibungsliste
werde ich
in der dt hinzufügen, dass die Klasse und col-6 hier,
also bedeutet, dass dies sechs Spalten
in dieser Beschreibungsliste einnehmen wird, die selbst eine Zeile hier ist.
So verschachtelt, wie Sie hier ins Bild kommen sehen.
Also zu diesem dt
werde ich diesen Beschreibungstitel hier hinzufügen,
und dann unten werde ich die dd mit
der Klasse col-6 hier hinzufügen und dann kann ich in einem Kontext hier hinzufügen.
Und dd hier.
Lassen Sie uns die Änderungen speichern und werfen Sie einen kurzen Blick auf unsere Karte. Wenn Sie
auf unsere Karte gehen, können Sie jetzt sehen, wie
die Beschreibungsliste mir erlaubt, Informationen anzuzeigen.
In meiner Karte sehen Sie die linke Seite und die rechte Seite deutlich angezeigt.
Hier nutzen wir die Beschreibungsliste und
fügen die Informationen dort hinzu.
Lassen Sie mich die restlichen Teile hier, indem Sie den Code hinzufügen,
und dann kommen Sie zurück und werfen Sie einen Blick auf die endgültige Version dieser Karte.
Hier können Sie sehen, dass ich das Hinzufügen in
den restlichen Teilen meiner Beschreibungsliste abgeschlossen habe.
Werfen wir einen kurzen Blick auf unsere endgültige Version dieser Karte.
Werfen Sie einen Blick auf die Karte,
und wie es nimmt Gestalt.
Hier können Sie nun sehen, wie wir eine Karte verwenden können, um
einige Inhalte auf unserer Webseite anzuzeigen und sie
von den restlichen Inhalten auf der Webseite zu unterscheiden.
Eine Karte ist also eine sehr vielseitige Komponente, mit der wir Inhalte wie diesen anzeigen können.
Fahren wir mit dieser Übung fort und
fügen Sie dieser Webseite eine weitere Karte hinzu.
Gehen wir nun wieder zurück zu unserer aboutus.html Seite.
Und direkt unter der Karte, die wir bereits zuvor hinzugefügt haben,
werde ich hier ein anderes div mit der Klasse „col-12" hinzufügen.
Und dann, in diesem div,
werde ich hier eine andere Karte konstruieren, um einige zusätzliche Informationen anzuzeigen.
Also in diesem div,
werde ich eine Karte mit
der Klasse „card card-body bg-light“ konstruieren.
Also, Sie werden sehen, dass ich hier sowohl die Karte als auch den Kartenkörper auf das gleiche div anwende.
Das bedeutet also, dass diese bestimmte Karte
keinen Kartenkopf haben wird, sondern nur den Kartenkörper hier enthält.
Und dann bedeutet das bg-light, dass der Hintergrund in verblasster Farbe sein wird.
Etwas von einer gräulichen Farbe hinzugefügt, um den Hintergrund.
Dies sucht also auch diese Karte abgesehen vom Rest des Inhalts hier.
Nun, in dieser Karte,
werde ich einen Blockcode verwenden, um
dort einige interessante kleine lustige Informationen anzuzeigen.
Also werde ich ein Blockquote verwenden.
Dies ist auch ein HTML-Tag hier.
Und dann werde ich die Blockquote-Klasse von Bootstrap anwenden.
Bootstrap stylt dieses Blockquote auf seine eigene Weise.
Also lasst uns das Blockquote schließen.
Und in diesem Blockquote
werde ich hier ein Zitat hinzufügen.
Also beginne ich mit einem p
und wende eine Klasse namens mb-0 an.
Die mb-0 ist eine Dienstprogrammklasse, die Bootstrap bereitstellt.
Was das bedeutet, ist Margin-Bottom Null.
Für diese besondere, was auch immer es in diesem p-Tag enthalten ist,
haben wir einen unteren Rand von Null.
Und das hilft mir, den Inhalt hier korrekt anzuzeigen.
Also hier werde ich den tatsächlichen Inhalt dort hinzufügen
und dann dieses p schließen, also enthält dieses p das eigentliche Zitat.
Nun, zu diesem Zitat,
damit Sie sehen, dass
Sie in Ihrem Inhalt auch Zitate in Ihren Code einfügen können.
Dazu kann ich auch eine Fußzeile mit der Klasse hinzufügen.
Also lassen Sie mich den Fußzeileneinzug drücken.
Diese Fußzeile ist also auch eine Klasse, die blockquote unterstützt.
Was auch immer Sie in das Blockquote einfügen,
zusammen mit der Fußzeile,
wird es Ihnen ermöglichen, den Autor dieses Zitats anzuzeigen.
Also hier schließe ich den Autor ein,
und dann noch einen.
Mit dem Zitat kann ich sogar die Quelle dieses Zitats zitieren.
So können Sie das sehen.
Auch hier ist dies nur ein Zitat, das ich nur zum Spaß verwende, um Ihnen zu zeigen,
auch zur gleichen Zeit zu veranschaulichen,
wie das Blockquote funktioniert
und wie wir eine andere Art von Karte in Bootstrap erstellen können.
Damit haben wir den Code für die Anzeige des Blockquote hier hinzugefügt.
Lassen Sie mich sehen, ob sich das ändert,
und dann werden wir einen Blick darauf werfen, wie dieses Zitat auf unserer Webseite angezeigt wird. Wenn Sie
zum Browser gehen,
können Sie auf unserer Seite sehen, dass unsere Geschichte und die Fakten auf einen Blick nebeneinander angezeigt werden.
Unten unten habe ich dieses lange Stück Inhalt hier.
Werfen wir einen Blick auf die gleiche Seite in einem extra kleinen Bildschirm.
In einem extra kleinen Bildschirm
können Sie sehen, dass die Geschichte und die Fakten oben gestapelt sind,
und das Zitat ist direkt unten hier in seiner eigenen Karte.
So können Sie zwei Karten sehen,
eine unter der anderen hier,
und dann die Tabelle selbst unten angezeigt.
Die Tabelle selbst ist also eine scrollbare Tabelle hier.
Damit schließen wir diese Übung ab.
In dieser Übung
haben wir gelernt, wie wir Tabellen und Karten für die Anzeige von Inhalten auf unserer Webseite verwenden können.
Jetzt, da wir diese Übung abgeschlossen haben,
ist es ein guter Zeitpunkt, ein Git-Commit zu machen.