Lære Design af Interaktive Kortlayouts

Bootstrap's Card-komponent er en fleksibel container, der kan anvendes til at fremvise forskellige typer indhold på en struktureret måde. Den er ideel til visning af artikler, brugerprofiler, produkter og mere, og tilbyder indbyggede funktioner til effektiv organisering og præsentation af indhold.

Nøglefunktioner

Header og Footer: Kort kan have header- og footer-sektioner for at give yderligere kontekst eller handlinger relateret til indholdet;
Billeder: Kort understøtter inkludering af billeder, hvilket gør det muligt for udviklere at fremvise visuelt indhold sammen med tekstinformation;
Tekstindhold: Tekstindhold såsom titler, beskrivelser og yderligere information kan inkluderes i kortets hoveddel;
Knapper: Bootstraps kortkomponent muliggør integration af knapper til handlinger som læs mere, tilføj til kurv eller synes godt om indhold;
Forskellige stilarter: Bootstrap tilbyder forskellige kortstilarter og layouts, der passer til forskellige designbehov, herunder kort med baggrunde, kanter og skygger.

Anvendelsesklasser

card: Basis-klasse til oprettelse af en kortcontainer;
card-header: Tilføjer styling til en header-sektion i kortet;
card-footer: Tilføjer styling til en footer-sektion i kortet;
card-img-top: Placerer et billede øverst i kortet;
card-body: Container til hovedindholdet i kortet, såsom tekst og knapper;
card-title: Styler titlen på kortindholdet;
card-text: Styler tekstindholdet i kortet;
btn: Anvender Bootstraps knapstilarter på knapper i kortet;
btn-primary, btn-secondary osv.: Anvender specifikke knapfarver i kortet.

Eksempel 1: Grundlæggende kort

index.html

Eksempel 2: Kort med header og footer

index.html

Eksempel 3: Kort med billede

index.html

Var alt klart?

Tak for dine kommentarer!

Sektion 4. Kapitel 3

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

Stryg for at vise menuen

Nøglefunktioner

Header og Footer: Kort kan have header- og footer-sektioner for at give yderligere kontekst eller handlinger relateret til indholdet;
Billeder: Kort understøtter inkludering af billeder, hvilket gør det muligt for udviklere at fremvise visuelt indhold sammen med tekstinformation;
Tekstindhold: Tekstindhold såsom titler, beskrivelser og yderligere information kan inkluderes i kortets hoveddel;
Knapper: Bootstraps kortkomponent muliggør integration af knapper til handlinger som læs mere, tilføj til kurv eller synes godt om indhold;
Forskellige stilarter: Bootstrap tilbyder forskellige kortstilarter og layouts, der passer til forskellige designbehov, herunder kort med baggrunde, kanter og skygger.

Anvendelsesklasser

card: Basis-klasse til oprettelse af en kortcontainer;
card-header: Tilføjer styling til en header-sektion i kortet;
card-footer: Tilføjer styling til en footer-sektion i kortet;
card-img-top: Placerer et billede øverst i kortet;
card-body: Container til hovedindholdet i kortet, såsom tekst og knapper;
card-title: Styler titlen på kortindholdet;
card-text: Styler tekstindholdet i kortet;
btn: Anvender Bootstraps knapstilarter på knapper i kortet;
btn-primary, btn-secondary osv.: Anvender specifikke knapfarver i kortet.

Eksempel 1: Grundlæggende kort

index.html

Eksempel 2: Kort med header og footer

index.html

Eksempel 3: Kort med billede

index.html

Var alt klart?

Tak for dine kommentarer!

Sektion 4. Kapitel 3