Bootstrap (käyttöliittymäkehys)

Bootstrap
Luoja	Mark Otto ja Jacob Thornton
Kehityshistoria
Vakaa versio	5.3.3 (20. helmikuuta 2024)
Kehitystilanne	aktiivinen
Tiedot
Ohjelmistotyyppi	ohjelmistokehys
Lisenssi	MIT
Aiheesta muualla
Verkkosivusto
Versiohallinta
Infobox OK

Bootstrap 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äkomponentteja. 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 GitHubissa 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. Bootstrapin 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 Bootstrapissa ovat taso- ja asettelukomponentit, koska ne vaikuttavat suoraan koko verkkosivuun. Tavallisimman komponentin nimi on ”säiliö” (engl. container), jossa kaikki muut sivun elementit on aseteltu halutulla tavalla. Säiliökomponentteja on kahdenlaisia: ensimmäinen on kiinteän leveyden säiliö (engl. fixed-width container) ja toinen on joustavan leveyden säiliö (engl. fluid-width container). Näiden kahden erona on se, että joustavan 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:

• alle 567 pikseliä (Extra small)
• 576–768 pikseliä (Small)
• 768–992 pikseliä (Medium)
• 992–1200 pikseliä (Large)
• yli 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-tiedoston ja kolme JavaScript-tiedostoa. Raakaversio kuitenkin tarjoaa kehittäjälle lisää mahdollisuuksia räätälöintiin ja koon optimointiin. Raakamuoto on modulaarinen, joten kehittäjä voi muun muassa käyttää teemoja ja poistaa turhia komponentteja.

Historia

Sivusto, jonka muotoiluun on käytetty Bootstrapia.

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ä.

Bootstrap 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.

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 beeta-versio julkaistiin 10. elokuuta 2017. 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
• Globaalin fonttikoon kasvattaminen 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

Bootstrap 5 julkaistiin virallisesti 5. toukokuuta 2021. Uuden version silmään pistävin päivitys on sen mukana tullut uusi logo. Uusi logo muodostuu kahdesta aaltosulkeesta joiden välissä on bootstrap:lle tuttu B-kirjain. Uuden logon värimaailma on haluttu kuitenkin pitää samana vanhana, violetin ja valkoisen yhdistelmänä. Lisäksi bootstrap:n netistä löytyvää dokumentaatiota on paranneltu ja organisoitu paremmin.

Uuden version merkittävimmät muutokset:

• käyttää Vanilla JavaScriptia, jQuery:n sijasta, joka tekee uudesta versiosta nopeamman ja kompaktimman.
• Bootstrap lopetti Internet Explorerin tukemisen uudella versiolla, koska Internet Explorer ei tue viimeisimpiä Javascript- ja CSS-standardeja ja Explorerilla on hyvin vähän käyttäjiä.
• RFS (Responsive Font Size) tuki, joka osaa valita oikean fontin, näytön koon ja muiden elementtien perusteella.

• Uusi "offcanvas" komponentti, jota voi käyttää sivupalkissa ja navigointi palkissa ja se toimii näytön ylä-, ala-, oikeassa- tai vasemmassa reunassa.
• RTL (right-to-left) tuki kielille, jotka luetaan oikealta vasemmalle.
• Grid järjestelmään lisättiin uusi pysäytyspiste (XXL / >=1400px).
• Väripalettien laajentuminen ja värien muokattavuuden paraneminen.
• Bootstrap lisäsi uuteen versioon oman avoimen lähdekoodin kuvakekirjaston, jossa on yli 1500 svg kuvaketta.
• Uusi "placeholder" komponentti on lisätty uusimpaan versioon, jolla voi luoda lataavia elementtejä.
• Uusittu tiedoston syöttö, joka ei tarvitse Javascriptia saadakseen sen toimivaksi.
• Yksinkertaistetumpi pohja, joka mahdollistaa Grid-järjestelmän helpomman käytön.
• Tumma teema on lisätty uuteen versioon, jonka lisäksi voit luoda omia mukautettuja teemoja.