Bootstrap 4 karty Kolory graniczne

Karty to elastyczne pojemniki z bootstrap 4. Zapewniają nagłówki, tekst, kontekstowe kolory tła i wiele innych korzystnych opcji. Istnieją setki klas bootstrap, które są używane do stylizacji elementów. Na przykład, aby dostosować kolor tła elementów, „BG„Klasa jest określona w klasach kolorów, takich jak„BG-Primary”,„BG-info", i wiele więcej.

Ten post ilustruje:

• Jak utworzyć kartę w bootstrapie?
• Karty graniczne kolory w bootstrapie
• Jak dodać kolor graniczny do kart w bootstrapie?

Jak utworzyć kartę w bootstrapie?

Bootstrap „karta„Klasa może być używana do utworzenia karty. Możesz określić nagłówek karty, tekst i komponenty dla karty, korzystając z klas, takich jak „Title”,„CARD-CODO", I "Kartacja”:

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Kontakt: xxx-xxx-xxxx

Wyjście

Karty graniczne kolory w bootstrap 4

Kilka klas bootstrap jest wykorzystywanych do nakładania kolorowych granic wokół karty. Niektóre z nich podano poniżej:

Zajęcia graniczne	Opis
Ostrzeżenie graniczne	Ta klasa stosuje żółty kolor do granicy.
Rozwiązanie graniczne	Ta klasa stosuje zielony kolor do granicy.
niebezpieczeństwo graniczne	Ta klasa stosuje czerwony kolor do granicy.
światło graniczne	Ta klasa stosuje jasnoszary kolor do granicy.
Border-info	Ta klasa stosuje niebieski kolor do granicy.
PROMIAR BRAND	Ta klasa stosuje niebieski kolor do granicy.
Border-Dark	Ta klasa stosuje ciemnoszary kolor do granicy.
Secondary graniczne	Ta klasa stosuje szary kolor do granicy.

Jak dodać kolor graniczny do kart?

Aby uzyskać lepsze zrozumienie, dodajmy „Rozwiązanie graniczne„Klasa w„„Element mający klasę”karta„Aby zobaczyć efekt.

Przykład 1: Dodanie koloru granicznego do jednej karty w bootstrapie

W tym przykładzie „Rozwiązanie graniczne„Klasa jest wykorzystywana do zastosowania zielonej granicy wokół karty:

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Dane wyjście sprawdza, czy zielona granica została pomyślnie zastosowana wokół karty:

Sprawdź poniższy przykład, który reprezentuje inne klasy koloru granicznego zastosowane do kart.

Przykład 2: Dodawanie kolorów granicznych do wielu kart w bootstrapie

Tutaj dodajemy kolory graniczne do wielu kart w bootstrap za pomocą określonych klas:

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Wyjście

Przykład 3: Dodanie kolorów granicznych do wielu komponentów pojedynczej karty w bootstrapie

Użytkownicy mogą również stosować kolory graniczne wokół innych komponentów karty. Na przykład zastosowaliśmy klasę kolorów granicznych na karcie, nagłówku karty i stopkę karty:

Linuxhint

Misja Linuxhint

Zapewniamy umiejętności i wiedzę technologiczną na żądanie, aby edukować świat.

Kontakt: xxx-xxx-xxxx

Wyjście

Chodzi o zastosowanie kolorów granicznych karty w Bootstrap 4.

Wniosek

„„karta„Klasa jest wykorzystywana do tworzenia karty w bootstrapie. Aby dodać granicę wokół karty, „granica„Klasa z klasą kolorów jest zaimplementowana, na przykład„PROMIAR BRAND„Klasa używana do niebieskiej granicy”niebezpieczeństwo graniczne„Dla czerwonej granicy i wielu innych. Ten blog wyjaśnił kolory graniczne karty w Bootstrap 4.