Tyylitiedostot ja sivun asettelun määrittely
Olet ehkäpä huomannut, että web-sovelluksemme eivät ole kovin kaunista katsottavaa. Kurssilla pääpaino on palvelinpään toiminnallisuuden toteuttamisessa, joten sivujen tyylin määrittely on ollut käytännössä täysin paitsiossa. Korjataan tilannetta hieman.
Siinä missä HTML määrittelee sivun rakenteen ja sisällön, sivun asettelu ja tyyli määritellään Cascading Style Sheets (CSS)-tiedostoilla. Verkosta löytyy iso kasa CSS-oppaita — esimerkiksi osoitteessa https://www.w3schools.com/css/ oleva opas on hyvä lähtökohta tyylien määrittelyssä käytetyn CSS-kielen tarkasteluun.
Tällä kurssilla lähestymme tyylien määrittelyä hieman pragmaattisemmin ja jätämme CSS-kielen opiskelun käytännössä kokonaan väliin. Tutustumme sen sijaan lyhyesti suositun Twitter Bootstrap -kirjaston käyttöön.
Twitter Bootstrapin käyttöönotto
Twitter Bootstrapin version 4.3.1 käyttöönotto tapahtuu määrittelemällä HTML-sivun head-elementin sisälle linkki Twitter Bootstrapin tyylitiedostoon.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>Bootstrapin tyylitiedoston lisäksi head-elementin sisälle lisätään pieni loitsu, jolla mahdollistetaan tyylien mukautuminen erilaisille päätelaitteille.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Olemme juuri oppineet käyttämään fragmentteja, joten Twitter Bootstrapin käyttöönotto fragmenttien kautta on luontevaa. Seuraava fragmentti sisältää kummatkin edellä olevat askeleet sekä parameterisoidun otsikon.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)" lang="en">
<meta charset="UTF-8" />
<title th:text="${title}">Otsikko</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
</head>
<body>
<header th:fragment="header(text)">
<h1 th:text="${text}">Otsikko</h1>
</header>
<footer th:fragment="links">
<ul>
<li><a th:href="@{/polku1}">Linkki 1</li>
<li><a th:href="@{/polku2}">Linkki 2</li>
<li><a th:href="@{/polku3}">Linkki 3</li>
<li><a th:href="@{/polku4}">Linkki 4</li>
</ul>
</footer>
</body>
</html>Tyylien tuominen sivuille ja asettelun alkeet
Bootstrap-tyylien, kuten muidenkin tyylien, käyttöönotto tapahtuu HTML-elementteihin lisättävän class-attribuutin arvojen avulla. Attribuutilla class määrätään elementin tyyliluokat, joita vastaavat tyylit löytyvät tyylitiedostoista.
Tärkein Bootstrapin tyyliluokka on container, jonka avulla määritellään asetteluun liittyviä alueita. Alue on keskitetty siten, että se sopii erilaisille näytöille. Tyylin voi asettaa mm. main, div ja section elementtien class-attribuutin arvoksi.
Seuraavissa esimerkeissä käytetään JSFiddle-palvelua. Näet lähdekoodin välilehdellä HTML ja siihen liittyvän lopputuloksen välilehdellä Result. Sivuilla näkyy vain body-elementin sisältö, ja Bootstrap on ladattuna valmiiksi.
Tyylin container sisältävän elementin sisälle voi lisätä käytännössä minkä tahansa tyylistä sisältöä. Alueen määrittelyn lisäksi container-tyylin avulla voi määritellä sivulle ruudukon.
Ruudukon määrittelyssä pelaavat yhteen tyyliluokat container eli alue, row eli rivi ja col eli sarake. Tutustutaan ruudukon luomiseen seuraavaksi.
Kun sovellukseen luodaan ruudukko, tulee ensin luoda elementti, joka on tyylitelty container-tyyliluokalla. Tämän sisälle määritellään rivit — kukin yksittäinen rivi määritellään div-elementillä, jonka tyyliluokkana on row eli rivi — <div class="row">.
Rivin sisälle määritellään yksittäiset solut. Bootstrapissa kullakin rivillä on korkeintaan 12 solua. Yksittäisen solun määrittely tapahtuu tyyliluokalla col-numero, missä numeron kohdalle asetetaan leveys solujen lukumääränä. Esimerkiksi kaksi elementtiä, joissa kummassakin on tyyliluokkana col-6, vie koko rivin.
Alla olevaan esimerkkiin on määritelty rivi, joka sisältää kolme solua. Ensimmäinen solu vie puolet käytössä olevasta tilasta (col-6), ja seuraavat kaksi solua vie kumpikin puolet jäljelle jääneestä tilasta (col-3).
Elementtejä, joihin on määritelty container-tyyliluokka, voi olla sovelluksessa useita. Alla olevassa esimerkissä on ensin otsikkoalue, jota seuraa erillinen kaksi riviä sisältävä alue.
Sovellukseen voi halutessaan tehdä myös omia tyylitiedostoja, jotka esimerkiksi tukevat Bootstrapin tyylejä. Omat tyylitiedostot asetetaan kansioon src/main/resources/public/, jonka sisällä oleviin tiedostoihin voi viitata suoraan ilman tarvetta kontrollerissa olevalle metodille. Esimerkiksi kansiossa public oleva tiedosto style.css voidaan ladata sivun käyttöön lisäämällä otsaketiedostoon seuraava rivi. Omat tyylit lisätään otsaketiedostoon Bootstrapin jälkeen.
<link rel="stylesheet" th:href="@{/public/style.css}"/>Edellisen esimerkin riveihin ja sarakkeisiin voi lisätä esimerkiksi täytettä "padding" tai vaikkapa oman taustavärin "background-color". Oma tyyliluokka määritellään luomalla css-tiedostoon alue, joka alkaa pisteellä ja tyyliluokan nimellä. Alue rajataan aaltosuluilla. Tyylit määritellään muodossa tyylin-nimi: arvo — esimerkiksi padding: 10px. Lisää tyylejä löydät w3schoolsin CSS-oppaasta.
.cell {
padding: 10px;
background-color: #eee;
}Kun tyylitiedosto on määritelty osaksi sivua ja selain lataa sen, tyylin saa käyttöön lisäämällä sen elementin tyyliluokaksi, esimerkiksi <div class="cell">. Tyyliluokkia voi määritellä elementtiin useita — esim. <div class="col-6 cell">. Alla olevassa esimerkissä muutamaan soluun on määritelty edellä kuvattu tyyli.
Yllä olevissa esimerkeissä solujen koko määriteltiin eksplisiittisesti. Solujen koon määrittelyn vastuun voi antaa myös Bootstrapille, jolloin Bootstrap pyrkii jakamaan alueen tasan elementtien kesken, riippuen elementtien sisällöstä. Tällöin tyyliluokkana käytetään pelkkää tyyliä col. Alla esimerkki.
Käyttöliittymäelementtien tyylittely
Bootstrap tarjoaa valmiit tyylit lähes kaikkiin käyttöliittymäelementteihin. Taulu table tyylitellään tyyliluokalla table, lomake-elementit (esim input) tyyliluokalla form-control, ja napit tyyliluokalla btn sekä siihen liittyvillä lisätyyleillä kuten ensisijaista nappia kuvaavalla tyylillä btn-primary.
Alla kuvattuna esimerkki näiden yhteiskäytöstä.
Yllä olevassa esimerkissä käyttöliittymäelementit ovat koko sivun levyisiä. Tämä johtuu siitä, ettei elementtejä ole määritelty näytettävän alueen kokoa rajaavan container-tyyliluokan sisältävän elementin sisälle. Seuraavassa esimerkissä käyttöliittymän elementit on määritelty "containeriin", jolloin Bootstrap ottaa vastuun elementtien leveyden määrittelystä.
:
Log in to view the quiz