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

bookUtfordring og Quiz: Bruk Grunnleggende Bootstrap-Konsepter

Oppgave: Forbedre porteføljevisning med Bootstrap-klasser

  • Steg 1: Legg til riktig klasse på den gitte div-elementet for å opprette en global beholder.
  • Steg 2: Legg til riktig klasse på den gitte div-elementet for å opprette en rad i beholderen.
  • Steg 3: Legg til riktige klasser på de gitte div-elementene for å opprette kolonner for hvert porteføljeelement. Sørg for at kolonnene er responsive og justerer bredden deretter. (Vennligst merk at det er tre div-elementer i dette steget.)
  • Steg 4: Stil porteføljeelementenes titler ved å legge til passende klasser på de gitte h2-elementene. Sentrer titlene i sine respektive kolonner.
  • Steg 5: Gjør beskrivelsene til porteføljeelementene leselige og med passende størrelse ved å legge til egnede klasser på de gitte p-elementene. Sett skriftstørrelsen til fs-6.
index.html

index.html

index.css

index.css

copy

Bruk Bootstraps rutenettsystem (container, row, col) for å lage et responsivt oppsett for porteføljevisningen. Bruk typografiklasser (text-center, h2, fs-6) for å style titler og beskrivelser til porteføljeelementene på en hensiktsmessig måte.

index.html

index.html

index.css

index.css

copy

1. Hvor mange kolonner deler Bootstraps rutenettsystem siden inn i?

2. Hvilken klasse omslutter og sentrerer innholdet i en container med fast bredde?

3. Hvilke klasser brukes for å lage en horisontal gruppe med kolonner i rutenettsystemet?

4. Hva representerer klassene sm, md, lg og xl?

5. Hvilke klasser brukes for å style overskrifter med ulike størrelser?

6. Hvilke klasser brukes for å justere tekst?

7. Hvilken klasse brukes for å stable knapper vertikalt?

8. Hvilken klasse brukes på avkrysningsbokser og radioknapper i en form-check-container for å sikre konsekvent stil?

9. Hvordan bidrar Bootstraps rutenettsystem til organisering av skjemautforming?

question mark

Hvor mange kolonner deler Bootstraps rutenettsystem siden inn i?

Select the correct answer

question mark

Hvilken klasse omslutter og sentrerer innholdet i en container med fast bredde?

Select the correct answer

question mark

Hvilke klasser brukes for å lage en horisontal gruppe med kolonner i rutenettsystemet?

Select the correct answer

question mark

Hva representerer klassene sm, md, lg og xl?

Select the correct answer

question mark

Hvilke klasser brukes for å style overskrifter med ulike størrelser?

Select the correct answer

question mark

Hvilke klasser brukes for å justere tekst?

Select the correct answer

question mark

Hvilken klasse brukes for å stable knapper vertikalt?

Select the correct answer

question mark

Hvilken klasse brukes på avkrysningsbokser og radioknapper i en form-check-container for å sikre konsekvent stil?

Select the correct answer

question mark

Hvordan bidrar Bootstraps rutenettsystem til organisering av skjemautforming?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 8

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

Suggested prompts:

What are the exact Bootstrap classes I should use for each step?

Can you show an example of how the HTML structure should look after applying these classes?

Can you explain how the Bootstrap grid system ensures responsiveness in this scenario?

Awesome!

Completion rate improved to 3.23

bookUtfordring og Quiz: Bruk Grunnleggende Bootstrap-Konsepter

Sveip for å vise menyen

Oppgave: Forbedre porteføljevisning med Bootstrap-klasser

  • Steg 1: Legg til riktig klasse på den gitte div-elementet for å opprette en global beholder.
  • Steg 2: Legg til riktig klasse på den gitte div-elementet for å opprette en rad i beholderen.
  • Steg 3: Legg til riktige klasser på de gitte div-elementene for å opprette kolonner for hvert porteføljeelement. Sørg for at kolonnene er responsive og justerer bredden deretter. (Vennligst merk at det er tre div-elementer i dette steget.)
  • Steg 4: Stil porteføljeelementenes titler ved å legge til passende klasser på de gitte h2-elementene. Sentrer titlene i sine respektive kolonner.
  • Steg 5: Gjør beskrivelsene til porteføljeelementene leselige og med passende størrelse ved å legge til egnede klasser på de gitte p-elementene. Sett skriftstørrelsen til fs-6.
index.html

index.html

index.css

index.css

copy

Bruk Bootstraps rutenettsystem (container, row, col) for å lage et responsivt oppsett for porteføljevisningen. Bruk typografiklasser (text-center, h2, fs-6) for å style titler og beskrivelser til porteføljeelementene på en hensiktsmessig måte.

index.html

index.html

index.css

index.css

copy

1. Hvor mange kolonner deler Bootstraps rutenettsystem siden inn i?

2. Hvilken klasse omslutter og sentrerer innholdet i en container med fast bredde?

3. Hvilke klasser brukes for å lage en horisontal gruppe med kolonner i rutenettsystemet?

4. Hva representerer klassene sm, md, lg og xl?

5. Hvilke klasser brukes for å style overskrifter med ulike størrelser?

6. Hvilke klasser brukes for å justere tekst?

7. Hvilken klasse brukes for å stable knapper vertikalt?

8. Hvilken klasse brukes på avkrysningsbokser og radioknapper i en form-check-container for å sikre konsekvent stil?

9. Hvordan bidrar Bootstraps rutenettsystem til organisering av skjemautforming?

question mark

Hvor mange kolonner deler Bootstraps rutenettsystem siden inn i?

Select the correct answer

question mark

Hvilken klasse omslutter og sentrerer innholdet i en container med fast bredde?

Select the correct answer

question mark

Hvilke klasser brukes for å lage en horisontal gruppe med kolonner i rutenettsystemet?

Select the correct answer

question mark

Hva representerer klassene sm, md, lg og xl?

Select the correct answer

question mark

Hvilke klasser brukes for å style overskrifter med ulike størrelser?

Select the correct answer

question mark

Hvilke klasser brukes for å justere tekst?

Select the correct answer

question mark

Hvilken klasse brukes for å stable knapper vertikalt?

Select the correct answer

question mark

Hvilken klasse brukes på avkrysningsbokser og radioknapper i en form-check-container for å sikre konsekvent stil?

Select the correct answer

question mark

Hvordan bidrar Bootstraps rutenettsystem til organisering av skjemautforming?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 8
some-alt