Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste ja Tietovisa: Perus Bootstrap -Konseptien Soveltaminen | Peruskäsitteet
Bootstrapin Perusteet Nykyaikaisille Verkkosivustoille

bookHaaste ja Tietovisa: Perus Bootstrap -Konseptien Soveltaminen

Tehtävä: Portfolio-esittelyn parantaminen Bootstrap-luokilla

  • Vaihe 1: Lisää sopiva luokka annettuun div-elementtiin luodaksesi yleisen säiliön.
  • Vaihe 2: Lisää sopiva luokka annettuun div-elementtiin luodaksesi rivin säiliön sisälle.
  • Vaihe 3: Lisää sopivat luokat annettuihin div-elementteihin luodaksesi sarakkeet jokaiselle portfolio-osiolle. Varmista, että sarakkeet ovat responsiivisia ja mukautuvat leveyden mukaan. (Muista, että tässä vaiheessa on kolme div-elementtiä.)
  • Vaihe 4: Tyylittele portfolio-osion otsikot lisäämällä sopivat luokat annettuihin h2-elementteihin. Keskitä otsikot omiin sarakkeisiinsa.
  • Vaihe 5: Tee portfolio-osion kuvauksista selkeitä ja sopivan kokoisia lisäämällä sopivat luokat annettuihin p-elementteihin. Aseta fonttikooksi fs-6.
index.html

index.html

index.css

index.css

copy

Hyödynnä Bootstrapin ruudukkojärjestelmää (container, row, col) luodaksesi responsiivisen asettelun portfolio-esittelylle. Käytä typografialuokkia (text-center, h2, fs-6) portfolio-osion otsikoiden ja kuvausten asianmukaiseen tyylittelyyn.

index.html

index.html

index.css

index.css

copy

1. Kuinka moneen sarakkeeseen Bootstrapin ruudukkosysteemi jakaa sivun?

2. Mikä luokka ympäröi ja keskittää sisällön kiinteän levyisessä säiliössä?

3. Mitkä luokat käytetään luomaan vaakasuuntainen sarakkeiden ryhmä ruudukkosysteemissä?

4. Mitä luokat sm, md, lg ja xl edustavat?

5. Mitä luokkia käytetään otsikoiden eri kokojen muotoiluun?

6. Mitä luokkia käytetään tekstielementtien tasaamiseen?

7. Mitä luokkaa käytetään painikkeiden pystyyn pinoamiseen?

8. Mikä luokka lisätään valinta- ja radiopainikkeiden syötekenttiin form-check-säiliössä yhtenäisen tyylin varmistamiseksi?

9. Miten Bootstrapin ruudukkosysteemi edistää lomakkeen asettelun järjestämistä?

question mark

Kuinka moneen sarakkeeseen Bootstrapin ruudukkosysteemi jakaa sivun?

Select the correct answer

question mark

Mikä luokka ympäröi ja keskittää sisällön kiinteän levyisessä säiliössä?

Select the correct answer

question mark

Mitkä luokat käytetään luomaan vaakasuuntainen sarakkeiden ryhmä ruudukkosysteemissä?

Select the correct answer

question mark

Mitä luokat sm, md, lg ja xl edustavat?

Select the correct answer

question mark

Mitä luokkia käytetään otsikoiden eri kokojen muotoiluun?

Select the correct answer

question mark

Mitä luokkia käytetään tekstielementtien tasaamiseen?

Select the correct answer

question mark

Mitä luokkaa käytetään painikkeiden pystyyn pinoamiseen?

Select the correct answer

question mark

Mikä luokka lisätään valinta- ja radiopainikkeiden syötekenttiin form-check-säiliössä yhtenäisen tyylin varmistamiseksi?

Select the correct answer

question mark

Miten Bootstrapin ruudukkosysteemi edistää lomakkeen asettelun järjestämistä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 8

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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

bookHaaste ja Tietovisa: Perus Bootstrap -Konseptien Soveltaminen

Pyyhkäise näyttääksesi valikon

Tehtävä: Portfolio-esittelyn parantaminen Bootstrap-luokilla

  • Vaihe 1: Lisää sopiva luokka annettuun div-elementtiin luodaksesi yleisen säiliön.
  • Vaihe 2: Lisää sopiva luokka annettuun div-elementtiin luodaksesi rivin säiliön sisälle.
  • Vaihe 3: Lisää sopivat luokat annettuihin div-elementteihin luodaksesi sarakkeet jokaiselle portfolio-osiolle. Varmista, että sarakkeet ovat responsiivisia ja mukautuvat leveyden mukaan. (Muista, että tässä vaiheessa on kolme div-elementtiä.)
  • Vaihe 4: Tyylittele portfolio-osion otsikot lisäämällä sopivat luokat annettuihin h2-elementteihin. Keskitä otsikot omiin sarakkeisiinsa.
  • Vaihe 5: Tee portfolio-osion kuvauksista selkeitä ja sopivan kokoisia lisäämällä sopivat luokat annettuihin p-elementteihin. Aseta fonttikooksi fs-6.
index.html

index.html

index.css

index.css

copy

Hyödynnä Bootstrapin ruudukkojärjestelmää (container, row, col) luodaksesi responsiivisen asettelun portfolio-esittelylle. Käytä typografialuokkia (text-center, h2, fs-6) portfolio-osion otsikoiden ja kuvausten asianmukaiseen tyylittelyyn.

index.html

index.html

index.css

index.css

copy

1. Kuinka moneen sarakkeeseen Bootstrapin ruudukkosysteemi jakaa sivun?

2. Mikä luokka ympäröi ja keskittää sisällön kiinteän levyisessä säiliössä?

3. Mitkä luokat käytetään luomaan vaakasuuntainen sarakkeiden ryhmä ruudukkosysteemissä?

4. Mitä luokat sm, md, lg ja xl edustavat?

5. Mitä luokkia käytetään otsikoiden eri kokojen muotoiluun?

6. Mitä luokkia käytetään tekstielementtien tasaamiseen?

7. Mitä luokkaa käytetään painikkeiden pystyyn pinoamiseen?

8. Mikä luokka lisätään valinta- ja radiopainikkeiden syötekenttiin form-check-säiliössä yhtenäisen tyylin varmistamiseksi?

9. Miten Bootstrapin ruudukkosysteemi edistää lomakkeen asettelun järjestämistä?

question mark

Kuinka moneen sarakkeeseen Bootstrapin ruudukkosysteemi jakaa sivun?

Select the correct answer

question mark

Mikä luokka ympäröi ja keskittää sisällön kiinteän levyisessä säiliössä?

Select the correct answer

question mark

Mitkä luokat käytetään luomaan vaakasuuntainen sarakkeiden ryhmä ruudukkosysteemissä?

Select the correct answer

question mark

Mitä luokat sm, md, lg ja xl edustavat?

Select the correct answer

question mark

Mitä luokkia käytetään otsikoiden eri kokojen muotoiluun?

Select the correct answer

question mark

Mitä luokkia käytetään tekstielementtien tasaamiseen?

Select the correct answer

question mark

Mitä luokkaa käytetään painikkeiden pystyyn pinoamiseen?

Select the correct answer

question mark

Mikä luokka lisätään valinta- ja radiopainikkeiden syötekenttiin form-check-säiliössä yhtenäisen tyylin varmistamiseksi?

Select the correct answer

question mark

Miten Bootstrapin ruudukkosysteemi edistää lomakkeen asettelun järjestämistä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 8
some-alt