Lära Utforma Interaktiva Kortlayouter

Bootstrap Card-komponenten är en flexibel behållare som kan användas för att visa olika typer av innehåll på ett strukturerat sätt. Den är idealisk för att presentera artiklar, användarprofiler, produkter och mer, och erbjuder inbyggda funktioner för att organisera och presentera innehåll effektivt.

Viktiga funktioner

Header och Footer: Kort kan ha header- och footer-sektioner för att ge ytterligare kontext eller åtgärder relaterade till innehållet;
Bilder: Kort stöder inkludering av bilder, vilket gör det möjligt för utvecklare att visa visuellt innehåll tillsammans med textinformation;
Textinnehåll: Textinnehåll såsom titlar, beskrivningar och ytterligare information kan inkluderas i kortets kropp;
Knappar: Bootstraps kortkomponent möjliggör integrering av knappar för åtgärder som att läsa mer, lägga till i varukorg eller gilla innehåll;
Olika stilar: Bootstrap erbjuder olika kortstilar och layouter för att passa olika designbehov, inklusive kort med bakgrunder, ramar och skuggor.

Användningsklasser

card: Grundklass för att skapa en kortbehållare;
card-header: Lägger till stil för en headersektion i kortet;
card-footer: Lägger till stil för en footersektion i kortet;
card-img-top: Placerar en bild överst i kortet;
card-body: Behållare för kortets huvudinnehåll, såsom text och knappar;
card-title: Stilar titeln på kortinnehållet;
card-text: Stilar textinnehållet i kortet;
btn: Tillämpa Bootstraps knappstilar på knappar i kortet;
btn-primary, btn-secondary, etc.: Tillämpa specifika knappfärgsstilar i kortet.

Exempel 1: Grundläggande kort

index.html

Exempel 2: Kort med header och footer

index.html

Exempel 3: Kort med bild

index.html

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 3

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

Svep för att visa menyn

Viktiga funktioner

Header och Footer: Kort kan ha header- och footer-sektioner för att ge ytterligare kontext eller åtgärder relaterade till innehållet;
Bilder: Kort stöder inkludering av bilder, vilket gör det möjligt för utvecklare att visa visuellt innehåll tillsammans med textinformation;
Textinnehåll: Textinnehåll såsom titlar, beskrivningar och ytterligare information kan inkluderas i kortets kropp;
Knappar: Bootstraps kortkomponent möjliggör integrering av knappar för åtgärder som att läsa mer, lägga till i varukorg eller gilla innehåll;
Olika stilar: Bootstrap erbjuder olika kortstilar och layouter för att passa olika designbehov, inklusive kort med bakgrunder, ramar och skuggor.

Användningsklasser

card: Grundklass för att skapa en kortbehållare;
card-header: Lägger till stil för en headersektion i kortet;
card-footer: Lägger till stil för en footersektion i kortet;
card-img-top: Placerar en bild överst i kortet;
card-body: Behållare för kortets huvudinnehåll, såsom text och knappar;
card-title: Stilar titeln på kortinnehållet;
card-text: Stilar textinnehållet i kortet;
btn: Tillämpa Bootstraps knappstilar på knappar i kortet;
btn-primary, btn-secondary, etc.: Tillämpa specifika knappfärgsstilar i kortet.

Exempel 1: Grundläggande kort

index.html

Exempel 2: Kort med header och footer

index.html

Exempel 3: Kort med bild

index.html

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 3