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
Vi har ganske enkelt laget en div container og plassert overskrifter fra
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
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 enelement. 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.