Summary  
This chapter explains how to apply Bootstrap’s predefined CSS utility classes (e.g., img-fluid, img-thumbnail, rounded, rounded-circle, rounded-pill) to images for responsive scaling, consistent styling, and custom shapes.  

General domain of usage  
Front-end web development

## Responsiivinen kuva
Responsiiviset kuvat ovat olennaisia. Bootstrapin `img-fluid`-luokka tekee siitä helppoa. Lisää se mihin tahansa `<img>`-elementtiin, jolloin kuva mukautuu näkymän kokoon ja varmistaa täydellisen skaalaamisen sekä yhtenäisen ulkoasun kaikilla laitteilla ja näytön ko'oilla.

## Kuvien esikatselut
Esikatselukuvat tuovat viimeistellyn ja tyylikkään ilmeen verkkosivullesi. Bootstrapin `img-thumbnail`-luokka lisää pyöristetyt kulmat ja hienovaraiset reunukset, mikä takaa siistin ja yhtenäisen ulkoasun.

## Kuvien muodot
Miksi tyytyä tavallisiin suorakulmaisiin kuviin, kun voit lisätä persoonallisuutta? Bootstrap tarjoaa luokkia kuvien muotoiluun, kuten:
- `rounded`: Pehmeät reunat pyöristetyillä kulmilla;
- `rounded-circle`: Täydellisen pyöreät kuvat;
- `rounded-pill`: Tyylikkäät ja modernit kapselinmuotoiset kuvat.



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+SW1hZ2VzIEV4YW1wbGUgMTwvdGl0bGU+CiAgICA8bGluawogICAgICBocmVmPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2Nzcy9ib290c3RyYXAubWluLmNzcyIKICAgICAgcmVsPSJzdHlsZXNoZWV0IgogICAgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8IS0tIFJlc3BvbnNpdmUgSW1hZ2UgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy80MzMzYWIxZi0wYTcyLTQzMWMtYjlkMC03M2E3NTkyNzM5ZDQvc2VjdGlvbi00L2V4YW1wbGUtaW1hZ2UucG5nIgogICAgICBjbGFzcz0iaW1nLWZsdWlkIgogICAgICBhbHQ9IlJlc3BvbnNpdmUgSW1hZ2UiCiAgICAvPgoKICAgIDwhLS0gVGh1bWJuYWlsIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9ImltZy10aHVtYm5haWwiCiAgICAgIGFsdD0iVGh1bWJuYWlsIEltYWdlIgogICAgLz4KCiAgICA8IS0tIENpcmN1bGFyIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9InJvdW5kZWQtY2lyY2xlIgogICAgICBhbHQ9IkNpcmN1bGFyIEltYWdlIgogICAgLz4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Tutustu Bootstrap CSS -kehyksen keskeisiin periaatteisiin ja opi luomaan responsiivisia ja visuaalisesti vaikuttavia verkkosivustoja nopeasti ja tehokkaasti. Käytännönläheisen tutustumisen avulla keskeisiin apuluokkiin ja tehokkaiden komponenttien hyödyntämiseen saat arvokasta käytännön kokemusta, joka tehostaa verkkokehitystyötäsi Bootstrapin monipuolisella työkalupaketilla.

Perehdy Bootstrapin ytimeen ja sen kehitykseen alkuvaiheista nykypäivään, arvioi sen hyödyt ja haitat sekä ymmärrä tehokkaan käyttöönoton edellytykset.

Tutustu Bootstrapin asennusvaihtoehtoihin. Valitse nopea integrointi Content Delivery Networkin (CDN) kautta tai räätälöidympi Node Package Managerin (NPM) lähestymistapa.

Hallitse keskeiset Bootstrap-elementit, kuten monipuolinen ruudukkosysteemi, hienovarainen typografia, dynaaminen painikkeiden käyttö, marginaalien ja täytteiden tarkka hallinta sekä tehokkaiden lomakkeiden luominen sujuvaa käyttäjävuorovaikutusta varten.

Syvennä Bootstrap-osaamistasi edistyneillä aiheilla, kuten dynaamiset navigointivalikot, responsiivinen kuvien käsittely, monipuoliset korttipohjat, interaktiiviset modaalit ja vaikuttavat karusellit, jotka tarjoavat mukaansatempaavia käyttäjäkokemuksia.

Luo portfoliosivusto Bootstrap-kehyksen avulla ohjeidemme mukaisesti. Hyödynnä Bootstrapin tehokkaita ominaisuuksia. Tämä käytännön osio auttaa esittelemään taitojasi, projektejasi ja saavutuksiasi.

Kuvien Käsittely Bootstrapissa

Responsiivinen kuva

Kuvien esikatselut

Kuvien muodot

Awesome!

Kuvien Käsittely Bootstrapissa

Responsiivinen kuva

Kuvien esikatselut

Kuvien muodot