So stylen Sie Karten in Bootstrap 5 | Erklärt

Eine Karte in Bootstrap 5 wird als Container oder Box bezeichnet, in dem Inhalte darin einbacken. Es kann aus einem Header, einigen Inhalten und einer Fußzeile bestehen. Es kann durch Hinzufügen von Farben oder Bildern gestylt werden. Diese Bootstrap -Karten gelten als Ersatz für alte Panels, Miniaturansichten oder Brunnen. Wie diese Karten auf verschiedene Weise erstellt und gestylt werden, wurde in diesem Artikel diskutiert.

So erstellen Sie eine Karte mit Bootstrap 5

Machen Sie zum Erstellen einer einfachen Karte einen DIV -Container und weisen Sie sie die zu, die .Karte Klasse und nisten a div im ersten div und zuweisen sie die .Kartenkörper Klasse und platzieren Sie den Inhalt der Karte in dieses Div.

Html

Der oben angegebene Code erstellt eine sehr einfache Karte.

Ausgang

Die Ausgabe zeigt eine einfache Karte an.

So fügen Sie eine Header und Fußzeile in eine Karte hinzu

Wie bereits erwähnt, kann eine Karte aus einem Kopfball und einer Fußzeile bestehen. Daher, damit diese Entitäten die nutzen lassen .Kartenhader und die .Kartenfuß Klassen.

Html

Im obigen Code, um den Header der Karte zu erstellen, verweisen wir einem Div -Container das .Kartenkopfklasse und dann einige Inhalte platzieren, erstellen wir den Körper der Karte, indem wir die verwenden .Kartenkörperklasse und schließlich, um eine Fußzeile zu erzeugen .Kartenfußklasse wird verwendet.

Ausgang

Die oben gezeigte Karte hat eine Header, einen Körper und eine Fußzeile.

So erstellen Sie bunte Karten

Um den Karten Hintergrundfarben zu liefern .BG-Primary, .BG-Sekundär, .BG-Danger, .BG-Warnung, .BG-Success, .BG-Info, .BG-MUTE, .BG-Licht, .BG-Dark.

Html

Im obigen Code werden insgesamt 5 Karten generiert, und jeder wurde eine andere Farbe erhalten. Beachten Sie, dass die Hintergrundfarbeklassen dem Div zugeordnet werden, das das hat .Kartenklasse.

Ausgang

Farbenfrohe Karten wurden erfolgreich erzeugt.

So fügen Sie Titel, Text und Links zu einer Karte hinzu

Wenn Sie Karten generieren, die bestimmte Informationen vermitteln und einige Titel, Text und Links zu dieser Karte hinzufügen möchten, befolgen Sie den unten angegebenen Code.

Html

Titel

Etwas Text.

Um einen Titel hinzuzufügen die .Kartenstitelklasse wurde einem Überschriftenelement zugeordnet (jedes Überschriftenelement H1-H6 kann verwendet werden), um einen Text einzuschließen .Karten-Text-Klasse wurde a zugeordnet

Element und ein Link wurden ebenfalls hinzugefügt und machten zusammen mit einer blauen Farbe durch die Verwendung der .Kartenlinkklasse.

Ausgang

Eine informative Karte wurde erfolgreich erstellt.

So fügen Sie Bildern zu einer Karte hinzu

Wenn Sie Ihren Karten zusammen mit einigen Text und Links Bilder hinzufügen möchten, folgen Sie dem folgenden Beispiel.

Html

Mike Jason

Hallo. Schauen Sie sich mein Profil an.

Um das Bild in die Karte zu platzieren, verwenden Sie die .Karten-Img-Top-Klasse Im Etikett und dann wie im vorherigen Abschnitt erstellen wir einen Kartenkörper und platzieren einen Titel, einen Text und einen Link im Kartengremium. Beachten Sie, dass das Bild außerhalb des Kartenkörpers platziert wurde, damit es die gesamte Breite umfasst, die dem Div -Behälter mit der Klasse zur Verfügung gestellt wurde .Karte.

Ausgang

Wenn Sie jedoch Ihren Titel, Ihren Text und Ihren Verknüpfung über dem Bild platzieren möchten, verwenden Sie die .Karten-Img-Bottom-Klasse. Wie wir im Code -Snippet unten gezeigt haben.

Html

Mike Jason

Hallo. Schauen Sie sich mein Profil an.

Der obige Code generiert eine Karte mit dem unten platzierten Bild und dem über diesem Bild platzierten Titel, Text und Link.

Ausgang

Der .Karten-Img-Bottom-Klasse funktioniert ordnungsgemäß.

So erstellen Sie Kartenbildüberlagerung

Neben dem Platzieren Ihres Inhalts über und unter dem Bild können Sie es auch auf das Bild platzieren. Diese Prozedur wird als Kartenbild -Overlay bezeichnet.

Html

Mike Jason

Hallo. Schauen Sie sich mein Profil an.

Der Code ist der gleiche wie in den vorherigen Abschnitten mit einem geringen Unterschied, der den Inhalt über das Bild platziert, das wir verwenden, die .Karten-Img-Überlagen Klasse statt der .Kartenkörperklasse.

Ausgang

Eine Kartenbildüberlagerung wurde erfolgreich erstellt.

Abschluss

Um eine Karte zu stylen .Kartenhader, und .Kartenfuß Klasse, während alle verfügbaren Hintergrund -Farbkurse zum Erstellen von farbenfrohen Karten verwendet werden können. Verwenden Sie außerdem die .Kartentitel, .Kartentext, .Kartenlinkklassen Fügen Sie einen Titel, einen Text und Links zu einer Karte hinzu. Um Ihre Karten weiter interessant zu machen, können Sie Bilder mit dem hinzufügen .Karten-Img-Top, oder .Karten-Img-Bottom-Kurse. Zuletzt können Sie auch ein Kartenbild -Overlay mit dem erstellen .Karten-IMG-Überlieferungsklasse.