Im letzten Post zu diesem Thema haben Sie den Container von Bootstrap 5 kennen gelernt. Aber bevor man eine Website programmiert, selbst eine einfache, sollte man sich Gedanken über die Struktur machen. Html 5 gibt uns hier einige Möglichkeiten an die Hand.
Um hier keine Verwirrung aufkommen zu lassen, lohnt sich ein genauer Blick auf die Details.Das Html Dokument
Mit Dokument ist die komplette Html Datei gemeint. Diese beinhaltet Informationen die im Browser dargestellt werden und solche die dem Browser helfen, die Html Datei korrekt im Browser darzustellen.
Das <head>...</head> Element zum Beispiel wird zum überwiegenden Teil nicht im Browser dargestellt. Trotzdem ist es für eine Website unverzichtbar. Im Gegensatz dazu, wird das allermeiste, was wir im <body>...</body> Element programmieren, im Browser sichtbar sein.
Body - der Körper
Mit Html5 können wir, müssen aber nicht, den Body Bereich noch weiter unterteilen:
<header>...</header> : Mit diesem Tag kennzeichnen Sie den Inhalt als Kopfbereich. Empfohlene Inhalte sind zum Beispiel ein Logo, Navigationslinks, aber auch ein einführender Text zum eigentlichen Inhalt der Seite.
<main>...</main> : Mit diesem Element kennzeichnen Sie den eigentlichen Inhalt der Website. In einem Html 5 Dokument können Sie nur einen Bereich als main definieren.
<footer>...</footer> : Die Fußzeile enthält üblicherweise Angaben wie Impressum, Kontakt oder Links zu verwandten Dokumenten.
Hier ein kleines Beispiel:
Der Code oben ist nicht schwer zu verstehen:
Unsere ganze Struktur befindet sich in einem Bootstrap 5 container-fluid. Das heisst er wird immer versuchen 100% der verfügbaren Anzeigefläche zu beanspruchen.
<header>...</header> ; Innerhalb des Elements befindet sich ein div Tag. Diesem wird die Klasse header zugewiesen. Dabei handelt es sich nicht um eine Bootstrap 5 Klasse, sondern um eine eigene css3 Klasse. Wir werden sie später erstellen. Der Tag steht außerhalb von Reihen und Spalten.
<main>...</main> : Der Inhalt von main besteht aus einer Reihe und zwei Spalten. Die einte Spalte nimmt 3 von 12 des Bootstrap 5 Gridsystems in Anspruch, die andere 9.
<footer>...</footer> : Die Fußzeile steht außerhalb der Reihen und Spalten. Mit der Zuweisung einer Klasse wird die Formatierung durch css3 Anweisungen vorbereitet.
Das Ergebnis von diesem Code sieht wie folgt aus:
Das ist noch wenig beeindruckend. Wenn Sie aber den Headbereich im Code oben noch einmal betrachten, werden Sie sehen, das wir eine css3 Datei eingebunden haben: meinecss3.css . Diese gilt es jetzt mit Leben zu füllen. Betrachten Sie folgenden Code:
.header{
text-align: center;
background-color: #f5f5f5;
height: 40px;
}
.content{
background-color: #eceff1;
min-height: 500px;
}
.footer{
background-color: #e8f5e9;
height: 40px;
}
Sie sehen oben den css3 Code für drei Klassen die im Html Code verwendet werden. Das Format einer css3 Klasse ist simpel: .klassenname{Befehle innerhalb geschweiften Klammern, durch ; getrennt } .Ich gehe jetzt auf die einzelnen css3 Befehle nicht ein. Das ist ein Thema für einen anderen Post. Aber trotzdem eine kurze Erklärung:
.header{...} : Mit dieser Klasse wird der Text zentriert, die Hintergrundfarbe gesetzt und die Höhe des Elements auf 40px fixiert
.content{...} : Mit dieser Klasse wird die Hintergrundfarbe gesetzt und die Mindesthöhe des Elements auf 500px gesetzt.
.footer{...} : Mit dieser Klasse wird die Hintergrundfarbe gesetzt und die Höhe des Elements auf 40px fixiert.
Das Ergebnis sieht wie folgt aus:
Schlusswort: Wenn Sie Bootstrap 5 verwenden, werden Sie auf zwei Arten von css3 Klassen treffen. Die einten werden von Bootstrap zur Verfügung gestellt, die anderen werden Sie selbst entwerfen. Bis bald.
Kommentare
Kommentar veröffentlichen