Typografia odgrywa ważną rolę, jeśli chodzi o przyciąganie uwagi użytkowników. W projekcie stron internetowych typografia odnosi się do znakomicie stylizacji tekstu, aby wydawało się atrakcyjne dla ludzkiego oka. Jaki powinien być rozmiar czcionki, pary, wyrównanie, styl itp. Bootstrap 5 zapewnia różne klasy, które pomagają stylizować tekst na różne sposoby. Ten raport szczegółowo omawia te klasy.

Bootstrap 5 nagłówków

Możesz tworzyć nagłówki w Bootstrap 5 za pomocą

Do

tagi tak jak w HTML. Jednak w Bootstrap 5 zauważysz, że nagłówki mają inną rodzinę czcionek niż te utworzone tylko za pomocą HTML. Ponadto rozmiar czcionki jest responsywny, co oznacza, że ​​zmienia się ona odpowiadająca rozmiarowi okna przeglądarki.

Przykład

Ten przykład pokazuje nagłówki bootstrap 5.

Html

To jest nagłówek

To jest nagłówek

To jest nagłówek

To jest nagłówek

To jest nagłówek

To jest nagłówek

Po prostu stworzyliśmy kontener Div i umieściliśmy nagłówki z

Do

Wewnątrz tego pojemnika.

Wyjście

Fotokato powstały nagłówki Bootstrap 5.

Zajęcia na kierunku

Bootstrap 5 pozwala użytkownikom sprawić, że inne elementy wyglądają jak nagłówki poprzez użycie .H1 Do .H6 zajęcia.

Przykład

Załóżmy, że chcesz wyświetlić akapit jako nagłówek, a następnie podążaj za fragmentem kodu poniżej.

Html

To jest akapit.

To jest akapit.

To jest akapit.

To jest akapit.

To jest akapit.

To jest akapit.

Tutaj każdy z

Elementy otrzymały inną klasę nagłówka.

Wyjście

Akapity zostały stylizowane za pomocą klas nagłówka.

Wyświetl klasy

Jeśli chcesz zwiększyć nagłówki o lżejszej masie czcionki, możesz przypisać klasę nagłówków .Display-1 Poprzez .Display-6.

Przykład

Oto jak działają te klasy wyświetlania.

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5

Nagłówek 6

W powyższym kodzie każdy

Elementowi przypisano inną klasę wyświetlania, aby poprawnie zademonstrować koncepcję tych klas.

Wyjście

Klasy wyświetlacze działają poprawnie.

Mała klasa

W celu zmniejszenia określonej części tekstu, .mały klasa lub element jest używany.

Przykład

Załóżmy, że chcesz mieć pewien kawałek tekstu w nagłówku mniejszy, a następnie postępuj zgodnie z poniższą demonstracją.

Html

Cześć Świat!

Tutaj powstał nagłówek, a część nagłówka została zmniejszona za pomocą za pomocą mały klasa. Kolejną rzeczą, którą zauważysz, jest to, że korzystaliśmy z klasy .tekst-info Aby zapewnić określony kolor do tekstu. Możesz użyć klas kolorów tekstu w ten sam sposób, aby stylizować swoje elementy.

Wyjście

Część nagłówka została pomyślnie zmniejszona.

MARK CLASS

Często chcemy podkreślić pewien tekst, aby wyróżnić się, a może zwrócić uwagę czytelników. W Bootstrap 5 możesz to zrobić za pomocą .ocena klasa lub element.

Przykład

Podświetlmy tekst.

Html

Ten fragment kodu pokazuje, jak to zrobić atrakcjatekst.

Tutaj element został użyty do podkreślenia elementu akapitu wygenerowanego w powyższym kodzie.

Wyjście

Tekst został wyróżniony.

Klasa blokowa

W celu cytowania tekstu z innych źródeł skorzystaj z .zablokować cytat klasa w

element.

Przykład

Załóżmy, że chcesz zacytować powiedzenie z innego źródła.

Html

Niektórzy mówią…

W powyższym kodzie, aby zacytować powiedzenie, że użyliśmy

element i napisanie powiedzenia w

element. Później, aby wymienić źródło powiedzenia, używamy .klasa bloków stóp w tagu.

Wyjście

Powiedzenie zostało pomyślnie cytowane.

Klasa prowadząca

Aby wyróżnić akapity, użyj .Ołów klasa w

element.

Przykład

W poniższym przykładzie porównujemy normalny akapit z akapitem z klasą wiodącą, aby pokazać różnicę między nimi.

Html

To jest akapit.

To kolejny akapit.

Wyjście

Klasa prowadząca działa poprawnie.

Niektóre inne typy klas wraz z powiązanymi klasami zostały wymienione w poniższej tabeli.

Typy klas	Zajęcia	Opis
Wyrównanie tekstu	.Tekst-start, .Centrum tekstu, .end tekstowy	Wyrównać tekst.
Wyrównanie tekstu oparte na urządzeniach	.Text-SM/MD/LG/XL-Start/Center/End	Aby wyrównać tekst w oparciu o różne typy urządzeń.
Transformacja tekstu	.Tekst-Lowercase, .Podstawa tekstowa, .Kapitalizowanie tekstu	Aby przekształcić przypadek tekstu.
Kolorowanie tekstu	.PROMARY TEKST, .tekst-info, .Sukcencja tekstu, .tekst-sekundowy, .Warnowanie tekstowe, .Niebezpieczeństwo tekstowe, .Zmiana tekstu	Aby zapewnić kolor do tekstu.
Owijanie tekstu i przepełnienie	.zawijanie tekstu, .Text-Nowrap, .Break tekstowy	Owijać tekst lub złamać długie słowo.
Obcinający długi tekst	.Tekst-dotknij	Złamać długi tekst.

Wniosek

Zajęcia typograficzne w Bootstrap 5 pozwalają użytkownikom stylizować tekst pojawiający się na stronie internetowej z wielką łatwością. Zajęcia te uniemożliwiają użytkownikom tworzenie rozległych arkuszy stylów, zmniejszając w ten sposób liczbę linii kodu i oszczędzając dużo czasu i wysiłku. Zajęcia związane z typografią w bootstrap 5 zostały wykazane w tym artykule wraz z odpowiednimi przykładami.