In der vorangegangenen Vorlesung
haben wir etwas über Responsive Design erfahren.
Wir haben auch kurz erwähnt, dass das Bootstrap-Grid-System
für die Unterstützung von responsive Websites ausgelegt ist.
Wie unterstützt Bootstraps Grid dies?
Und was genau beinhaltet Bootstrap Grid,
das es uns ermöglicht, responsive Websites zu gestalten?
Lassen Sie uns ein wenig mehr Details über das Bootstrap-Grid-System sprechen,
und wie es als nächstes die Reaktionsfähigkeit unterstützt.
Wir haben die Verwendung des Ansichtsfenster-Meta-Tags in der vorherigen Lektion gesehen,
als wir die erste Übung zum Einrichten von Bootstrap auf unserer Seite index.html gemacht haben.
Ich habe dann kurz auf diese spezielle Zeile im Code Bezug genommen.
Lassen Sie uns versuchen zu verstehen, warum wir dies in unserer index.html Seite verwenden.
Was wir hier angeben, ist, dass,
wenn unsere Webseite vom Browser in einem bestimmten Gerät gerendert
wird, deren Rendering im Browser die Größe des Bildschirms berücksichtigt und
automatisch das Rendering der Seite an die Bildschirmbreite des Geräts angepasst wird.
Auf diese Weise haben wir ansprechende Klassen,
CSS-Klassen, die in unser UI-Framework integriert sind,
dann wird sichergestellt, dass unsere Webseite
für diese bestimmte Bildschirmgröße korrekt gerendert wird.
Hier kommt das Bootstrap Grid System zu unserer Rettung und
ermöglicht es uns, responsive Websites zu entwerfen.
Also, noch einmal, betont diesen Punkt,
Bootstrap Grid ist so konzipiert, dass es reagiert.
Sie haben bereits gesehen, was das bedeutet in der vorherigen Vorlesung,
und mobile zuerst, die wir bereits in der vorherigen Vorlesung diskutiert haben und dann
fließend, automatisch an die Bildschirmbreite anpassen.
Das Bootstrap-Raster nutzt das CSS-Flexbox-Layout.
Das CSS Flexbox-Layout, das von
den neueren Versionen der verschiedenen Browser unterstützt wird,
ermöglicht wesentlich einfachere und flexiblere Layout-Optionen in CSS.
Nun, die eigentliche Diskussion darüber,
wie CSS Flexbox-Layout funktioniert, geht über den Rahmen dieses Kurses hinaus.
Wir werden uns darauf beschränken, wie CSS Flexbox
von Bootstrap für sein Grid-System genutzt wird.
Frühere Bootstrap hatte ein eigenes Grid-System, das vor dem CSS Flexbox-Layout war,
aber die neueste Version von Bootstrap
hat das CSS-Flexbox-Layout als Standard für das Bootstrap-Raster gemacht.
Dieses Flexbox-Layout kann
dynamische Inhalte leicht verarbeiten und die Container an den dynamischen Inhalt anpassen
und kann sich auch leicht an die unbekannte Größe des
tatsächlichen Inhalts anpassen, der in den Containern eingeschlossen ist.
Das Flexbox-Layout unterstützt auch das richtungsunabhängige Layout.
Was das Flexbox-Layout zu den Bootstrap-Rastern bringt, ist die
Möglichkeit, den Inhalt innerhalb eines übergeordneten Elements einfach vertikal auszurichten.
Wir werden die Verwendung dieses in der folgenden Übung sehen.
Außerdem ermöglicht es eine einfache Neuanordnung der Inhalte
über verschiedene Geräte und Bildschirmauflösungen mit Hilfe von Medienabfragen.
Wieder werden wir ein wenig davon in der Übung sehen, wie Bootstrap
das nutzt, um interessante Möglichkeiten zum Auslegen von Inhalten zu unterstützen.
Auch dieser Inhalt selbst,
die Content-Container können auch so konzipiert werden, dass Spalten mit gleicher Höhe, so dass
der Content-Container mit der größten
Höhe bestimmt die Höhe aller verbleibenden Container, die in der gleichen Zeile angeordnet sind.
Lassen Sie uns jetzt ein wenig mehr Details über das Bootstrap-Grid und wie es tatsächlich funktioniert.
Die Art und Weise, wie das Bootstrap-Raster funktioniert,
besteht darin, ein Container plus auf die äußerste Ebene anzuwenden.
Wir könnten ein div verwenden, um
das Element zu definieren, für das wir die Container-Klasse im Allgemeinen anwenden.
Der Container ist die äußerste Einheit, in der der tatsächliche Inhalt ausgelegt ist.
Bootstrap unterstützt sowohl die Container-Klasse, die ein Layout mit fester Breite ist,
was bedeutet, dass der Inhalt selbst auf eine feste Breite auf dem Bildschirm beschränkt ist.
Diese Container-Klasse ermöglicht es dieser festen Breite, sich automatisch an
die Größe des Bildschirms anzupassen, indem Sie Medienabfragen verwenden, so dass
das responsive Design in unsere Rettung kommt.
Später werden wir sehen, wie sich dieser Container an verschiedene Bildschirmgrößen anpasst.
Jetzt haben wir auch die Flexibilität, in
anderen klassischen Behälterflüssigkeit
zu verwenden, was es dem Behälter ermöglicht, sich automatisch an die Größe des Bildschirms anzupassen.
Aber der Container mit fester Breite,
fixiert die Größe der tatsächlichen Layoutbreite.
Innerhalb des Containers wird der Inhalt in Form von Zeilen ausgelegt,
also normalerweise, was wir tun würden, ist innerhalb
und außerhalb von div, auf das wir die Container-Klasse anwenden, wir werden
ein inneres div einschließen, auf das wir die Zeilenklasse anwenden werden.
Der Inhalt selbst wird also vertikal in mehrere Zeilen unterteilt.
Und sobald dies in Zeilen innerhalb jeder Zeile unterteilt ist,
können Sie den Inhalt dann mithilfe von Spalten anordnen.
Also, jede Zeile in Bootstrap,
wird in 12 gleich große Spalten unterteilt.
Jetzt können Sie Ihren Inhalt so gestalten, dass er eine beliebige Anzahl dieser 12 Spalten belegt.
Also, und die Tatsache, dass sich der Inhalt selbst an
die Bildschirmbreite anpasst und die Zeile selbst
in den Container eingeschlossen wird, passt sich automatisch an die Bildschirmbreite
und auch die Spalten an,
die 12 Spalten werden bestimmt.
Ihre Breiten werden von der Reihe selbst bestimmt.
Also, was bedeutet, dass für eine andere Bildschirmgröße,
unabhängig von Inhalt, die Sie Layout alle diese 12 Spalten
automatisch an die Breite anpassen, die für den Inhalt erlaubt ist.
So ist die Reaktionsfähigkeit
in das Bootstrap-Grid-Verfahren zum Auslegen des Inhalts integriert.
Also, wie genau gestalten wir den Inhalt?
Darüber reden wir in den nächsten Folien.
Das Bootstrap-Raster selbst
stellt uns fünf Klassen zur Verfügung, um standardmäßig verschiedene Bildschirmgrößen anzugeben.
Es gibt eine Standardklasse, die alle Bildschirmgrößen abzielt,
beginnend von extra klein bis extra groß.
So
ist der gesamte Bereich der Bildschirmbreiten in Bootstrap Begriffen, unterteilt in extra kleine, kleine
, mittlere, große und extra große Bildschirmgrößen.
Dann schauen Sie sich an, wie diese verschiedenen Klassen
von Bildschirmgrößen detailliert in einer der späteren Folien bestimmt werden.
In Ihrem Code
werden Sie also die Layoutspezifikation identifizieren,
indem Sie sm für die kleine Bildschirmgröße,
md für medium, lg für groß
und xl für extra große Bildschirmgrößen angeben.
Also, wenn Sie das Layout machen,
wie wir in der vorherigen Folie gesehen haben,
ist jede Zeile in einem Bootstrap-Gittersystem in 12 Spalten unterteilt.
Jetzt werden wir Layout Inhalt mit dem, was als die Spaltenklassen genannt wird.
Für die Spaltenklassen
können wir angeben, wie das Layout für verschiedene Bildschirmbreiten ausgeführt wird.
Sehen Sie sich die Details dazu später in den nachfolgenden Folien an.
Aber lassen Sie mich schnell darauf aufmerksam machen, wie wir die Spaltengrößen angeben.
Sie können die Spaltengrößen als col angeben,
was eine der Klassen ist, die sie col-sm für
small und col-md für mittel und groß und extra groß und so weiter sagen werden.
Nun werden diese Spaltenklassen verwendet, um
genau anzugeben, wie viele Spalten in einer Zeile jeder Inhalt belegen wird.
Wie funktioniert das?
Das sehen wir auf der nächsten Folie.
Also, wenn wir zurück zu unserem Bootstrap Grid gehen,
nehmen wir an, wir haben ein Stück Inhalt und wir wollen die Ruhe der Inhalte.
Wir können angeben, dass dieser Inhalt in einem anderen div eingeschlossen ist,
auf das wir Spaltenklasse anwenden,
wie zum Beispiel col-sm-5.
Also, in diesem Fall, was wir spezifizieren, ist, dass für kleine bis extra große Bildschirmgrößen,
dieser Teil des Inhalts fünf Spalten aus diesen 12 Spalten besetzen wird.
Jetzt wirst du mich sofort fragen,
was ist mit dem zusätzlichen Smocking?
Wenn es nicht explizit für die extra intelligente Lockette
durch die gesamte Breite der 12 Spalten angegeben
wird, können sie explizit angeben, aus welchem Bereich das Spaltenlayout wie viele Spalten belegen soll.
Also, in diesem speziellen Fall,
wenn ich spezifiziere, nenne ich sie nur sm-5,
was ich meine, ist, dass dieser bestimmte Inhalt, der in diesen div eingeschlossen ist,
fünf Spalten für alle Bildschirmgrößen einnehmen wird,
von klein bis extra groß.
Jetzt sehen wir, dass
wir von den 12 Spalten bereits fünf Spalten besetzt haben.
Es sind noch sieben weitere Spalten übrig.
Ich könnte ein anderes Stück Inhalt nehmen und es dann rechts davon positionieren,
indem ich ein anderes div verteidige und dann Spalte sm-7 anwende.
Nun, in diesem Fall
sehen Sie, dass 5 plus 7 gleich 12 ist.
Also, diese zwei Teile von Inhalten, die in den beiden divs eingeschlossen sind,
werden jetzt nebeneinander positioniert,
und die Summe von ihnen nimmt die gesamte 12 Spaltenbreite ein.
So können wir angeben und die Arbeit mit den 12 Spalten
bei der Definition des Layouts der aktuellen Ebene.
Mit der Verwendung des CSS-Flexbox-Layouts
unterstützt Bootstrap auch die sogenannten Auto-Layout-Spalten.
Also, in diesem Fall
kann ich einfach
Spalte sm angeben, ohne anzugeben, wie viele Spalten es besetzen soll.
Aber falls ich drei Doobs Breite Spalte sm in meinem Saum 5 spezifiziere,
dann wird das Bootstrap-Gitter diese Inhalte automatisch in diesen divs positionieren
,
nebeneinander, so dass jeder von ihnen ein Drittel der Gesamtbreite erhält.
Da wir hier 12 Spalten haben,
erhält jede dieser drei vier Spalten.
Und dies wird automatisch durch den Bootstraps Layout-Mechanismus erledigt.
Jetzt können wir explizit
die Anzahl der Spalten angeben, die ein bestimmtes Stück Inhalt besetzen.
Angenommen, ich gebe drei Spaltenklassen an,
aber die mittlere gebe ich Spalte sm 6.
Was passiert, ist, wenn Bootstrap das Layout ausführt,
wird die mittlere sechs Spalten besetzen,
und dann werden die linken und die rechten Teile des Inhalts besetzen, was ausgelassen wird.
Also, von den 12 Spalten, die wir haben,
wenn 6 Spalten, die durch das mittlere Stück des Inhalts besetzt,
dann haben wir mit uns verlassen 6 weitere Spalten und das wird gleichmäßig
zwischen dem Inhalt und den beiden Seiten dieser mittleren Spalte aufgeteilt werden.
Also, jeder von ihnen erhält freie Spalten von Speicherplatz jeder.
So wird das Layout automatisch mit Bootstrap gemacht.
In der Übung werden wir verschiedene Kombinationen der Verwendung dieser Art
von Spezifikationen sehen, wie viele Spalten jedes Stück Inhalt im Farblayout einnehmen wird.
Diese Tabelle fasst zusammen, wie Bootstrap
die verschiedenen Bildschirmraster behandelt und wie Sie diese Bildschirmraster identifizieren.
Wie ich bereits angegeben habe,
teilt Bootstrap den gesamten Bildschirmbreitenbereich in 5 Klassen auf.
Die extra kleinen Bildschirme sind diejenigen, deren Gitter unter 776 Pixel liegen.
Kleine Bildschirme sind solche, die zwischen 576 und unter 768 Pixeln liegen.
Mittlere Bildschirme von 768 bis 992,
groß von 992 bis 1200 und alles etwa 1200 Pixel Breite
wird als ein extra großer Bildschirm behandelt.
So wird das Standard-Bootstrap Grid konfiguriert.
Sobald Sie sich jetzt mit Bootstrap vertraut gemacht
haben, können Sie diese Divisionen auch selbst konfigurieren.
Aber für diesen Kurs
bleiben wir bei der Standardkonfiguration, die Bootstrap unterstützt.
Nun, das Rasterverhalten in diesem Fall
ist, dass alles, was für extra klein ausgelegt ist,
zu jeder Zeit horizontal ist,
für die höheren Bits werden sie auf 2Startbreite reduziert,
aber horizontal um die Bruchpunkte.
Wir werden sehen, wie das in kurzer Zeit mit einigen Beispielen funktioniert.
Jetzt haben wir die Verwendung des Containers in der vorherigen Folie gesehen.
Bei extra kleinen Bildschirmen
wird die Containerbreite automatisch durch die Bildschirmbreite bestimmt.
Aber für klein, mittel,
groß und extra groß
ist die Containerbreite wie angegeben.
Also, wenn Sie das div mit einem Klassencontainer verwenden,
dann sind es für kleine Bildschirme 540 Pixel.
Also, Sie werden feststellen, dass, wenn Sie eine Bildschirmbreite zwischen 576 und 768 haben,
Ihr Inhalt wird in 540 Pixel ausgelegt,
wird in der Bildschirmbreite zentriert.
Der übrige Platz wird also als Ränder auf beiden Seiten dieses Inhalts belassen.
In ähnlicher Weise ist es für mittlere 720 Pixel und so weiter.
Nun geben Sie an, wie viele Spalten jeder Inhalt belegt.
Dann sind die Spaltenklassenpräfixe, die Sie verwenden werden,
.col für extra kleine, .col-sm für kleine,
bis zu extra groß.
Wenn Sie etwas mit.col-md angeben,
gilt dies für mittlere bis extragroße Bildschirme.
Also, wenn Sie eine Col- und einige Zahlen angeben,
dann gilt das für diese bestimmte Bildschirmgröße und alles über diese Bildschirmgröße.
Jetzt ist in allen Fällen der Bildschirmgröße
die Anzahl der Spalten auf 12 Spalten definiert.
Das Raster im Falle von Bootstrap ist auf 12 Spalten ausgelegt und das ist konfigurierbar,
aber der Standardwert ist 12 Spalten.
Der Grund für die Wahl von 12 ist, dass 12 ein gutes Vielfaches von zwei, drei,
vier und so weiter ist.
Es gibt Ihnen also viel Flexibilität in Bezug auf die
Anzahl der Spalten, die Sie für das Layout Ihrer Inhalte auswählen.
Zwischen jeder Spalte, also wenn
Sie zwei Teile des Inhalts nebeneinander mit ihren divs anlegen,
werden sie zwischen diesen beiden Inhaltsstücken eine kleine Rinne sein, die übrig bleibt.
Leerer Leerraum, bei dem die Breite der Rinnenbreite ausgeblendet
wird, die standardmäßig nur 30 Pixel beträgt.
Also, 15 Pixel sind von einem Stück Inhalt und 15 Pixel von anderen Stück Inhalt.
SumTotal zusammen 30 Pixel
Leerraum werden zwischen den beiden Teilen des Inhalts gelassen werden.
Denken Sie darüber nach, wie ein Zeitungsspaltenlayout
ausgeführt wird, und Sie beginnen zu sehen, wie die Korrespondenz zwischen
dem Layout der Zeitungsspalte erfolgt und wie
das Bootstrap-Raster das Layout des Inhalts auf dieser Tonhöhe ausführt.
Bootastrap Raster ermöglicht es Ihnen, Inhalte auf nächster Ebene zu machen,
so dass Sie Inhalte in Inhalte einschließen und dann verschachtelte Inhalte Layout erstellen können.
Außerdem unterstützt es Offsets.
Wir werden die Verwendung von Offsets auch in einigen Beispielen später sehen.
Schauen wir uns also unser erstes Beispiel an, wie Sie Bootstraps-Spaltenklassen anwenden
würden und wie sie tatsächlich auf verschiedenen Bildschirmgrößen gerendert werden würden.
Hier ist ein Beispiel für eine Situation, in der ich auf die beiden divs angewendet,
Spalte Bindestrich 12 und dann Spalte Bindestrich sm Bindestrich fünf für
das rote Stück Inhalt und für
das andere habe ich Spaltenstrich 12 und Spalte sm sieben angewendet.
Die Art und Weise, wie dieser Inhalt angelegt wird, ist für extra kleine Bildschirme,
die zwei Teile des Inhalts werden übereinander gestapelt.
So wird der rote auf dem meeregrün gefärbten gestapelt.
Aber für kleine bis extra große Bildschirme
werden die beiden Inhalte nebeneinander angelegt.
Der Grund dafür ist, weil wir Säule sm fünf und Spalte sm sieben für die beiden gesagt.
Also für kleine bis extra große sind sie nebeneinander angelegt
, so dass der rote Inhalt die ganz links
fünf Spalten besetzt und der Meergrün-Inhalt die rechten sieben Spalten Ihrer Reihe einnimmt,
von kleinen bis extra großen Bildschirmgrößen.
So würden wir das Inhaltslayout für verschiedene Bildschirmgrößen angeben.
Bootstrap bietet auch zusätzliche Klassen,
die als Ordnungs-/Bindestrichen-Klassen bezeichnet werden, mit denen Sie den Inhalt auf dem Bildschirm neu anordnen können.
Also zum Beispiel, wenn Sie eine Bestellung sm zuerst anwenden,
eine Bestellung einige letzte Klasse zu den divs,
wie im Beispiel hier gezeigt wird, in diesem Fall
wird das div, für das Sie die Bestellung sm zuletzt anwenden, auf
die rechte Seite des Bildschirms
geschoben werden und Ordnung sm erste div wird auf die linke Seite des -Bildschirm.
Wenn Sie diese Sortierklassen anwenden, können Sie den Inhalt des Skripts neu anordnen.
Nicht nur dies, die Reihenfolge sm ermöglicht es Ihnen auch, die gleiche Reihenfolge sm ein zu
bestellen sm 12 angeben, um die Reihenfolge anzugeben, in der der Inhalt auf dem Bildschirm gerendert werden muss. Wenn Sie
also eine größere Zahl verwenden,
können Sie den Inhalt auf die rechte Seite
der Zeile verschieben und eine kleinere Zahl verschiebt den Inhalt auf die linke Seite der Zeile.
Ein Beispiel dafür werden wir auch in der Übung sehen.
Die gemischte interessante Unterstützung, die Bootstrap Grid mit der Verwendung
des Flexbox-Layouts bringt, ist die vertikale Ausrichtung des Inhalts.
Die früheren Bootstrap-Versionen,
wie Bootstrap 3 und früher,
hatten nicht die Möglichkeit, Inhalte vertikal auszurichten.
Durch die Verwendung der Flexbox für die Gestaltung des Bootstrap Grids in Bootstrap vier
erhalten wir die Flexibilität, die CSS Flexbox in Bezug auf die vertikale Ausrichtung bringt.
Wenn Sie also möchten, dass der Inhalt vertikal zentriert ist,
dann
würden Sie auf die Zeile die Klasse „Align-Elemente Center“ anwenden.
In diesem Fall
wird also unabhängig von dem Inhalt, der angelegt ist, innerhalb dieser bestimmten Zeile vertikal ausgerichtet.
Der Inhalt, der
die größte Höhe einnimmt, wird also derjenige sein, an dem die verbleibenden
ausgerichtet werden, wenn er in dieser Zeile angeordnet ist, oder wenn Sie die Höhe der Zeile vorher angeben,
wird der gesamte Inhalt vertikal innerhalb dieser bestimmten Zeile zentriert.
Nicht nur das, Bootstrap's Grid unterstützt auch die horizontale Ausrichtung von Inhalten.
Schauen wir uns ein Beispiel an.
Also, wenn Sie Ihren Inhalt so angeben.
Sagen Sie, Sie haben drei Spalten und die erste, die Sie div Klasse Spalte drei angeben,
dann die mittlere Sie sagen div Klasse Spalte auto.
Ich werde in kurzer Zeit zu dieser Spalte Auto zurückkommen.
Und der rechte sagt div Klasse Spalte 3.
In diesem Fall geben wir an, dass der linke und
der rechte Inhalt jeweils drei Spalten besetzen wird.
Die mittlere, wenn ich sage, „Spalte auto“,
bedeutet dies, dass die Anzahl der Spalten, die dieses spezielle div
belegt, automatisch durch den Inhalt bestimmt wird, der darin eingeschlossen ist.
Basierend auf dem Inhalt passt
sich die Anzahl der Spalten, die vom div belegt sind, automatisch an.
In diesem speziellen Fall
wird in diesem Layout dieser Inhalt in vier Spalten untergebracht.
Jetzt haben Sie vier Spalten, die vom mittleren div verwendet werden,
drei Spalten links und drei Spalten rechts.
Also Summe Summe, Sie haben 10 Spalten.
Sie haben also zwei Spalten, die leer bleiben.
Wenn Sie nun für die Zeile angeben,
geben Sie Ausrichtungsinhaltscenter an, dann
wird der gesamte Inhalt in dieser bestimmten Zeile in
Bezug auf die horizontale Zeile zentriert.
Sie können auch den Inhalt linksbündig,
rechtsbündig und ein paar andere Optionen haben.
Details finden Sie in der Bootstraps-Dokumentation. Mit
Bootstrap können Sie auch Spaltenoffsets durchführen.
Wie funktioniert das? Schauen wir uns ein Beispiel an.
In dieser Spalte Offset,
können wir ein Stück Inhalt angeben,
hinzufügen, dass, wenn wir die Klasse als Offset Bindestrich sm Bindestrich eins anwenden.
Was wir spezifizieren, ist für kleine bis extra große Bildschirme
, dieser Inhalt sollte um eine Spalte nach rechts verschoben werden.
Wenn dieser Inhalt angelegt ist, wie Sie sehen können,
wird die ganz links eine Spalte leer gelassen und der Inhalt wird um eine Spalte nach rechts verschoben.
Und Sie können den verbleibenden Inhalt auf der rechten Seite anordnen.
Also Summe, Sie können sehen, dass die beiden divs
11 Spalten belegen, aber eine Spalte nach rechts versetzt.
So können wir das Layout des Inhalts mit einem Spaltenversatz steuern.
Wie Sie sehen können, können
wir mit den Spaltengrößenspezifikationen, der vertikalen und horizontalen Ausrichtung, dem Offset, dem Push und dem Pull und dem Flex zuerst und dem Flex-Last eine Menge Kontrolle darüber bekommen, wie wir
Inhalte für verschiedene Bildschirmbreiten und verschiedene Bildschirmgrößen anlegen .
Bootstrap geht noch weiter, indem es Ihnen erlaubt, Inhalte in divs zu verschachteln.
Wenn Sie zum Beispiel zwei divs angeben,
wie Sie mit Spalte sm fünf und Spalte sm sieben sehen,
werden die beiden Inhalte wie hier gesehen angelegt.
Jetzt, innerhalb des rechten div,
kann ich wieder hineingehen und
die Breite dieses divs in eine Zeile teilen und dann gibt mir diese Zeile automatisch
weitere 12 Spalten für diesen Teil des Bildschirms und dann kann ich das Layout mit
Verschachtelung der divs machen und das Layout für verschiedene Teile dieser Spalte ausführen . Wenn Sie
also so verschachteln,
erhalten Sie noch mehr Flexibilität in der Art und Weise, wie Sie Inhalte in Ihrem Spielfeld anlegen.
Mit all der Diskussion über das Bootstrap Grid System und wie
das Bootstrap Grid verschiedene Möglichkeiten zur Gestaltung von Inhalten unterstützt
, gehen wir jetzt zu unseren nächsten Übungen.
Wir werden das Bootstrap-Raster auf unsere index.html Seite anwenden,
um das Layout des Inhalts innerhalb oder index.html Seite zu tun.
Wir werden auch einige benutzerdefinierte CSS-Klassen verwenden.