Typografi spiller en viktig rolle når det gjelder å fange en brukernes oppmerksomhet. I webdesign refererer typografi til å style teksten din utsøkt slik at den ser tiltalende for det menneskelige øyet. Hva som skal være skriftstørrelse, sammenkoblinger, justering, stil osv. Alt kommer under begrepet typografi. Bootstrap 5 gir forskjellige klasser som hjelper deg med å style teksten din på forskjellige måter. Denne rapporten diskuterer disse klassene i detalj.

Bootstrap 5 -overskrifter

Du kan opprette overskrifter i Bootstrap 5 ved hjelp av

til

Tagger akkurat som du gjør i HTML. Imidlertid vil du i Bootstrap 5 merke at overskriftene har annen skriftfamilie enn de som er opprettet ved å bare bruke HTML. Dessuten er skriftstørrelsen lydhør, noe som betyr at den endres som tilsvarer størrelsen på nettleservinduet.

Eksempel

Dette eksemplet demonstrerer Bootstrap 5 -overskrifter.

Html

Dette er en overskrift

Dette er en overskrift

Dette er en overskrift

Dette er en overskrift

Dette er en overskrift

Dette er en overskrift

Vi har ganske enkelt laget en div container og plassert overskrifter fra

til

Inne i den beholderen.

Produksjon

Bootstrap 5 -overskrifter ble opprettet med hell.

Overskriftskurs

Bootstrap 5 lar brukerne få andre elementer til å se ut som overskrifter gjennom bruken av .H1 til .H6 klasser.

Eksempel

Anta at du vil vise et avsnitt som overskrift, og følg kodebiten nedenfor.

Html

Dette er et avsnitt.

Dette er et avsnitt.

Dette er et avsnitt.

Dette er et avsnitt.

Dette er et avsnitt.

Dette er et avsnitt.

Her hver av

Elementer har fått en annen overskriftsklasse.

Produksjon

Avsnitt ble stylet ved hjelp av overskriftsklasser.

Skjermklasser

Hvis du vil gjøre overskriftene større med en lettere skriftvekt, kan du tilordne overskriftskursene dine .Display-1 gjennom .Display-6.

Eksempel

Slik fungerer disse visningsklassene.

Overskrift 1

Overskrift 2

Overskrift 3

Overskrift 4

Overskrift 5

Overskrift 6

I koden ovenfor, hver

Element har blitt tildelt en annen displayklasse for å demonstrere konseptet med disse klassene riktig.

Produksjon

Skjermklasser fungerer som den skal.

Liten klasse

Med det formål å lage en viss del av en mindre tekst, .liten klasse eller element brukes.

Eksempel

Anta at du vil ha et bestemt stykke tekst i overskriften mindre, og følg demonstrasjonen nedenfor.

Html

Hallo Verden!

Her ble det opprettet en overskrift og en del av overskriften ble redusert i størrelse ved å bruke liten klasse. En annen ting du vil legge merke til er at vi brukte klassen .tekst-info å gi en viss farge til teksten. Du kan bruke tekstfargeklasser på samme måte for å style elementene dine.

Produksjon

En del av overskriften ble vellykket gjort mindre.

Mark Class

Vi ønsker ofte å fremheve en viss tekst for å få den til å skille seg ut eller kanskje for å trekke lesernes oppmerksomhet. I Bootstrap 5 kan du gjøre det ved å bruke .merke klasse eller element.

Eksempel

La oss fremheve en tekst.

Html

Dette kodebiten viser hvordan fremheveen tekst.

Her ble elementet brukt til å fremheve et stykke av avsnittet som ble generert i koden ovenfor.

Produksjon

Teksten ble fremhevet.

Blockquote -klasse

For å sitere tekst fra andre kilder, kan du benytte deg av .Blockquote klasse i

element.

Eksempel

Anta at du vil sitere et ordtak fra en annen kilde.

Html

Noen sier ..

I koden ovenfor, for å sitere et ordtak vi har brukt

element og skrevet ordtaket i en

element. Etterpå, for å navngi kilden til ordtaket, bruker vi .Blockquote-foter-klasse i taggen.

Produksjon

Et ordtak ble med hell sitert.

LEDKLASSE

For å få paragrafene dine til å skille seg ut, bruk .lede klasse i

element.

Eksempel

I eksemplet nedenfor sammenligner vi et normalt avsnitt med et avsnitt med en ledende klasse for å vise forskjellen mellom de to.

Html

Dette er et avsnitt.

Dette er et annet avsnitt.

Produksjon

Hovedklassen fungerer som den skal.

Noen andre klassetyper sammen med tilhørende klasser er listet opp i tabellen nedenfor.

Klassetyper	Klasser	Beskrivelse
Tekstjustering	.Tekststart, .Tekstsenter, .tekst-end	For å justere tekst.
Enhetsbasert tekstjustering	.Tekst-SM/MD/LG/XL-Start/Center/End	For å justere tekst basert på forskjellige enhetstyper.
Teksttransformasjon	.tekst-lowercase, .tekst-uppercase, .tekstkapitaliser	For å transformere saken om tekst.
Tekstfarging	.tekst-primary, .tekst-info, .tekst-suksess, .tekst-videregående, .tekstvarsling, .tekst-far, .tekstmettet	For å gi farge til tekst.
Tekstinnpakning og overløp	.Tekstpakk, .Tekst-Nowrap, .tekstbrudd	Å pakke en tekst eller bryte et langt ord.
Avkortet lang tekst	.Tekst-avkortet	Å bryte en lang tekst.

Konklusjon

Typografiklasser i Bootstrap 5 lar brukerne style teksten som vises på et nettsted med stor letthet. Disse klassene forhindrer brukerne i å lage omfattende stilark og reduserer antall kodelinjer og sparer mye tid og krefter. Klasser assosiert med typografi i Bootstrap 5 er påvist i denne artikkelen sammen med relevante eksempler.