Haaste ja Tietovisa: Bootstrapin Käyttöönotto
Huomio
Kaikki haasteet noudattavat alla esitettyä rakennetta:
- Sinulle esitetään tehtävä, joka tulee suorittaa;
- Tämän jälkeen kohtaat koodilohkon, jossa sinun tulee tehdä muutoksia tehtävänannon mukaisesti;
- Napsauta Suorita koodi -painiketta esikatsellaksesi sivua livenä;
- Koodilohkon alla on kaksi painiketta: Vihje ja Ratkaisu;
- Vihje-painike antaa ohjeita tehtävän suorittamiseen;
- Ratkaisu-painike paljastaa oikean ratkaisun.
- On suositeltavaa yrittää ratkaista tehtävä itse ennen Ratkaisu-painikkeen käyttöä.
Tehtävä
Sinulle on annettu perus-HTML-koodi, jossa on button-elementti, joka käyttää oletusselaimen tyylejä. Vaikka button-elementillä on Bootstrapista johdetut luokkanimet, muutoksia ei näy livenä, koska Bootstrapia ei ole liitetty projektiin. Tehtävänäsi on lisätä tarvittavat linkit Bootstrapin yhdistämiseksi projektiin.
index.html
- Lisääksesi linkin Bootstrap CSS:ään, käytä seuraavaa koodia:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">. - Bootstrap JavaScript -linkkiä varten käytä tätä koodia:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>.
index.html
Tietovisa
1. Mikä on yksi tavoista integroida Bootstrap projektiin?
2. Mitä CDN tarkoittaa Bootstrap-integraation yhteydessä?
3. Mikä komento käytetään Bootstrapin asentamiseen NPM:n kautta?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain where exactly I should place the Bootstrap links in the HTML file?
Do I need to add both the CSS and JavaScript links for Bootstrap to work?
What changes should I expect to see after adding Bootstrap to the project?
Awesome!
Completion rate improved to 3.23Haaste ja Tietovisa: Bootstrapin Käyttöönotto
Pyyhkäise näyttääksesi valikon
Huomio
Kaikki haasteet noudattavat alla esitettyä rakennetta:
- Sinulle esitetään tehtävä, joka tulee suorittaa;
- Tämän jälkeen kohtaat koodilohkon, jossa sinun tulee tehdä muutoksia tehtävänannon mukaisesti;
- Napsauta Suorita koodi -painiketta esikatsellaksesi sivua livenä;
- Koodilohkon alla on kaksi painiketta: Vihje ja Ratkaisu;
- Vihje-painike antaa ohjeita tehtävän suorittamiseen;
- Ratkaisu-painike paljastaa oikean ratkaisun.
- On suositeltavaa yrittää ratkaista tehtävä itse ennen Ratkaisu-painikkeen käyttöä.
Tehtävä
Sinulle on annettu perus-HTML-koodi, jossa on button-elementti, joka käyttää oletusselaimen tyylejä. Vaikka button-elementillä on Bootstrapista johdetut luokkanimet, muutoksia ei näy livenä, koska Bootstrapia ei ole liitetty projektiin. Tehtävänäsi on lisätä tarvittavat linkit Bootstrapin yhdistämiseksi projektiin.
index.html
- Lisääksesi linkin Bootstrap CSS:ään, käytä seuraavaa koodia:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">. - Bootstrap JavaScript -linkkiä varten käytä tätä koodia:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>.
index.html
Tietovisa
1. Mikä on yksi tavoista integroida Bootstrap projektiin?
2. Mitä CDN tarkoittaa Bootstrap-integraation yhteydessä?
3. Mikä komento käytetään Bootstrapin asentamiseen NPM:n kautta?
Kiitos palautteestasi!
