Bootstrap (käyttöliittymäkehys)

Bootstrap (engl. Bootstrap (front-end framework)) on ilmainen ja avoimen lähdekoodin CSS-kehys, joka on kehitetty responsiivisten, mobiililähtöisten verkkosivustojen kehittämiseen. Se on suosituin HTML-, CSS- ja JavaScript -kehys verkkosivustojen kehittämiseen pitäen sisällään erilaisia suunnittelumalleja kuten lomakkeita, painikkeita, navigointia ja monia muita käyttöliittymäkomponenttejä. Kehyksen kehittivät Mark Otto ja Jacob Thornton Twitterissä. Tavoitteena oli parantaa sivuston käytettävien työkalujen yhdenmukaisuutta ja ylläpidon minimoimista.

Bootstrap oli kymmenenneksi suosituin projekti Github:ssa vuonna 2022 heinäkuussa.

Ominaisuudet 
Bootstrap on HTML-, CSS- ja JavaScript-kirjasto, jonka tarkoitus on yksinkertaistaa informatiivisten verkkosivujen kehittämistä. Kehyksen ensisijainen tarkoitus on hyödyntää koko-, fontti-, väri- ja asetteluvaihtoehtoja verkkosivuprojekteissa. Bootstrap:n lisääminen projektiin tarjoaa perustyyli määräykset kaikille HTML-elementeille, jonka avulla kehittäjä pystyy luomaan yhtenäisen ulkoasun taulukoille, lomake-elementeille ja proosalle kaikilla selaimilla.

Bootstrap sisältää myös monia JavaScript komponentteja, jotka eivät vaadi toimiakseen muita kirjastoja. Eri komponentit tarjoavat käyttöliittymäelementtejä joita ovat muun muassa edistymispalkit, navigointivalikot ja valintaikkunat. Jokainen Bootstrap komponentti koostuu HTML-rakenteesta, CSS-määrityksistä ja JavaScript-koodista (joissakin tapauksista). Ne myös laajentavat joidenkin jo olemassa olevien käyttöliittymäelementtien toimintoja esimerkiksi syöttökentän automaattinen täydennystoiminto.

Näkyvimmät komponentit Bootstrap:ssa ovat tasokomponentit/asettelukomponentit, koska ne vaikuttavat suoraan koko verkkosivuun. Tavallisimman komponentin nimi on "Säiliö", jossa kaikki muut sivun elementit on aseteltu haluamalla tavalla. Säiliö komponentteja on kahdenlaisia: ensimmäinen on kiinteän leveyden säiliö (engl. a fixed-width container) ja toinen on nestemäisen leveyden säiliö (engl. a fluid-width container). Näiden kahden erona on se, että nestemäisen leveyden säiliö täyttää aina verkkosivujen leveyden ja kiinteän leveyden säiliöllä on ennalta määrätty kiinteä leveys näytön koosta riippuen: 

 pienempi kuin 567 pikseliä (Extra small)
 576-768 pikseliä (Small)
 768-992 pikseliä (Medium)
 992-1200 pikseliä (Large)
 suurempi kuin 1200 pikseliä (X-Large)

Muut Bootstrap-asettelukomponentit toteuttavat rivit ja sarakkeet CSS Flexbox -asettelun mukaisesti, kun säiliö on asetettu. 

Bootstrap voidaan lisätä helposti osaksi mitä tahansa projektia esipakatun version avulla. Se sisältää yhden CSS-tiedosto ja kolme JavaScript-tiedostoa. Raakaversio kuitenkin tarjoaa kehittäjälle lisää räätälöinti sekä koon optimointi mahdollisuuksia. Raaka muoto on modulaarinen, joten kehittäjä voi muun muassa poistaa komponentteja, joita ei tarvitse sekä käyttää teemoja.

Historia 
Bootstrap oli alun perin nimeltään Twitter Blueprint. Otto ja Thornton halusivat luoda kehyksen tukemaan sisäisten työkalujen yhdenmukaisuutta. Muutaman kuukauden kehitystyön jälkeen, Twitterin kehittäjät alkoivat osallistua projektiin osana Hack Week -tapahtumaa, jolloin sen nimi muutettiin nykyiseksi ja projekti julkaistiin avoimena lähdekoodina 19.8.2011.

Bootstrapista on tehty tähän mennessä yhteensä 5 versiota. Bootstrap 2.0 mahdollisti responsiivisen web-suunnittelun. Bootstrap 3.0 mahdollisti litteän muotoilun ja luotiin mobiililähtöinen lähestymistapa. Bootstrap 4.0 -versiota rakennettiin pitkään. Se julkistettiin 19.10.2014, ja lopullinen versio julkaistiin 18.1.2018. Tällöin koodi kirjoitettiin uudelleen ja alettiin tukea CSS Flexible Box -verkkoasettelumallia. Bootstrap 5.0 julkaistiin 5.5.2021 ja sen mukana tuli Bootstrabin nykyinen logo, uusi offcanvas -komponentti ja luovuttiin JQuerystä.

Boostrap 2 
31. tammikuuta 2012 julkaistiin Bootstrap 2, joka lisäsi sisäänrakennetun tuen Glyphiconeille, useita uusia komponentteja sekä muutoksia moniin olemassa oleviin komponentteihin. Tämä versio tukee responsiivista web-suunnittelua, mikä tarkoittaa, että verkkosivujen ulkoasu mukautuu dynaamisesti ottaen huomioon käytetyn laitteen ominaisuudet (joko pöytäkone, tabletti, matkapuhelin).

Bootstrap 3 
19. elokuuta 2013 julkaistiin Bootstrap 3. Se suunnitteli komponentit uudelleen käyttämään litteää muotoilua ja mobiilia ensisijaista lähestymistapaa. Bootstrap 3 sisältää uuden laajennusjärjestelmän nimiavaruustapahtumilla. Bootstrap 3 lopetti Internet Explorer 7:n ja Firefox 3.6:n tuen, mutta näille selaimille on valinnainen monitäyttö.

Bootstrap 4 
Otto julkisti Bootstrap 4:n 29. lokakuuta 2014. Bootstrap 4:n ensimmäinen alfaversio julkaistiin 19. elokuuta 2015. Ensimmäinen beta-versio julkaistiin 10. elokuuta 2017.[10] Otto keskeytti Bootstrap 3:n työskentelyn 6. syyskuuta 2016 vapauttaakseen aikaa Bootstrap 4:n työskentelyyn. Bootstrap 4 valmistui 18. tammikuuta 2018.

Merkittäviä muutoksia ovat mm. 

 Koodin merkittävä uudelleenkirjoitus 
 Less:in korvaaminen Sass:illa
 Lisäys Reboot, kokoelma elementtikohtaisia ​​CSS-muutoksia yhdessä tiedostossa, joka perustuu Normalisointiin 
 Reboot:in lisääminen, kokoelma elementtikohtaisia ​​CSS-muutoksia yhdessä tiedostossa, joka perustuu elementiin Normalize
 IE8:n, IE9:n ja iOS 6:n tuen poistaminen 
 CSS Flexible Box -tuki 
 Navigoinnin mukautusvaihtoehtojen lisääminen Responsiivisten välitys- ja kokoapuohjelmien lisääminen 
 Vaihtaminen CSS:n pikseliyksiköstä root ems:iin Lisäämällä maailmanlaajuista fonttikokoa 14 kuvapisteestä 16 kuvapisteeseen luettavuuden parantamiseksi 
 panel, thumbnail, pager, and well komponenttien poistaminen
 Glyphicons-kuvakkeen fontin pudottaminen 
 Valtava määrä hyödyllisyysluokkia 
 Parannettu lomaketyyli, painikkeet, pudotusvalikot, mediaobjektit ja kuvaluokat 

Bootstrap 4 tukee uusimpia Google Chromen, Firefoxin, Internet Explorerin, Operan ja Safarin versioita (paitsi Windowsissa). Se tukee lisäksi takaisin IE10:een ja uusimpaan Firefox Extended Support Release (ESR) -julkaisuun. Bootstrap 5 [muokkaa lähdettä] Bootstrap 5 julkaistiin virallisesti 5. toukokuuta 2021.

Lähteet 

 Mark Otto, Jacob Thornton, and Bootstrap contributors: Containers getbootstrap.com. Viitattu 4.10.2022. (englanniksi)
 Build software better, together GitHub. Viitattu 4.10.2022. (englanniksi)
 Say hello to Bootstrap 2.0 blog.twitter.com. Viitattu 4.10.2022. (englanniksi)
 Mark Otto: Bootstrap 3 released blog.getbootstrap.com. 19.8.2013. Viitattu 4.10.2022. (englanniksi)
 Mark Otto: Bootstrap 3.3.0 released blog.getbootstrap.com. 29.10.2014. Viitattu 4.10.2022. (englanniksi)
 Mark Otto: Bootstrap 4 blog.getbootstrap.com. 18.1.2018. Viitattu 4.10.2022. (englanniksi)
 Mark Otto: Bootstrap 5 blog.getbootstrap.com. 5.5.2021. Viitattu 4.10.2022. (englanniksi)
 "Bootstrap"  4 lokakuuta 2022
 "Bootstrap (front-end framework)" 4 lokakuuta 2022

Ohjelmistot