Kolory tekstu i kolory tła Zajęcia w Bootstrap 5 | Wyjaśnione
Zajęcia kolorów tekstu
Klasy Bootstrap 5, które są połączone z kolorami tekstu, pomagają w dostarczaniu znaczenia tekstowi. Zajęcia te są określane jako kolory narzędzi i są również używane do stylu linków z stanami zawisowymi.
Wszystkie klasy związane z kolorem tekstu wraz z znaczeniem, które te przekazują, są tutaj wyjaśnione.
.PROMARY TEKST
Daje tekst niebieski kolor i reprezentuje ważny kawałek tekstu.
.tekst-sekundowy
Zapewnia tekst szary i reprezentuje tekst wtórny.
.Sukcencja tekstu
Ta klasa nadaje tekstowi zielony kolor i reprezentuje sukces.
.Niebezpieczeństwo tekstowe
Jak sama nazwa wskazuje, ta klasa wskazuje na niebezpieczeństwo i nadaje tekstowi czerwony kolor.
.Warnowanie tekstowe
Zapewnia tekst żółty kolor i wskazuje ostrzeżenie.
.tekst-info
Ta klasa służy do przedstawienia informacji i dostarczania do tekstu jaśniejszego odcienia niebieskiego.
.Light tekstowy
Nadaje tekst jasnoszary kolor.
.tekst
Ta klasa nadaje tekstowi ciemnoszary kolor.
.Tekst
Zapewnia kolor nadwozia tekstu, który jest domyślnie czarny.
.Zmiana tekstu
Reprezentuje stonowany tekst i nadaje mu jasnoszary kolor.
.tekst-biały
Jak sama nazwa przedstawia, ta klasa zapewnia biały kolor do tekstu.
Teraz będziemy zademonstrować wszystkie te kolory przez przykład, abyś mógł nauczyć się ich używać.
Przykład
Rozważ przykład poniżej.
Html
Jakiś ważny tekst
Tekst o szarym kolorze.
Zwycięstwo
Niebezpieczeństwo.
Ostrzeżenie
To jest ważna informacja
Witaj świecie!
To jest mroczny tekst o tematyce
To jest tekst nadwozia
Ten tekst jest wyciszony
To jest tekst z białym kolorem
W powyższym kodzie po prostu stworzyliśmy wiele
elementy i przypisano każdy akapit inna klasa kolorów tekstu.
Wyjście
Wszystkie zajęcia kolorów zostały pomyślnie wykazane.
Dodanie krycia do tekstu
Istnieją dwie klasy powiązane z kolorem tekstu w Bootstrap 5, które dodają nieprzezroczystości do tekstu. Są one wyjaśnione poniżej.
.Tekst-czarny-50
To reprezentuje czarny tekst o 50% kryciu z białym tłem.
.tekst-biały-50
To reprezentuje biały kolorowy tekst o 50% krycia z czarnym tłem.
Zobaczmy przykład.
Przykład
W poniższym przykładzie dodajemy krycie do tekstu za pomocą wyżej wymienionych klas.
Html
Ten akapit ma czarny kolor, 50% krycia i białe tło
Ten akapit ma biały kolor, 50% krycia i czarne tło
Tutaj przypisujemy oba akapity inną klasę, aby dodać nieprzezroczystość do tekstu obecnego w tych akapitach. Musiałeś również zauważyć, że w tym przykładzie i powyższym przykładzie podaliśmy czarnego koloru tła elementom za pomocą klasy koloru tła. Klasy kolorów tła w Bootstrap 5 zostały omówione w nadchodzącym sekcji.
Wyjście
Krycie zostało pomyślnie dodane do tekstu.
Zajęcia kolorów tła
Klasy kolorów tła w Bootstrap 5 zapewniają kolorom. Nazwy tych klas są podobne do klas kolorów tekstu z jedyną różnicą, jaką prefiks „BG” jest używany do klas powiązanych z kolorami tła.
Pamiętaj o tym, że klasy te zapewniają kolor tła elementom, a nie tekst. Wszystkie klasy powiązane z kolorem tła są wyjaśnione z przykładem pokazanym poniżej.
Przykład
Zapoznaj się z poniższym przykładem, aby zrozumieć klasę kolorów tła w Bootstrap 5.
Html
Jakiś ważny tekst
Tekst o szarym kolorze.
Zwycięstwo
Niebezpieczeństwo.
Ostrzeżenie
To jest ważna informacja
Witaj świecie!
To jest mroczny tekst o tematyce
To jest tekst z białym kolorem
W powyższym kodzie utworzyliśmy wiele akapitów i dodaliśmy do każdego innego koloru tła.
Wyjście
Kolory tła zostały pomyślnie dodane do akapitów.
Wniosek
Klasy kolorów w Bootstrap 5 zapewniają kolor do tekstu, a także zapewniają określone znaczenie dotyczące tekstu. Tymczasem klasy związane z kolorem tła zapewniają kolor tła elementów. Klasy połączone z tekstem i tłem mają podobne nazwy z różnymi prefiksami. W przypadku klas kolorów przedrostek jest .tekst-, Tymczasem dla klas koloru tła prefiks jest .BG-. W tym poście szczegółowo omawia każdą z kategorii klas wraz z odpowiednimi przykładami.