Jak stylizować karty w Bootstrap 5 | Wyjaśnione

Karta w Bootstrap 5 jest określana jako pojemnik lub pudełko, które obejmuje zawartość w nim. Może składać się z nagłówka, pewnej treści i stopki. Można go stylizować, dodając do niego kolory lub obrazy. Te karty bootstrap są uważane za zamiennik starych paneli, miniatur lub studni. W tym artykule omówiono te karty i stylizowane na różne sposoby.

Jak utworzyć kartę za pomocą Bootstrap 5

W celu utworzenia prostej karty, zrób kontener Div i przypisz ją .karta klasę i gniazduj div w pierwszej divie i przypisuj ją .CARD-CODO Zajęć i umieść zawartość karty w tej div.

Html

Podany powyżej kod utworzy bardzo prostą kartę.

Wyjście

Wyjście wyświetla kartę podstawową.

Jak dodać nagłówek i stopkę do karty

Jak już wspomniano, karta może składać się z nagłówka i stopki. Dlatego, aby podmioty te korzystały z tych podmiotów .nagłówek karty i .Kartacja zajęcia.

Html

W powyższym kodzie, aby nagłówek karty przypisujemy kontenerowi Div .Klasa nagłówek karty, a następnie umieszczenie treści, tworzymy korpus karty za pomocą .klasa karty i wreszcie, aby wygenerować stopkę .Klasa karty jest używana.

Wyjście

Karta pokazana powyżej ma nagłówek, nadwozie i stopkę.

Jak tworzyć kolorowe karty

Aby zapewnić kolory tła kartom, po prostu użyj dowolnej klasy kolorów tła .BG-Primary, .BG-Secondary, .BG Danger, .Warning BG, .BG-SUCCCESS, .BG-info, .BG-Muted, .BG Light, .BG-Dark.

Html

W powyższym kodzie jest generowane 5 kart, a każda z nich otrzymała inny kolor. Zauważ, że klasy kolorów tła są przypisywane do div, która ma .klasa karty.

Wyjście

Kolorowe karty zostały pomyślnie wygenerowane.

Jak dodać tytuł, tekst i linki do karty

Jeśli generujesz karty, które przekazują pewne informacje i chcesz dodać tytuł, tekst i linki do tej karty, postępuj zgodnie z poniższym kodem.

Html

Tytuł

Jakiś tekst.

Aby dodać tytuł .Klasa karty został przypisany do elementu nagłówka (można użyć dowolnego elementu nagłówka H1-H6), aby dołączyć tekst .Klasa tekstu został przypisany do

Dodano również element i link, który unosił się wraz z niebieskim kolorem, używając .Klasa łącza karty.

Wyjście

Karta informacyjna została pomyślnie wygenerowana.

Jak dodać obrazy do karty

Jeśli chcesz dodać obrazy do swoich kart wraz z tekstem i linkami, postępuj zgodnie z przykładem.

Html

Mike Jason

Cześć. Sprawdź mój profil.

Aby umieścić obraz wewnątrz karty, użyj .Klasa karty-img-top Wewnątrz znacznika, a potem jak w poprzedniej sekcji tworzymy korpus karty i umieszczamy tytuł, tekst i link wewnątrz nadwozia karty. Zauważ, że obraz został umieszczony poza korpusem karty, aby uczynić całą szerokość, która została dostarczona do kontenera Div posiadającego klasę .karta.

Wyjście

Jeśli jednak chcesz umieścić tytuł, tekst i link nad obrazem, użyj .Klasa karty-img-dana. Jak pokazaliśmy w fragmencie kodu poniżej.

Html

Mike Jason

Cześć. Sprawdź mój profil.

Powyższy kod wygeneruje kartę z obrazem umieszczonym na dole, a tytuł, tekst i link umieszczony powyżej tego obrazu.

Wyjście

.Klasa Card-Img-Bottom działa poprawnie.

Jak utworzyć nakładkę obrazu kartą

Oprócz umieszczenia treści powyżej i poniżej obrazu możesz również umieścić ją na obrazie, a ta procedura jest określana jako nakładka obrazu karty.

Html

Mike Jason

Cześć. Sprawdź mój profil.

Kod jest taki sam jak w poprzednich sekcjach z niewielką różnicą, jak umieszczać zawartość na obrazie, którego używamy .Card-Img-Overlay klasa zamiast .Klasa karty.

Wyjście

Z powodzeniem utworzono nakładkę obrazu karty.

Wniosek

W celu stylizacji karty możesz dodać do niej nagłówek i stopkę za pomocą .Header i .Kartacja Klasa, podczas gdy wszystkie dostępne klasy kolorów tła można użyć do tworzenia kolorowych kart. Ponadto użyj .Title, .tekst karty, .Zajęcia łącza karty Aby dodać tytuł, tekst i linki do karty. Aby dodatkowo sprawić, by karty były interesujące, możesz dodawać obrazy za pomocą .karta-img-top lub .Zajęcia karty-Img-dana. Na koniec możesz również utworzyć nakładkę obrazu kartą za pomocą .Klasa Card-Img-Overlay.