Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Utfordring og Quiz: Mestre Avanserte Bootstrap-funksjoner | Avanserte Konsepter
Bootstrap-essensielt for Moderne Nettsteder

bookUtfordring og Quiz: Mestre Avanserte Bootstrap-funksjoner

Oppgave: Lage et Bootstrap-modal

Lag en Bootstrap-modalvinduskomponent som viser produktdetaljer. Følg trinnene i startkoden for å fylle inn manglende Bootstrap-klasser og fullføre modalstrukturen.

  • Trinn 1: Opprett modalstruktur.
    • Bruk modal-klassen på den ytterste containeren;
    • Bruk modal-dialog-klassen for dialogboksen;
    • Legg til modal-content-klassen for innholdsområdet;
    • Sørg for at modalen er sentrert vertikalt i visningsområdet ved å bruke modal-dialog-centered-klassen på modal-dialog-containeren;
    • Bruk modal-title-klassen for tittel-elementet (<h5>);
    • Bruk btn-close-klassen på lukkeknappen i modal-headeren.
  • Trinn 2: Legg til produktdetaljer.
    • Sett inn produktbildet i modalens body og sørg for at det skaleres riktig ved å bruke img-fluid-klassen;
    • Vis produkttittelen med en passende overskriftstag (<h6>) og bruk modal-title-klassen;
    • Gi en kort produktbeskrivelse med et avsnittselement (<p>) og bruk modal-text-klassen.
index.html

index.html

copy
  1. Bruk Bootstraps modal-komponentklasser for å lage modalstrukturen:
    • Bruk modal-klassen for den ytterste containeren;
    • Bruk modal-dialog-klassen for dialogboksen;
    • Bruk modal-content-klassen for innholdsområdet.
  2. Sentrer modalen vertikalt i visningsområdet ved å bruke modal-dialog-centered-klassen på modal-dialog-containeren.
  3. Sørg for at modaltittelen er riktig formatert ved å bruke modal-title-klassen på tittel-elementet (<h5>).
  4. Bruk btn-close-klassen for lukkeknappen i modal-headeren for å sikre konsistent stil og funksjonalitet.
  5. Tilpass modalens størrelse ved å bruke en av størrelsesklassene (modal-lg, modal-xl, osv.) på modal-dialog-containeren.
index.html

index.html

copy

1. Hva er hovedformålet med Bootstraps navigasjonsfelt (Navbars)?

2. Hvilken klasse skal brukes for å lage en grunnleggende navbar-struktur?

3. Hvilken klasse bør brukes på bilder for å gjøre dem responsive?

4. Hvilke tilleggsklasser kan brukes for å style bilder som miniatyrbilder?

5. Hvilken Bootstrap-komponent egner seg for å vise artikler, brukerprofiler og produkter på en strukturert måte?

6. Hvilken Bootstrap-komponent brukes for å lage interaktive bildesliders?

7. Hvilken klasse skal brukes på container-elementet til en karusell?

question mark

Hva er hovedformålet med Bootstraps navigasjonsfelt (Navbars)?

Select the correct answer

question mark

Hvilken klasse skal brukes for å lage en grunnleggende navbar-struktur?

Select the correct answer

question mark

Hvilken klasse bør brukes på bilder for å gjøre dem responsive?

Select the correct answer

question mark

Hvilke tilleggsklasser kan brukes for å style bilder som miniatyrbilder?

Select the correct answer

question mark

Hvilken Bootstrap-komponent egner seg for å vise artikler, brukerprofiler og produkter på en strukturert måte?

Select the correct answer

question mark

Hvilken Bootstrap-komponent brukes for å lage interaktive bildesliders?

Select the correct answer

question mark

Hvilken klasse skal brukes på container-elementet til en karusell?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

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

Awesome!

Completion rate improved to 3.23

bookUtfordring og Quiz: Mestre Avanserte Bootstrap-funksjoner

Sveip for å vise menyen

Oppgave: Lage et Bootstrap-modal

Lag en Bootstrap-modalvinduskomponent som viser produktdetaljer. Følg trinnene i startkoden for å fylle inn manglende Bootstrap-klasser og fullføre modalstrukturen.

  • Trinn 1: Opprett modalstruktur.
    • Bruk modal-klassen på den ytterste containeren;
    • Bruk modal-dialog-klassen for dialogboksen;
    • Legg til modal-content-klassen for innholdsområdet;
    • Sørg for at modalen er sentrert vertikalt i visningsområdet ved å bruke modal-dialog-centered-klassen på modal-dialog-containeren;
    • Bruk modal-title-klassen for tittel-elementet (<h5>);
    • Bruk btn-close-klassen på lukkeknappen i modal-headeren.
  • Trinn 2: Legg til produktdetaljer.
    • Sett inn produktbildet i modalens body og sørg for at det skaleres riktig ved å bruke img-fluid-klassen;
    • Vis produkttittelen med en passende overskriftstag (<h6>) og bruk modal-title-klassen;
    • Gi en kort produktbeskrivelse med et avsnittselement (<p>) og bruk modal-text-klassen.
index.html

index.html

copy
  1. Bruk Bootstraps modal-komponentklasser for å lage modalstrukturen:
    • Bruk modal-klassen for den ytterste containeren;
    • Bruk modal-dialog-klassen for dialogboksen;
    • Bruk modal-content-klassen for innholdsområdet.
  2. Sentrer modalen vertikalt i visningsområdet ved å bruke modal-dialog-centered-klassen på modal-dialog-containeren.
  3. Sørg for at modaltittelen er riktig formatert ved å bruke modal-title-klassen på tittel-elementet (<h5>).
  4. Bruk btn-close-klassen for lukkeknappen i modal-headeren for å sikre konsistent stil og funksjonalitet.
  5. Tilpass modalens størrelse ved å bruke en av størrelsesklassene (modal-lg, modal-xl, osv.) på modal-dialog-containeren.
index.html

index.html

copy

1. Hva er hovedformålet med Bootstraps navigasjonsfelt (Navbars)?

2. Hvilken klasse skal brukes for å lage en grunnleggende navbar-struktur?

3. Hvilken klasse bør brukes på bilder for å gjøre dem responsive?

4. Hvilke tilleggsklasser kan brukes for å style bilder som miniatyrbilder?

5. Hvilken Bootstrap-komponent egner seg for å vise artikler, brukerprofiler og produkter på en strukturert måte?

6. Hvilken Bootstrap-komponent brukes for å lage interaktive bildesliders?

7. Hvilken klasse skal brukes på container-elementet til en karusell?

question mark

Hva er hovedformålet med Bootstraps navigasjonsfelt (Navbars)?

Select the correct answer

question mark

Hvilken klasse skal brukes for å lage en grunnleggende navbar-struktur?

Select the correct answer

question mark

Hvilken klasse bør brukes på bilder for å gjøre dem responsive?

Select the correct answer

question mark

Hvilke tilleggsklasser kan brukes for å style bilder som miniatyrbilder?

Select the correct answer

question mark

Hvilken Bootstrap-komponent egner seg for å vise artikler, brukerprofiler og produkter på en strukturert måte?

Select the correct answer

question mark

Hvilken Bootstrap-komponent brukes for å lage interaktive bildesliders?

Select the correct answer

question mark

Hvilken klasse skal brukes på container-elementet til en karusell?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6
some-alt