Lære Utforming av Interaktive Kortoppsett

Kort-komponenten i Bootstrap er en fleksibel beholder som kan brukes til å vise ulike typer innhold på en strukturert måte. Den egner seg godt for visning av artikler, brukerprofiler, produkter og mer, og tilbyr innebygde funksjoner for effektiv organisering og presentasjon av innhold.

Nøkkelfunksjoner

Topptekst og bunntekst: Kort kan ha topptekst- og bunntekstseksjoner for å gi ekstra kontekst eller handlinger relatert til innholdet;
Bilder: Kort støtter inkludering av bilder, slik at utviklere kan vise visuelt innhold sammen med tekstlig informasjon;
Tekstinnhold: Tekstlig innhold som titler, beskrivelser og tilleggsinformasjon kan inkluderes i kortets hoveddel;
Knapper: Bootstraps kortkomponent tillater integrering av knapper for handlinger som "les mer", "legg i handlekurv" eller "lik innhold";
Ulike stiler: Bootstrap tilbyr ulike kortstiler og oppsett for å dekke forskjellige designbehov, inkludert kort med bakgrunner, rammer og skygger.

Bruksklasser

card: Grunnklasse for å lage en kortbeholder;
card-header: Legger til stil for en topptekstseksjon i kortet;
card-footer: Legger til stil for en bunntekstseksjon i kortet;
card-img-top: Plasserer et bilde øverst i kortet;
card-body: Beholder for hovedinnholdet i kortet, som tekst og knapper;
card-title: Stiler tittelen på kortinnholdet;
card-text: Stiler tekstinnholdet i kortet;
btn: Bruker Bootstrap-knappestiler på knapper i kortet;
btn-primary, btn-secondary osv.: Bruker spesifikke knappestilfarger i kortet.

Eksempel 1: Grunnleggende kort

index.html

Eksempel 2: Kort med topp- og bunntekst

index.html

Eksempel 3: Kort med bilde

index.html

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 3

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show me a basic example of a Bootstrap Card?

How do I add a header and footer to a Bootstrap Card?

How can I include an image in a Bootstrap Card?

Awesome!

Completion rate improved to 3.23

Sveip for å vise menyen

Nøkkelfunksjoner

Topptekst og bunntekst: Kort kan ha topptekst- og bunntekstseksjoner for å gi ekstra kontekst eller handlinger relatert til innholdet;
Bilder: Kort støtter inkludering av bilder, slik at utviklere kan vise visuelt innhold sammen med tekstlig informasjon;
Tekstinnhold: Tekstlig innhold som titler, beskrivelser og tilleggsinformasjon kan inkluderes i kortets hoveddel;
Knapper: Bootstraps kortkomponent tillater integrering av knapper for handlinger som "les mer", "legg i handlekurv" eller "lik innhold";
Ulike stiler: Bootstrap tilbyr ulike kortstiler og oppsett for å dekke forskjellige designbehov, inkludert kort med bakgrunner, rammer og skygger.

Bruksklasser

card: Grunnklasse for å lage en kortbeholder;
card-header: Legger til stil for en topptekstseksjon i kortet;
card-footer: Legger til stil for en bunntekstseksjon i kortet;
card-img-top: Plasserer et bilde øverst i kortet;
card-body: Beholder for hovedinnholdet i kortet, som tekst og knapper;
card-title: Stiler tittelen på kortinnholdet;
card-text: Stiler tekstinnholdet i kortet;
btn: Bruker Bootstrap-knappestiler på knapper i kortet;
btn-primary, btn-secondary osv.: Bruker spesifikke knappestilfarger i kortet.

Eksempel 1: Grunnleggende kort

index.html

Eksempel 2: Kort med topp- og bunntekst

index.html

Eksempel 3: Kort med bilde

index.html

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 3