Utfordring 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 trediv-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 tilfs-6.
index.html
index.css
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.css
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?
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 3. Kapittel 8
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Seksjon 3. Kapittel 8