Bootstrap (käyttöliittymäkehys)

Wikipediasta
Siirry navigaatioon Siirry hakuun

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.[1]

Ominaisuudet[muokkaa | muokkaa wikitekstiä]

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)[2]
  • 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[muokkaa | muokkaa wikitekstiä]

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.[3] Bootstrap 3.0 mahdollisti litteän muotoilun ja luotiin mobiililähtöinen lähestymistapa.[4] Bootstrap 4.0 -versiota rakennettiin pitkään. Se julkistettiin 19.10.2014[5], ja lopullinen versio julkaistiin 18.1.2018.[6] 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ä. [7]

Boostrap 2[muokkaa | muokkaa wikitekstiä]

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).[6]

Bootstrap 3[muokkaa | muokkaa wikitekstiä]

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ö.[7]

Bootstrap 4[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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