Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Udfordring og Quiz: Behersk Avancerede Bootstrap-Funktioner | Avancerede Koncepter
Bootstrap-Essentials til Moderne Websites

bookUdfordring og Quiz: Behersk Avancerede Bootstrap-Funktioner

Opgave: Oprettelse af en Bootstrap Modal

Opret en Bootstrap modalvindueskomponent, der viser produktdetaljer. Følg trinene i den indledende kode for at udfylde de manglende Bootstrap-klasser og fuldføre modalstrukturen.

  • Trin 1: Opret modalstruktur.
    • Anvend klassen modal på den yderste container;
    • Brug klassen modal-dialog til dialogboksen;
    • Tilføj klassen modal-content til indholdsområdet;
    • Sørg for, at modalen er centreret lodret i visningsområdet ved at anvende klassen modal-dialog-centered på modal-dialog-containeren;
    • Brug klassen modal-title til titlen (<h5>);
    • Anvend klassen btn-close på lukkeknappen i modalens header.
  • Trin 2: Tilføj produktdetaljer.
    • Indsæt produktbilledet i modalens body og sørg for, at det skaleres korrekt ved at bruge klassen img-fluid;
    • Vis produkttitlen med en passende overskrift (<h6>) og anvend klassen modal-title;
    • Giv en kort produktbeskrivelse med et afsnit (<p>) og anvend klassen modal-text.
index.html

index.html

copy
  1. Udnyt Bootstraps modal-komponentklasser til at oprette modalstrukturen:
    • Brug klassen modal til den yderste container;
    • Brug klassen modal-dialog til dialogboksen;
    • Brug klassen modal-content til indholdsområdet.
  2. Centrer modalen lodret i visningsområdet ved at anvende klassen modal-dialog-centered på modal-dialog-containeren.
  3. Sørg for, at modaltitlen er korrekt formateret ved at anvende klassen modal-title på titlen (<h5>).
  4. Udnyt klassen btn-close til lukkeknappen i modalens header for at sikre ensartet styling og funktionalitet.
  5. Tilpas modalens størrelse ved at anvende en af størrelsesklasserne (modal-lg, modal-xl osv.) på modal-dialog-containeren.
index.html

index.html

copy

1. Hvad er det primære formål med Bootstraps Navbars?

2. Hvilken klasse skal bruges for at oprette en grundlæggende navbar-struktur?

3. Hvilken klasse skal anvendes på billeder for at gøre dem responsive?

4. Hvilke yderligere klasser kan bruges til at style billeder som thumbnails?

5. Hvilken Bootstrap-komponent er velegnet til at fremvise artikler, brugerprofiler og produkter på en struktureret måde?

6. Hvilken Bootstrap-komponent bruges til at oprette interaktive billed-slidere?

7. Hvilken klasse skal anvendes på container-elementet for en karrusel?

question mark

Hvad er det primære formål med Bootstraps Navbars?

Select the correct answer

question mark

Hvilken klasse skal bruges for at oprette en grundlæggende navbar-struktur?

Select the correct answer

question mark

Hvilken klasse skal anvendes på billeder for at gøre dem responsive?

Select the correct answer

question mark

Hvilke yderligere klasser kan bruges til at style billeder som thumbnails?

Select the correct answer

question mark

Hvilken Bootstrap-komponent er velegnet til at fremvise artikler, brugerprofiler og produkter på en struktureret måde?

Select the correct answer

question mark

Hvilken Bootstrap-komponent bruges til at oprette interaktive billed-slidere?

Select the correct answer

question mark

Hvilken klasse skal anvendes på container-elementet for en karrusel?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 6

Spørg AI

expand

Spørg AI

ChatGPT

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 provide an example of the complete modal HTML structure?

What are the required Bootstrap CSS and JS files to include for the modal to work?

How do I trigger the modal to open and close?

Awesome!

Completion rate improved to 3.23

bookUdfordring og Quiz: Behersk Avancerede Bootstrap-Funktioner

Stryg for at vise menuen

Opgave: Oprettelse af en Bootstrap Modal

Opret en Bootstrap modalvindueskomponent, der viser produktdetaljer. Følg trinene i den indledende kode for at udfylde de manglende Bootstrap-klasser og fuldføre modalstrukturen.

  • Trin 1: Opret modalstruktur.
    • Anvend klassen modal på den yderste container;
    • Brug klassen modal-dialog til dialogboksen;
    • Tilføj klassen modal-content til indholdsområdet;
    • Sørg for, at modalen er centreret lodret i visningsområdet ved at anvende klassen modal-dialog-centered på modal-dialog-containeren;
    • Brug klassen modal-title til titlen (<h5>);
    • Anvend klassen btn-close på lukkeknappen i modalens header.
  • Trin 2: Tilføj produktdetaljer.
    • Indsæt produktbilledet i modalens body og sørg for, at det skaleres korrekt ved at bruge klassen img-fluid;
    • Vis produkttitlen med en passende overskrift (<h6>) og anvend klassen modal-title;
    • Giv en kort produktbeskrivelse med et afsnit (<p>) og anvend klassen modal-text.
index.html

index.html

copy
  1. Udnyt Bootstraps modal-komponentklasser til at oprette modalstrukturen:
    • Brug klassen modal til den yderste container;
    • Brug klassen modal-dialog til dialogboksen;
    • Brug klassen modal-content til indholdsområdet.
  2. Centrer modalen lodret i visningsområdet ved at anvende klassen modal-dialog-centered på modal-dialog-containeren.
  3. Sørg for, at modaltitlen er korrekt formateret ved at anvende klassen modal-title på titlen (<h5>).
  4. Udnyt klassen btn-close til lukkeknappen i modalens header for at sikre ensartet styling og funktionalitet.
  5. Tilpas modalens størrelse ved at anvende en af størrelsesklasserne (modal-lg, modal-xl osv.) på modal-dialog-containeren.
index.html

index.html

copy

1. Hvad er det primære formål med Bootstraps Navbars?

2. Hvilken klasse skal bruges for at oprette en grundlæggende navbar-struktur?

3. Hvilken klasse skal anvendes på billeder for at gøre dem responsive?

4. Hvilke yderligere klasser kan bruges til at style billeder som thumbnails?

5. Hvilken Bootstrap-komponent er velegnet til at fremvise artikler, brugerprofiler og produkter på en struktureret måde?

6. Hvilken Bootstrap-komponent bruges til at oprette interaktive billed-slidere?

7. Hvilken klasse skal anvendes på container-elementet for en karrusel?

question mark

Hvad er det primære formål med Bootstraps Navbars?

Select the correct answer

question mark

Hvilken klasse skal bruges for at oprette en grundlæggende navbar-struktur?

Select the correct answer

question mark

Hvilken klasse skal anvendes på billeder for at gøre dem responsive?

Select the correct answer

question mark

Hvilke yderligere klasser kan bruges til at style billeder som thumbnails?

Select the correct answer

question mark

Hvilken Bootstrap-komponent er velegnet til at fremvise artikler, brugerprofiler og produkter på en struktureret måde?

Select the correct answer

question mark

Hvilken Bootstrap-komponent bruges til at oprette interaktive billed-slidere?

Select the correct answer

question mark

Hvilken klasse skal anvendes på container-elementet for en karrusel?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 6
some-alt