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

bookUtmaning och Quiz: Tillämpa Grundläggande Bootstrap-Koncept

Uppgift: Förbättra portföljpresentation med Bootstrap-klasser

  • Steg 1: Lägg till lämplig klass på det angivna div-elementet för att skapa en global container.
  • Steg 2: Lägg till lämplig klass på det angivna div-elementet för att skapa en rad inom containern.
  • Steg 3: Lägg till lämpliga klasser på de angivna div-elementen för att skapa kolumner för varje portföljobjekt. Säkerställ att kolumnerna är responsiva och anpassar sin bredd därefter. (Observera att det finns tre div-element i detta steg.)
  • Steg 4: Styla portföljobjektens titlar genom att lägga till lämpliga klasser på de givna h2-elementen. Centrera titlarna inom respektive kolumn.
  • Steg 5: Gör portföljobjektens beskrivningar läsbara och lämpligt stora genom att lägga till passande klasser på de angivna p-elementen. Ange teckenstorleken till fs-6.
index.html

index.html

index.css

index.css

copy

Använd Bootstraps rutnätsystem (container, row, col) för att skapa en responsiv layout för portföljpresentationen. Applicera typografiklasser (text-center, h2, fs-6) för att utforma portföljobjektens titlar och beskrivningar på ett lämpligt sätt.

index.html

index.html

index.css

index.css

copy

1. Hur många kolumner delar Bootstraps rutnätsystem upp sidan i?

2. Vilken klass omsluter och centrerar innehållet inom en container med fast bredd?

3. Vilka klasser används för att skapa en horisontell grupp av kolumner i rutnätsystemet?

4. Vad representerar klasserna sm, md, lg och xl?

5. Vilka klasser används för att formatera rubriker med olika storlekar?

6. Vilka klasser används för att justera textelement?

7. Vilken klass används för att stapla knappar vertikalt?

8. Vilken klass används på kryssrutor och radioknappar inom en form-check-behållare för att säkerställa enhetlig stil?

9. Hur bidrar Bootstraps rutnätsystem till organiseringen av formulärens layout?

question mark

Hur många kolumner delar Bootstraps rutnätsystem upp sidan i?

Select the correct answer

question mark

Vilken klass omsluter och centrerar innehållet inom en container med fast bredd?

Select the correct answer

question mark

Vilka klasser används för att skapa en horisontell grupp av kolumner i rutnätsystemet?

Select the correct answer

question mark

Vad representerar klasserna sm, md, lg och xl?

Select the correct answer

question mark

Vilka klasser används för att formatera rubriker med olika storlekar?

Select the correct answer

question mark

Vilka klasser används för att justera textelement?

Select the correct answer

question mark

Vilken klass används för att stapla knappar vertikalt?

Select the correct answer

question mark

Vilken klass används på kryssrutor och radioknappar inom en form-check-behållare för att säkerställa enhetlig stil?

Select the correct answer

question mark

Hur bidrar Bootstraps rutnätsystem till organiseringen av formulärens layout?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 8

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

Awesome!

Completion rate improved to 3.23

bookUtmaning och Quiz: Tillämpa Grundläggande Bootstrap-Koncept

Svep för att visa menyn

Uppgift: Förbättra portföljpresentation med Bootstrap-klasser

  • Steg 1: Lägg till lämplig klass på det angivna div-elementet för att skapa en global container.
  • Steg 2: Lägg till lämplig klass på det angivna div-elementet för att skapa en rad inom containern.
  • Steg 3: Lägg till lämpliga klasser på de angivna div-elementen för att skapa kolumner för varje portföljobjekt. Säkerställ att kolumnerna är responsiva och anpassar sin bredd därefter. (Observera att det finns tre div-element i detta steg.)
  • Steg 4: Styla portföljobjektens titlar genom att lägga till lämpliga klasser på de givna h2-elementen. Centrera titlarna inom respektive kolumn.
  • Steg 5: Gör portföljobjektens beskrivningar läsbara och lämpligt stora genom att lägga till passande klasser på de angivna p-elementen. Ange teckenstorleken till fs-6.
index.html

index.html

index.css

index.css

copy

Använd Bootstraps rutnätsystem (container, row, col) för att skapa en responsiv layout för portföljpresentationen. Applicera typografiklasser (text-center, h2, fs-6) för att utforma portföljobjektens titlar och beskrivningar på ett lämpligt sätt.

index.html

index.html

index.css

index.css

copy

1. Hur många kolumner delar Bootstraps rutnätsystem upp sidan i?

2. Vilken klass omsluter och centrerar innehållet inom en container med fast bredd?

3. Vilka klasser används för att skapa en horisontell grupp av kolumner i rutnätsystemet?

4. Vad representerar klasserna sm, md, lg och xl?

5. Vilka klasser används för att formatera rubriker med olika storlekar?

6. Vilka klasser används för att justera textelement?

7. Vilken klass används för att stapla knappar vertikalt?

8. Vilken klass används på kryssrutor och radioknappar inom en form-check-behållare för att säkerställa enhetlig stil?

9. Hur bidrar Bootstraps rutnätsystem till organiseringen av formulärens layout?

question mark

Hur många kolumner delar Bootstraps rutnätsystem upp sidan i?

Select the correct answer

question mark

Vilken klass omsluter och centrerar innehållet inom en container med fast bredd?

Select the correct answer

question mark

Vilka klasser används för att skapa en horisontell grupp av kolumner i rutnätsystemet?

Select the correct answer

question mark

Vad representerar klasserna sm, md, lg och xl?

Select the correct answer

question mark

Vilka klasser används för att formatera rubriker med olika storlekar?

Select the correct answer

question mark

Vilka klasser används för att justera textelement?

Select the correct answer

question mark

Vilken klass används för att stapla knappar vertikalt?

Select the correct answer

question mark

Vilken klass används på kryssrutor och radioknappar inom en form-check-behållare för att säkerställa enhetlig stil?

Select the correct answer

question mark

Hur bidrar Bootstraps rutnätsystem till organiseringen av formulärens layout?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 8
some-alt