Hvordan stilkort i Bootstrap 5 | Forklart

Et kort i Bootstrap 5 blir referert til som en beholder eller en boks som pakker innhold inni det. Den kan bestå av en overskrift, noe innhold og en bunntekst. Det kan styles ved å legge til farger, eller bilder til det. Disse bootstrap -kortene anses som en erstatning for gamle paneler, miniatyrbilder eller brønner. Hvordan disse kortene er opprettet og stylet på forskjellige måter har blitt diskutert i denne artikkelen.

Hvordan lage et kort ved hjelp av Bootstrap 5

For å lage et enkelt kort, lag en div container og tilordne det .kort klasse og hekker en div inne i den første diven og tilordne den .Kortkropp klasse og plasser innholdet på kortet inne i denne diven.

Html

Koden angitt ovenfor vil lage et veldig enkelt kort.

Produksjon

Utgangen viser et grunnkort.

Hvordan legge til en overskrift og bunntekst i et kort

Som allerede nevnt kan et kort bestå av en overskrift og en bunntekst. Derfor, for å få disse enhetene til å bruke .korthode, og .Kortfoter klasser.

Html

I koden ovenfor, for å lage overskriften på kortet, tildeler vi en div container .Korthodeklasse, for å plassere noe innhold lager vi kroppen på kortet ved å bruke .Kortkroppsklasse, og til slutt for å generere en bunntekst .Kortfoterklasse brukes.

Produksjon

Kortet vist ovenfor har en header, kropp og bunntekst.

Hvordan lage fargerike kort

For å gi bakgrunnsfarger til kortene bruker bare noen av bakgrunnsfargeklassene som er .BG-Primary, .BG-Secondary, .BG-Danger, .BG-advarsel, .BG-suksess, .BG-Info, .BG-muset, .BG-lys, .BG-Dark.

Html

Det er totalt 5 kort som genereres i koden ovenfor, og hver har fått en annen farge. Merk at bakgrunnsfargeklassene blir tildelt Div som har .Kortklasse.

Produksjon

Fargerike kort ble generert med hell.

Hvordan legge til tittel, tekst og lenker til et kort

Hvis du genererer kort som formidler viss informasjon og ønsker å legge til litt tittel, tekst og lenker til det kortet, følg koden nedenfor.

Html

Tittel

Noe tekst.

For å legge til en tittel .Korttittelklasse ble tildelt et overskriftselement (ethvert overskriftselement H1-H6 kan brukes), for å inkludere litt tekst .Korttekstklasse ble tildelt en

element og en kobling ble også lagt til og ble gjort hosserbar sammen med en blå farge ved å bruke .Kort-link-klasse.

Produksjon

Et informativt kort ble generert vellykket.

Hvordan legge til bilder i et kort

Hvis du ønsker å legge til bilder i kortene dine sammen med litt tekst og lenker, følg eksemplet nedenfor.

Html

Mike Jason

Hei. Sjekk ut profilen min.

For å plassere bildet inne i kortet, bruk .Kort-img-top-klasse Inne i taggen og deretter akkurat som i forrige seksjon lager vi et kortlegeme og plasserer en tittel, en tekst og en lenke inne i kortlegemet. Merk at bildet er plassert utenfor kortlegemet for å få det til å spenne over hele bredden som er gitt til DIV -beholderen som har klassen .kort.

Produksjon

Imidlertid, hvis du ønsker å plassere tittelen, tekst og lenke over bildet, kan du bruke .Kort-IMG-Bottom-klasse. Som vi har vist i kodebiten nedenfor.

Html

Mike Jason

Hei. Sjekk ut profilen min.

Ovennevnte kode vil generere et kort med bildet plassert nederst og tittelen, tekst og kobling plassert over det bildet.

Produksjon

De .Kort-img-bottom-klasse fungerer som den skal.

Hvordan lage kortbildeoverlegg

Bortsett fra å plassere innholdet ditt over og under bildet, kan du også plassere det på bildet, og denne prosedyren blir referert til som kortbildeoverlegg.

Html

Mike Jason

Hei. Sjekk ut profilen min.

Koden er den samme som i de foregående seksjonene med en liten forskjell at for å plassere innholdet over bildet vi bruker .Kort-img-overlay klasse i stedet for .Kortkroppsklasse.

Produksjon

Et kortbildeoverlegg ble opprettet med hell.

Konklusjon

For å style et kort kan du legge til en overskrift og bunntekst til det ved å bruke .Korthode, og .Kortfoter Klasse, mens alle tilgjengelige bakgrunnsfargeklasser kan brukes til å lage fargerike kort. Bruk dessuten .Korttittel, .Korttekst, .Kort-link-klasser For å legge til en tittel, tekst og lenker til et kort. For ytterligere å gjøre kortene dine interessante kan du legge til bilder ved å bruke .kort-img-top, eller .Kort-IMG-Bottom-klasser. Til slutt kan du også opprette et kortbildeoverlegg ved hjelp av .Kort-img-overlay-klasse.