Bootstrap sivupohjan tekeminen
Bootstrap on yksi suosituimmista sovelluskehyksistä (framework), jota käytetään responsiivisten www-sivujen tekemiseen. Se sisältää joukon CSS määrityksiä ja Javascript -komentoja, joiden avulla voidaan helpommin tuottaa käyttäjän selainkoon huomioivat (responsiiviset) sivut. Aikaisemmin tehtiin usein kahdet erilliset sivut, toiset mobiiliilaitteita (kännyköitä), toiset tietokoneita varten. Kirjoitushetkellä uusin versio Bootstrapista on 3.3.6. Esim. nämä sivut on tehty Bootstrapin avulla.
Bootstrap tarvitsee kolme tiedostoa, jotka voidaan joko ladata ja kopioida samaan kansioon jossa sivutkin sijaitsevat, tai sitten ne voidaan linkittää MaxCDN -palvelusta (käytän tässä sitä vaihtoehtoa). Lisäksi tarvitaan jQuery javascript kirjasto. Alla olevalla koodilla saadaan tarvittavat osat linkitettyä (linkitetään sivun head -osaan):
<!--Minimikokoon pakattu CSS tiedosto-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery kirjasto -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrarin javascript tiedostot minimikoossa-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Lisäksi mobiililaitteiden vuoksi kannattaa sivun head -osaan lisätä alla oleva komento:
<meta name="viewport" content="width=device-width, initial-scale=1">
Seuraavaksi suunnitellaan sivulle ulkoasu (layout). Bootstrapin idea perustuu siihen että sivu jaetaan 12 sarakkeeseen. Sen jälkeen näitä saarekkeita yhdistetään haluttu määrä class -määrityksellä esim.
<div class="col-md-12">Tämä yhdistäisi kaikki yhdeksi alueeksi </div>
Vastaavasti <div class="col-md-4"> yhdistäisi vain 4/12 osaa yhdeksi alueeksi jne. Yllä olevan komennon md tarkoittaa sitä että jos sivu kapenee 992 pikseliä leveäksi aletaan "lohkoja" pinota päällekkäin (tila ei kapene enempää). Jos md:n tilalle laitettaisiin sm olisi ko. leveys 768 pikseliä. Vaihtoehdolla lg leveys olisi 1200 pikseliä. Lisäksi on vaihtoehto xs, jossa pinoamista ei tapahdu. Voidaan myös sanoa että xs on tarkoitettu puhelimille, sm tableteille, md tietokoneille ja lg leveänäyttöisille tietokoneille. Tosin nykyisissä kännyköissä alkaa jo olla aika tarkkoja näyttöjä...
Alueen määritys aloitetaan class määrityksellä container (maksimileveys asetettu, n. 1140 px) tai container-fluid, jolloin maksimileveyttä ei ole määritetty vaan sivusta tulee koko selainikkunan levyinen.
Alla on esitetty taulukkomuodossa kuinka halutun leveyisiä alueita voidaan määrittää sivuun.
| col-md-12 | |||||||||||
| col-md-4 | col-md-6 | col-md-2 | |||||||||
| col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 | col-md-1 |
Tehdään seuraavaksi Bootstrapilla aikaisemman mallin mukainen ulkoasu eli:
Kuva
|
|
| Ylänavi | |
Vasen navi
|
Varsinainen sisältö
|
| Alapalkki | |
Alla body-osan koodi:
<div class="container">
<div class="row"> - aloitetaan ensimmäinen rivi
<div class="col-md-12" style="background-color:#0CF">Kuva</div>
</div> - lopetetaan ensimmäinen rivi
<div class="row"> - aloitetaan toinen rivi
<div class="col-md-12" style="background-color:#CCC">Navipalkki</div>
</div> - lopetetaan toinen rivi
<div class="row"> - aloitetaan kolmas rivi
<div class="col-md-3" style="background-color:#6FF">Sivunavi</div>
<div class="col-md-9" style="background-color:#FF9">Sisältö</div>
</div> - lopetetaan kolmas rivi
<div class="row">
<div class="col-md-12" style="background-color:#F9F">Alapalkki</div>
</div>
</div> <!--Container loppuu -->
</body>
Alueille annettu väriarvot, jotta alueet erottuisivat. Selaimessa ko. sivu näyttäisi tältä.
