Summary  
This chapter covers how to include external CSS and JavaScript libraries in an HTML document by linking to their CDN-hosted files.  

General domain of usage  
Front-end web development

Kun työskentelet tavallisessa HTML-, CSS- ja JS-projektissa, voit käyttää CDN:ää sisällyttääksesi Bootstrapin CSS- ja JavaScript-tiedostot suoraan HTML-dokumenttiin lataamatta niitä paikalliselle koneelle.

Näin Bootstrap voidaan lisätä CDN:n kautta HTML-tiedostoon:
```html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
```

# Käyttäytymisen ero
Alla olevissa esimerkeissä havainnollistetaan oletusselaimen tyylien ja Bootstrapin tyylien välistä eroa. *Emme keskity tässä vaiheessa Bootstrapin käyttöön.*

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Qm9vdHN0cmFwIEV4YW1wbGU8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+UHJpbWFyeSBCdXR0b248L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Qm9vdHN0cmFwIEV4YW1wbGU8L3RpdGxlPgoKICAgIDwhLS0gSW5jbHVkZSBCb290c3RyYXAgQ1NTIC0tPgogICAgPGxpbmsKICAgICAgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbiBjbGFzcz0iYnRuIGJ0bi1wcmltYXJ5Ij5QcmltYXJ5IEJ1dHRvbjwvYnV0dG9uPgoKICAgIDwhLS0gSW5jbHVkZSBCb290c3RyYXAgSmF2YVNjcmlwdCAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

## Selitys
Molemmissa esimerkeissä on `button`-elementti, johon on lisätty luokat `btn` ja `btn-primary`. Ulkoasu saavutetaan pelkästään näillä kahdella Bootstrapin tarjoamalla luokalla ilman lisättyä CSS-tyylittelyä.

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.

Bootstrapin Asentaminen CDN:n Kautta

Käyttäytymisen ero

Oletusselaimen tyylit

Bootstrapin käyttämät tyylit

Selitys

Awesome!

Bootstrapin Asentaminen CDN:n Kautta

Käyttäytymisen ero

Oletusselaimen tyylit

Bootstrapin käyttämät tyylit

Selitys