MVnet logo

Internet » Bootstrap 4

  • Julkaistu: 08.06.2020
  • Päivitetty: 08.06.2020
  • Kommentit

Bootstrap 4 - upeat verkkosivut nopeasti ja helposti

Tarvitsetko staattiset nettisivut esimerkiksi tulevia messuja varten, tai vaikkapa jollekin kesätapahtumalle? Vai onko sinulla pieni yritys, kuten kampaamo, jolle tarvitset nettisivut? Yksi helpoin keino saada responsiiviset ja myös kännykällä hyvin toimivat nettisivut on käyttää CSS- kirjastoa nimeltä Bootstrap.

Mitä sinun tarvitsee osata ennen Bootstrappia?

Aivan kylmiltään pelkällä CSS-kirjastolla ei nettisivuja pysty tekemään. Ennen CSS-kirjaston opettelua sinun tulee osata HTLM-kielen perusteet ja ymmärtää CSS-tyylimääritteiden perusteet. Onneksi nämä taidot on nopea oppia. Internet on pullollaan tutoreita ja ohjeita, joilla opit perusteet alle viikossa.

CSS-perusteiden lisäksi suosittelen opettelemaan Flexboxia ja Grid- layoutin perusteet. Flexboxin opetteluun yksi parhaista lähteistä on Flexbox Zombie peli. Sitä pelaamalla opit helposti käyttämään Flexboxia taistellessasi zombeja vastaan. Jos pelaaminen viehättää, suosittelen tutustumaan myös Twin Spin slottipeliin. Sitä pelatessa huomaat, mitä kaikkea voi tehdä HTML- ja JavaScript kielillä sekä CSS-tyylimääritteillä.

Mikä on Bootstrap 4?

Bootstrap on Twitterin kehittämä avoimen lähdekoodin CSS-kirjasto. Vastaavanlaisia kirjastoja on muitakin, mutta Bootsrap on niistä suosituin ja arvostetuin. Se on itse asiassa niin suosittu, että lähes jokaisen selaimen välimuistiin on tallentunut lähdekoodi vieraillessa jollain Bootstrapilla tehdyllä sivulla. Näin ollen se yleensä myös toimii suhteellisen nopeasti.

Bootstrapilla pystyt tekemään todella hienot ja responsiiviset sivut hyvin pienellä vaivalla. CSS- määritykset on jo tehty ja toimiviksi testattu. Kehittäjä vain lisää tarvittavat koodinpätkät sivuilla ja kuin taikaiskusta halutut palikat löytyvät myös omilta sivuilta.

Bootsrapiin sisältyy myös kaikki tarvittavat JavaScript-koodit. Näin erinäköiset alas vedettävät valikot, nappulat, navigointipalkit ja muut toimivat ja näyttävät hienoilta, eikä sinun tarvitse osata tai ymmärtää riviäkään JavaScript-kieltä.

Milloin Bootstrap on parhaimmillaan?

Jos tarvitaan nopeasti hyvin toimivat sivut, on yksinkertaisinta käyttää Bootstrapia. Kirjastolle löytyy myös lukuisia ilmaisia ja maksullisia templetejä, joita hieman muokkaamalla saat kivannäköiset sivut muutamassa tunnissa.

Miinuspuolena mainittakoon, että Bootstrapia käyttämällä sivuista tulee aina väkisin hieman raskaat ja isot. Jos sivut ovat hyvin pienet ja yksinkertaiset, on parempi käyttää aivan tavallisia CSS- määrityksiä.

Myös isommat sivustot toimivat vikkelämmin, jos ne rakennetaan alusta saakka itse. Kannattaakin muistaa, että alusta saakka itse tekeminen ja sivujen saaminen responsiiviseksi on hidasta ja vaativaa hommaa.

Kuinka käyttää Bootstrapia?

Yksinkertaisinta saada Bootstrap käyttöön on liittää Bootstrapin verkko-osoite HTML-lomakkeeseen. Se tapahtuu samoin kuin normaalin CSS-tiedoston liittäminen tapahtuu. Lisäksi HTML-lomakkeen loppuun liitetään linkki Bootstrapin JavaScript- tiedostoon. Erinomaiset ohjeet tähän löytyy Bootstrap dokumentaatiosta.

Bootstrap-tiedostot sijaitsevat useilla servereillä ympäri maailmaa, joten tiedostojen noutaminen on yleensä hyvin nopeaa. Kuten jo edellä mainittiin, selain tallettaa tiedoston välimuistiin, eikä sitä näin ollen tarvitse hakea kuin kerran.

Bootstrap-tiedostot voi myös asentaa samalle serverille, missä pidät nettisivuja. Tällöin pääset muokkaamaan suoraan Bootstrap-tiedostoa, eikä sinun tarvitse ylikirjoittaa tietoja paikallisella CSS- tiedostolla. Miinuspuolena on se, että tällöin Bootstrap tiedostosi ei päivity laisinkaan. Toisaalta näin vältyt mahdollisilta yllätyksiltä päivitysten yhteydessä. Yleensä valmiit templeatit sisältävät Bootstrap-tiedoston ja muokkaukset on tehty suoraan siihen.

Yhteenveto

Bootstrap on avoimen lähdekoodin CSS-kirjasto, joka mahdollistaa nopean ja helpon responsiivisten sivustojen teon. Bootstrapilla tehdyt sivut on tehty ensisijaisesti toimimaan mobiililaitteilla. Sen käyttö on helppoa ja jo muutamien päivän opettelun jälkeen pystyt tekemään hienoja staattisia nettisivuja. Tehdäksesi verkkosivut sinun on osattava HTML-perusteet ja ymmärtää CSS-perusteet.

Sivun kommentit