Bootstrap 5 bietet mehrere vorgefertigte Kartenlayoutoptionen, um optisch ansprechende und reaktionsfähige Inhaltsabschnitte auf Ihren Webseiten zu erstellen. Hier sind die Schritte zum Erstellen von Bootstrap 5-Kartenlayouts:
“ mit der Klasse „card“ hinzu. Dadurch wird die Grundstruktur der Karte erstellt.
„
„
* Sie können der Karte verschiedene Elemente hinzufügen, z. B. Bilder, Text, Schaltflächen und andere Komponenten.
2. Kartentitel und Text:
* Um Ihrer Karte einen Titel hinzuzufügen, verwenden Sie die Klasse „card-title“ innerhalb eines „h5“- oder „h6“-Elements.
* Verwenden Sie in ähnlicher Weise die Klasse „card-body“, um den Inhalt der Karte zu umschließen, der Absätze, Listen und andere Elemente enthalten kann.
„
Karteninhalt kommt hierher...
„
3. Kopf- und Fußzeile der Karte:
* Sie können einen Kartenkopf hinzufügen, indem Sie die Klasse „card-header“ verwenden, und einen Kartenfuß, indem Sie die Klasse „card-footer“ verwenden. Diese Elemente erscheinen jeweils oben und unten auf der Karte.
„
Ein kurzer Beispieltext zum Erstellen des Kartentitels und zum Erstellen des Karteninhalts.
„
4. Kartenbild:
* Um ein Bild in Ihre Karte aufzunehmen, verwenden Sie die Klasse „card-img-top“ oder „card-img-bottom“. Diese Klassen positionieren das Bild oben oder unten auf der Karte.
„
Karteninhalte können hier platziert werden...
„
5. Karte mit Bild und Text:
* Kombinieren Sie die Bild- und Textkartenlayouts, um Karten zu erstellen, die sowohl Bild- als auch Textinhalte enthalten.
„
Kartentitel
Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.
„
6. Horizontale Karte:
* Verwenden Sie die Klasse „card-horizontal“, um horizontale Kartenlayouts zu erstellen. Horizontale Karten eignen sich besonders zum Anzeigen von Inhalten in einem rasterbasierten Layout.
„
Kartentitel
Karteninhalt kommt hier...
„
7. Kartengruppen:
* Um mehrere Karten zu gruppieren, packen Sie sie in ein „
“-Element mit der „card-group“-Klasse. Dadurch entsteht ein visuell verbundener Kartensatz, der angemessen auf unterschiedliche Bildschirmgrößen reagiert.
„
„
Bootstrap 5 bietet viele weitere Anpassungsoptionen für Kartenlayouts, z. B. das Hinzufügen von Rahmen, Hintergründen, Textfarben und mehr. Eine umfassende Liste mit Optionen und Beispielen finden Sie in der offiziellen Bootstrap-Dokumentation.
