So verwenden Sie Bootstrap 5 -Karten
In diesem Artikel wird die Verwendung von Bootstrap-Karten veranschaulicht, indem die folgenden Aspekte abdeckt:
- So erstellen Sie eine einfache Karte?
- So erstellen Sie eine Kartenheader und Fußzeile?
- So erstellen Sie eine Karte mit Inhalten?
- So erstellen Sie eine Karte mit einem Bild?
- So erstellen Sie eine Schaltfläche auf einer Karte?
- Wie man die Karte stylen?
- So erstellen Sie eine Karte mit Bildüberlagerungen?
- So erstellen Sie Listengruppen auf der Karte?
- So erstellen Sie eine Navigationsleiste auf der Karte?
So erstellen Sie eine einfache Karte?
Der "Karte"Klasse mit dem"Kartenkörper”Wird verwendet, um eine einfache Karte zu erstellen.
Lassen Sie uns das Beispiel durchgehen, um ein besseres Verständnis zu erlangen.
Beispiel
Befolgen Sie in der HTML -Datei die Schritte, um eine einfache Karte zu erstellen:
- Füge hinzu ein "” Element und es einer Klasse zuweisen “Container”. Dies ist ein grundlegender Baustein, der Polsterung und Ausrichtung auf den Inhalt innerhalb eines bestimmten Geräts enthält.
- Dann zu einer Klasse zuweisen “Karte”Verwendet, um eine einfache Karte zu erstellen.
- Um den Inhalt in der Karte anzugeben, erstellen Sie eine DIV mit der Klasse “KartenkörperDas enthält die erforderlichen Daten der Karte:
LinuxHint -Karte
Eine Karte in Bootstrap 5 ist eine Box mit Polsterung um ihren Text und einen Rand.
Ausgang
So erstellen Sie eine Kartenheader und Fußzeile?
Der "Kartenhader" und das "KartenfußUnterricht wird verwendet. Um dies zu tun:
- Setzen Sie das Element mit der Klasse “Container" Und "M-4”.
- Passen Sie die DIV mit der Klasse an “Karte”.
- Legen Sie die Kartenüberschrift mit der Verwendung der Klasse ab “Kartenhader”.
- Die Karteninformationen werden mit der “platziert“KartenfußKlasse auf der Fußzeile der Karte:
Bootstrap 5 Karte
LinuxHint School
Eine Karte in Bootstrap 5 ist eine Box mit Rand und Polsterung um den Text.
Kontakt: xxx-xxx-xxxx
Ausgang
So erstellen Sie eine Karte mit Inhalten?
Sie können der Karte Inhalte hinzufügen, indem Sie die “verwenden“Kartenkörper”Erweiterbarer Inhaltsbehälter. Im Folgenden müssen in dieser Klasse die genannten Klassen einbezogen werden:
- “Kartentitel”Passt den Titel auf der Karte ein.
- “KartentextBeschreibt den Text mit den Styling -Eigenschaften auf der Seite.
- “Kartenlink”Assoziiert einen Link einer anderen Quelle auf der Seite:
LinuxHint -Karte
LinuxHint ist eine hervorragende Tutorial -Website.
Einführungsstunde
Besuche unsere Webseite
Ausgang
So erstellen Sie eine Karte mit einem Bild?
Die beliebteste Möglichkeit, eine Karte zu entwerfen, besteht darin, der Karte ein Bild hinzuzufügen. Um dies zu tun, die Bootstrap “Karten-Img-TopDie Klasse wird wie folgt verwendet:
LinuxHint School
Um weitere Informationen zu erhalten, besuchen Sie unsere offizielle Website.
klicken Sie hier
Kontakt: xxx-xxx-xxxx
Ausgang
So erstellen Sie eine Schaltfläche auf einer Karte?
Das Tastenelement kann der Karte hinzugefügt werden. Implementieren Sie zu diesem Zweck die “BtnKlasse innerhalb des Elements. Der "Btn-Primary”Zeigt die Hauptaktion in einer Gruppe von Schaltflächen an und fügt ihr zusätzliches visuelles Gewicht hinzu:
LinuxHint School
Um weitere Informationen zu erhalten, besuchen Sie unsere offizielle Website.
klicken Sie hier
Kontakt: xxx-xxx-xxxx
Ausgang
Wie man die Karte stylen?
Um den Bootstrap -Karten -Container zu stylen, können viele Klassen so verwendet werden:
LinuxHint
Primärkartenentitel
Wir stellen der Welt Artikel und Videovorträge zur Verfügung.
LinuxHint
Primärkartenentitel
Wir stellen der Welt Artikel und Videovorträge zur Verfügung.
Ausgang
So erstellen Sie eine Karte mit Bildüberlagerungen?
Der "Karten-Img-ÜberlagenDie Klasse passt das Bild als Hintergrund an. Um es zu verwenden, stellen Sie zunächst das Kartenbild mit der Verwendung des „" Schild. Darüber hinaus wird die Breite des Bildes als "festgelegt" gesetzt "100%”:
Videoabteilung
Wir bieten qualitativ hochwertige Videos zu Informatikthemen an.
Mehr Info
Ausgang
So erstellen Sie Listengruppen auf der Karte?
Um die Gruppenelemente auf einer Karte zu identifizieren, implementieren Sie die DIVContainer" Klasse. Fügen Sie dann zusammen mit der Klasse einen „Div“ -Container hinzu “Karte”.
Um eine Liste zu erstellen, wenden Sie die “an" Und "Tags mit geeigneten Klassen:
- Html
- Bootstrap
- JavaScript
Im Folgenden finden Sie die Beschreibung der oben genannten Bootstrap-Klassen:
- Um Listengruppen zu erstellen, die Bootstrap “Listengruppe”Klasse kann angewendet werden. Es hilft, eine Liste von Inhalten für die Karte anzugeben.
- Durch Hinzufügen der “Listengruppe-Flush”, Sie können die Rand-to-Edge-Listengruppenelemente in einem übergeordneten Container anzeigen, i.e., Karten. Dazu entfernt es die abgerundeten Ecken und Grenzen.
- Der "Listengruppe”Definiert die Listenelemente.
Ausgang
So erstellen Sie eine Navigationsleiste auf der Karte?
Sie können den Karten auch eine Navigationsleiste hinzufügen. Insbesondere wird eine ordnungsgemäße, gut ausgerichtete Navigationsleiste unter Verwendung mehrerer Klassen erstellt:
Gesundheitskarte
Folgen Sie dem Leitfaden für Ihre Registrierung
Anmeldung
Hier:
- “NAV-NAV-TABSDie Klasse wird verwendet, um Navigationsregisterkarten zu erstellen.
- “Kartenüberladungstabs”Klasse hilft, die Registerkarten im Kartenheader zu stylen.
- “NAV-ITEM”Bietet Styling für die Navigationselemente.
- “Nav-Link”Wird verwendet, um die Verbindung anderer Navigationsblöcke herzustellen.
Ausgang
Es ging darum, die Bootstrap-Kurse zu verwenden, um gut formatierte Karten zu erstellen.
Abschluss
Bootstrap 5 verwendet zahlreiche Klassen, um die Karten zu stylen und zu erstellen. Diese Klassen tragen dazu bei, Informationen in einem strukturierten Format anzupassen. Einige der Klassen sind “Kartentitel","Kartentext","Kartenhader","Kartenfuß", und viele mehr. Diese Klassen bieten Funktionen wie Angabe der Titels, Text, Header und Kartenfußzeile. Dieser Artikel hat gezeigt, wie Bootstrap 5 -Karten mit unterschiedlichen Funktionen verwendet werden.