Wprowadzenie do typografii Bootstrap

Typografia jest jedną z najnowszych funkcji bootstrap. Jest szczególnie używany do stylizacji i formatowania elementów tekstowych. Korzystając z funkcji typografii bootstrap, ktoś może tworzyć nagłówki, akapity, niektóre inne elementy wstawiane i listy. Zasadniczo bootstrap używa 1rem (16px) jako rozmiaru czcionki, w tym pozostaje wysokość linii 5. Domyślnie rodziny czcionek używane przez bootstrap to sans-serif, Arial, Ustawia sposób wyświetlania zawartości na ciele, kolor tła na ciele, używa czcionki rozmiar i wysokość linii w celu utworzenia marginesów, wypełnień itp.

Funkcje typografii Bootstrap

Poniżej przedstawiono różne funkcje typografii w następujący sposób:

1) Nagłówki

Nagłówki HTML są podzielone na

do

Nagłówek Bootstrap
wyświetlane czcionką

Nagłówek Bootstrap

wyświetlane czcionką

Nagłówek Bootstrap

wyświetlane czcionką

Nagłówek Bootstrap

wyświetlane czcionką
Nagłówek Bootstrap
wyświetlane czcionką
Nagłówek Bootstrap
wyświetlane czcionką

Za pomocą kodu HTML daje wynik, jak pokazano poniżej:

Używając typografii Bootstrap, stylizował i formatował przy użyciu odpowiednich klas, jak pokazano poniżej:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Dane wyjściowe powyższego kodu przy użyciu typografii Bootstrap są następujące:

2) Elastyczne nagłówki

Elastyczne nagłówki to jedna z najlepszych rzeczy, jakie można zaprojektować za pomocą typografii. są to elementy, w których tekst jest dostosowywany automatycznie przy użyciu responsywnych klas według rozmiaru urządzenia. Dzięki temu można łatwo zobaczyć ten sam tekst we właściwy sposób na różnych urządzeniach.

Po prostu dodaj responsywną klasę do tagu nagłówka w następujący sposób:

Responsive Header

Wyświetli wynik jako:

Responsive Header.

Możesz sprawdzić ten sam tekst na różnych urządzeniach, a także, zmieniając rozmiar przeglądarki, pokaże zmiany.

3)

Ten znacznik służy do tworzenia jaśniejszego, mniejszego drugiego tekstu w nagłówku. Domyślnie ustawia się na 85% wielkości nagłówka nadrzędnego.

Przykład:

Example heading secondary text

Wynik:

h5 nagłówek tekst dodatkowy

4)

Ten znacznik służy do podświetlania tekstu.

Przykład:

Bootstrap Typography

Bootstrap Typography

Służy do podświetlania tekstu.

5)

Ten znacznik służy do oznaczania skrótu. Skróty mają domyślne podkreślenie i zyskują kursor pomocy, aby zapewnić dodatkowy kontekst po najechaniu kursorem i użytkownikom technologii wspomagających.

Przykład:

Na świecie jest tak wiele krajów. Indie to najlepszy kraj

6)

Wskazuje usunięty tekst

Przykład:

Ten tag służy do wyświetlania usuniętego tekstu.

Wynik:

Ten tag służy do wyświetlania.

7)

Element blockquote służy do prezentacji treści z innego źródła.

Przykład:

Blockquotes

Blockquotes

Element blockquote służy do prezentacji treści z innego źródła:


Bardzo niewiele potrzeba do szczęśliwego życia; wszystko jest w tobie, w twoim sposobie myślenia. Życie jest jak publiczne granie na skrzypcach i nauka gry na instrumencie.

Wynik:

Cytaty blokowe
Element blockquote służy do prezentacji treści z innego źródła:

Bardzo niewiele potrzeba do szczęśliwego życia; wszystko jest w tobie, w twoim sposobie myślenia. Życie jest jak publiczne granie na skrzypcach i uczenie się gry na instrumencie.

8)
:

Ten znacznik służy do wyświetlania listy opisów.

Przykład:

Element dl wskazuje listę opisu:


Chleb

- biały

- Brązowy

Zimne napoje

- Pepsi

Wynik:

Element dl wskazuje listę opisu:

Chleb
Biały
brązowy
Zimne napoje
Pepsi

9)

Inline instrukcja kodu powinna być pogrupowana razem w elemencie kodu.

Przykład:

Następujące elementy HTML: span, section i div definiują sekcję w dokumencie.

Wynik:

Następujące elementy HTML: zakres, sekcja i div definiują sekcję w dokumencie.

10) Kolory kontekstowe

To tylko inna klasa, która służy przekazywaniu znaczenia przy użyciu różnych kolorów.
Ma różne klasy, takie jak .text-mute, .text-info, .text-primary, .text-success, .text-warning, .text-dangerous.

Przykład:

Użyj klas kontekstowych, aby podać „znaczenie poprzez kolory”:

Ten tekst jest wyciszony.

Ten tekst jest ważny.


Ten tekst oznacza sukces.

Ten tekst reprezentuje pewne informacje.

Ten tekst stanowi ostrzeżenie.

Ten tekst przedstawia niebezpieczeństwo.

Wynik:

Ten tekst jest wyciszony.
Ten tekst jest ważny.
Ten tekst oznacza sukces.
Ten tekst reprezentuje pewne informacje.
Ten tekst stanowi ostrzeżenie.
Ten tekst przedstawia niebezpieczeństwo.

Gdzie możemy skorzystać

  • Większość projektantów stron internetowych woli używać typografii bootstrap, aby uzyskać lepszy wygląd formatu tekstu.
  • Jest to szczególnie przydatne podczas stylizacji i formatowania treści tekstowych.
  • Przez większość czasu występuje problem z odpowiedzią na tekst. Rozmiar tekstu zmienia się w zależności od urządzenia. Tak więc problemy te zostaną wyjaśnione za pomocą funkcji typografii bootstrap.
  • Typografia Bootstrap jest dostosowywana w prosty sposób, aby prezentować się atrakcyjnie dla użytkownika końcowego.
  • Takie elementy tekstowe na stronie internetowej zawsze będą renderowane poprzez łącze do arkusza stylów Bootstrap 4 w ten sam sposób, z tym wyjątkiem, że te elementy są zastępowane przez inne klasy stylów.
  • Bootstrap zapewnia programistom wygodne funkcje typograficzne, które ułatwiają tworzenie nagłówków, akapitów, list i innych elementów wstawianych, które byłyby atrakcyjne dla czytelników.

Wniosek

  • Jak we wszystkich szczegółach podanych w powyższej treści, różne funkcje typograficzne Bootstrap dla nagłówków, cytatów blokowych, Tekstu wiodącego, Tekstu oznaczonego, Skrótów z odpowiednimi przykładami.
  • Tak solidne i ładne funkcje Bootstrap sprawiają, że jest to bardzo popularna i unikalna platforma programistyczna frontend, która jest powszechnie używana przez wiele organizacji.
  • Bootstrap zawiera wszystkie znaczniki typografii, dla których chcemy mieć styl, wszystko od znacznika do

    i całą hierarchię nagłówków.

Polecane artykuły

To jest przewodnik po typografii Bootstrap. Tutaj omawiamy różne funkcje typografii Bootstrap, takie jak nagłówki, cytaty, skróty, znaczniki itp. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

  • Polecenia bootstrap
  • Komponenty Bootstrap
  • Jak zainstalować Bootstrap
  • Układ Bootstrap

Kategoria:

Rozwój oprogramowania