Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning och Quiz: Behärska Avancerade Bootstrap-Funktioner | Avancerade Koncept
Bootstrap-Grunder för Moderna Webbplatser

bookUtmaning och Quiz: Behärska Avancerade Bootstrap-Funktioner

Uppgift: Skapa ett Bootstrap-modal

Skapa en Bootstrap-modal-komponent som visar produktdetaljer. Följ stegen i den initiala koden för att fylla i de saknade Bootstrap-klasserna och slutföra modalens struktur.

  • Steg 1: Skapa modalens struktur.
    • Applicera klassen modal på den yttersta behållaren;
    • Använd klassen modal-dialog för dialogrutan;
    • Lägg till klassen modal-content för innehållsområdet;
    • Säkerställ att modalen är vertikalt centrerad i vyn genom att använda klassen modal-dialog-centered på modal-dialog-behållaren;
    • Använd klassen modal-title för titeln (<h5>);
    • Applicera klassen btn-close på stängningsknappen i modalens header.
  • Steg 2: Lägg till produktdetaljer.
    • Infoga produktbilden i modalens body och säkerställ att den skalas korrekt med klassen img-fluid;
    • Visa produkttiteln med en lämplig rubriktagg (<h6>) och applicera klassen modal-title;
    • Ge en kort produktbeskrivning med ett stycke (<p>) och applicera klassen modal-text.
index.html

index.html

copy
  1. Använd Bootstraps modal-komponentklasser för att skapa modalens struktur:
    • Använd klassen modal för den yttersta behållaren;
    • Använd klassen modal-dialog för dialogrutan;
    • Använd klassen modal-content för innehållsområdet.
  2. Centrera modalen vertikalt i vyn med hjälp av klassen modal-dialog-centered på modal-dialog-behållaren.
  3. Säkerställ att modaltiteln är korrekt formaterad genom att använda klassen modal-title på titeln (<h5>).
  4. Använd klassen btn-close för stängningsknappen i modalens header för att säkerställa enhetlig stil och funktionalitet.
  5. Anpassa modalens storlek genom att använda någon av storleksklasserna (modal-lg, modal-xl, etc.) på modal-dialog-behållaren.
index.html

index.html

copy

1. Vad är det primära syftet med Bootstraps Navbars?

2. Vilken klass ska användas för att skapa en grundläggande navbar-struktur?

3. Vilken klass ska användas på bilder för att göra dem responsiva?

4. Vilka ytterligare klasser kan användas för att formatera bilder som miniatyrer?

5. Vilken Bootstrap-komponent är lämplig för att visa artiklar, användarprofiler och produkter på ett strukturerat sätt?

6. Vilken Bootstrap-komponent används för att skapa interaktiva bildspel?

7. Vilken klass ska tillämpas på containerelementet för en karusell?

question mark

Vad är det primära syftet med Bootstraps Navbars?

Select the correct answer

question mark

Vilken klass ska användas för att skapa en grundläggande navbar-struktur?

Select the correct answer

question mark

Vilken klass ska användas på bilder för att göra dem responsiva?

Select the correct answer

question mark

Vilka ytterligare klasser kan användas för att formatera bilder som miniatyrer?

Select the correct answer

question mark

Vilken Bootstrap-komponent är lämplig för att visa artiklar, användarprofiler och produkter på ett strukturerat sätt?

Select the correct answer

question mark

Vilken Bootstrap-komponent används för att skapa interaktiva bildspel?

Select the correct answer

question mark

Vilken klass ska tillämpas på containerelementet för en karusell?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

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 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

bookUtmaning och Quiz: Behärska Avancerade Bootstrap-Funktioner

Svep för att visa menyn

Uppgift: Skapa ett Bootstrap-modal

Skapa en Bootstrap-modal-komponent som visar produktdetaljer. Följ stegen i den initiala koden för att fylla i de saknade Bootstrap-klasserna och slutföra modalens struktur.

  • Steg 1: Skapa modalens struktur.
    • Applicera klassen modal på den yttersta behållaren;
    • Använd klassen modal-dialog för dialogrutan;
    • Lägg till klassen modal-content för innehållsområdet;
    • Säkerställ att modalen är vertikalt centrerad i vyn genom att använda klassen modal-dialog-centered på modal-dialog-behållaren;
    • Använd klassen modal-title för titeln (<h5>);
    • Applicera klassen btn-close på stängningsknappen i modalens header.
  • Steg 2: Lägg till produktdetaljer.
    • Infoga produktbilden i modalens body och säkerställ att den skalas korrekt med klassen img-fluid;
    • Visa produkttiteln med en lämplig rubriktagg (<h6>) och applicera klassen modal-title;
    • Ge en kort produktbeskrivning med ett stycke (<p>) och applicera klassen modal-text.
index.html

index.html

copy
  1. Använd Bootstraps modal-komponentklasser för att skapa modalens struktur:
    • Använd klassen modal för den yttersta behållaren;
    • Använd klassen modal-dialog för dialogrutan;
    • Använd klassen modal-content för innehållsområdet.
  2. Centrera modalen vertikalt i vyn med hjälp av klassen modal-dialog-centered på modal-dialog-behållaren.
  3. Säkerställ att modaltiteln är korrekt formaterad genom att använda klassen modal-title på titeln (<h5>).
  4. Använd klassen btn-close för stängningsknappen i modalens header för att säkerställa enhetlig stil och funktionalitet.
  5. Anpassa modalens storlek genom att använda någon av storleksklasserna (modal-lg, modal-xl, etc.) på modal-dialog-behållaren.
index.html

index.html

copy

1. Vad är det primära syftet med Bootstraps Navbars?

2. Vilken klass ska användas för att skapa en grundläggande navbar-struktur?

3. Vilken klass ska användas på bilder för att göra dem responsiva?

4. Vilka ytterligare klasser kan användas för att formatera bilder som miniatyrer?

5. Vilken Bootstrap-komponent är lämplig för att visa artiklar, användarprofiler och produkter på ett strukturerat sätt?

6. Vilken Bootstrap-komponent används för att skapa interaktiva bildspel?

7. Vilken klass ska tillämpas på containerelementet för en karusell?

question mark

Vad är det primära syftet med Bootstraps Navbars?

Select the correct answer

question mark

Vilken klass ska användas för att skapa en grundläggande navbar-struktur?

Select the correct answer

question mark

Vilken klass ska användas på bilder för att göra dem responsiva?

Select the correct answer

question mark

Vilka ytterligare klasser kan användas för att formatera bilder som miniatyrer?

Select the correct answer

question mark

Vilken Bootstrap-komponent är lämplig för att visa artiklar, användarprofiler och produkter på ett strukturerat sätt?

Select the correct answer

question mark

Vilken Bootstrap-komponent används för att skapa interaktiva bildspel?

Select the correct answer

question mark

Vilken klass ska tillämpas på containerelementet för en karusell?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6
some-alt