Bootstrap typografi - Funktioner ved Bootstrap-typografi med eksempler

Introduktion i Bootstrap Typography

Typografi er en af ​​de nyeste funktioner i bootstrap. Det bruges især til styling og formatering af tekstelementer. Ved at bruge typografifunktionen i bootstrap kan nogen oprette overskrifter, afsnit, nogle andre inline-elementer og lister. Grundlæggende bruger bootstrap 1rem (16px) som fontstørrelse inklusive liniehøjde forbliver 5. Som standard er skrifttypefamilier, der bruges af bootstrap, sans-serif, Arial, Det angiver, hvordan indholdet skal vises på kroppen, baggrundsfarve på kroppen, bruger font størrelse og linjehøjde for at skabe margener, polstringer osv.

Funktioner i Bootstrap Typography

Nedenfor er de forskellige funktioner i typografi som følger:

1) Overskrifter

HTML-overskrifter er opdelt i

til

Bootstrap overskrift

vises i skriftstørrelse

Bootstrap overskrift

vises i skriftstørrelse

Bootstrap overskrift

vises i skriftstørrelse

Bootstrap overskrift

vises i skriftstørrelse

Bootstrap overskrift

vises i skriftstørrelse

Bootstrap overskrift

vises i skriftstørrelse

Ved at bruge HTML-kode giver det output som vist nedenfor:

Ved at bruge Bootstrap-typografi stylet & formateredes den ved hjælp af de respektive klasser som vist nedenfor:

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

Output fra ovenstående kode ved hjælp af Bootstrap Typography er som følger:

2) Responsive overskrifter

Responsive overskrifter er en af ​​de bedste ting, man kan designe ved hjælp af typografi. dette er de elementer, hvor teksten justeres automatisk ved hjælp af klasseklasse som per enhedsstørrelse. Så man kan nemt se den samme tekst på en passende måde på forskellige enheder.

Bare tilføj klassen lydhør i dit overskrifttag som følger:

Responsive Header

Så det viser output som:

Responsiv overskrift.

Du kan kontrollere den samme tekst på de forskellige enheder, såvel som ved at ændre størrelsen på browseren, viser den ændringer.

3)

Dette tag bruges til at oprette lettere, mindre, sekundær tekst i din overskrift. Som standard indstiller den til 85% af størrelsen på overordnet overskrift.

Eksempel:

Example heading secondary text

Produktion:

h5 overskrift sekundær tekst

4)

Dette tag bruges til at fremhæve tekst.

Eksempel:

Bootstrap Typography


Bootstrap Typography


Dette bruges til at fremhæve tekst.

5)

Dette tag bruges til at markere en forkortelse. Forkortelser har en standardunderstrekning og får en hjælpemarkør til at give yderligere kontekst om hover og til brugere af hjælpesteknologier.

Eksempel:

Der er så mange lande i verden. Det er det bedste land

6)

Angiver slettet tekst

Eksempel:

Dette tag bruges til at vise slettet tekst.

Produktion:

Dette tag bruges til at vise.

7)

Blockquote-elementet bruges til at præsentere indhold fra en anden kilde.

Eksempel:

Blockquotes


Blockquotes


Blockquote-elementet bruges til at præsentere indhold fra en anden kilde:

Meget lidt er nødvendigt for at få et lykkeligt liv; det er alt i dig selv, i din måde at tænke på. Liv er som at spille en violin i offentligheden og lære instrumentet, som man fortsætter.

Produktion:

blockquotes
Blockquote-elementet bruges til at præsentere indhold fra en anden kilde:

Meget lidt er nødvendigt for at få et lykkeligt liv; det er alt sammen i dig selv, i din måde at tænke på. Livet er som at spille violin offentligt og lære instrumentet, som man fortsætter.

8)

:

Dette tag bruges til at vise en beskrivelsesliste.

Eksempel:

Dl-elementet angiver en beskrivelsesliste:

Brød

- Hvid

- Brun

Kolde drinks

- Pepsi

Produktion:

Dl-elementet angiver en beskrivelsesliste:

Brød
hvid
Brun
Kolde drinks
Pepsi.

9)

Den inline erklæring af kode skal holdes sammen i kodeelementet.

Eksempel:

Følgende HTML-elementer: span, section og div definerer et afsnit i et dokument.

Produktion:

Følgende HTML-elementer: span, sektion og div definerer et afsnit i et dokument.

10) Kontekstuelle farver

Dette er intet andet end en anden klasse, der bruges til at formidle mening ved hjælp af forskellige farver.
Det har forskellige klasser som .text-dæmpet, .text-info, .text-primær, .text-succes, .text-advarsel, .text-fare.

Eksempel:

Brug de kontekstuelle klasser til at give "mening gennem farver":

Denne tekst er slået fra.

Denne tekst er vigtig.

Denne tekst angiver succes.

Denne tekst repræsenterer nogle oplysninger.

Denne tekst repræsenterer en advarsel.

Denne tekst repræsenterer fare.

Produktion:

Denne tekst er slået fra.
Denne tekst er vigtig.
Denne tekst angiver succes.
Denne tekst repræsenterer nogle oplysninger.
Denne tekst repræsenterer en advarsel.
Denne tekst repræsenterer fare.

Hvor vi kan bruge

• De fleste webdesignere foretrækker at bruge bootstrap-typografi for bedre udseende og fornemmelse af tekstformat.
• Det bruges især under styling og formatering af tekstindhold.
• Det meste af tiden er der et spørgsmål angående tekstføjelighed. Tekststørrelse varieres pr. Forskellige enheder. Så disse problemer bliver afklaret ved hjælp af bootstrap-typografifunktionen.
• Bootstrap-typografi tilpasses på en enkel måde til at præsentere attraktivt for slutbrugeren.
• Sådanne tekstelementer på en webside vil altid blive gengivet via linket til Bootstrap 4-stilarket på samme måde, bortset fra at disse elementer tilsidesættes af andre typeklasser.
• Bootstrap giver udviklere praktiske typografifunktioner, der gør det nemt for dem at oprette overskrifter, afsnit, lister og andre inline-elementer, der vil være appellerende til læserne.

Konklusion

• Som pr. Detaljer angivet i indholdet ovenfor, har de forskellige typografifunktioner i Bootstrap til overskrifter, blokquote, blytekst, markeret tekst, forkortelser med passende eksempler.
• Sådanne robuste og smukke funktioner i Bootstrap gør det til meget populær og unik frontend-udviklingsramme, som er vidt brugt af mange organisationer.
• Bootstrap leveres med alle typografikoder, som vi vil have stylet til, alt fra et tag til

  og hele overskriftshierarkiet.

Anbefalede artikler

Dette er en guide til Bootstrap-typografi. Her diskuterer vi forskellige funktioner i Bootstrap Typography som overskrifter, blokquote, forkortelse, mark osv. Du kan også se på følgende artikler for at lære mere -

• Bootstrap-kommandoer
• Bootstrap-komponenter
• Sådan installeres Bootstrap
• Bootstrap-layout