Wanneer je dit onder de knie hebt, kun je snel en makkelijk je layout opzetten en is de stap naar een responsive website ook veel makkelijker te maken.
Bekijk de intro-presentatie van deze les in de onderstaande video om een idee te krijgen van wat layout/grid/bootstrap is. Vervolgens kun je de tweede video bekijken, waarin uitgelegd wordt hoe het grid systeem van bootstrap werkt.
Inleiding: Website layout, grid systeem en bootstrap
[video]Opstarten
- Download met deze link het zip bestand die de oefenbestanden bevat.- Open (unzip) het zip bestand, zodat de je de map website_basisbootstrap_oefening kunt gebruiken
- Open deze map in het programma brackets of edgecode
- Open de PSD in Photoshop om het aantal kolommen vast te kunnen stellen en om eventueel andere style waarden te achterhalen.
Theorie: Werking van het grid systeem van bootstrap
Aan de slag
Deze oefening bestaat uit 6 opdrachten waarbij je oefent met het opzetten van de website layout aan de hand van het Photoshop design.Bekijk de onderstaande video voor een uitleg hoe je in HTML een layout bouwt met behulp van het grid systeem.
Praktijkvoorbeeld: In HTML een layout bouwen met het grid systeem van bootstrap
Let op
- Bij het uitvoeren van de opdrachten, hoef je je alleen te richten op het grid systeem. De HTML code voor de inhoud kan je kopieren en plakken in je uitwerking.- Tijdens deze les hoef je alleen te werken met de medium breedte:
Dus wanneer je een kolom div maakt, gebruik je de volgende class notatie: col-md-{kolom breedte}
Bijvoorbeeld:
<div class="col-md-2"> OF <div class="col-md-12">
Opdracht 1) Topmenu
1a. Maak voor het topmenu de "container > row > col " structuur.1b. Om er voor te zorgen, dat je een grijze balk als achtergrond kan plaatsen die net zo breed wordt als het venster,
plaats je om de container nog een: div en geef deze de class: grijs.
maak vervolgens hiervoor een stijl blok aan en geef de div de juiste achtergrond kleur.
1c. Plak de volgende code in de colomn div:
<p class="topmenu">MENU</p>
Opdracht 2) Banner
2a. Maak voor de banner een nieuwe "container > row > col " structuur. (2 kolommen) 2b. Plaats in de linker kolom de volgende HTML:<h1 class="banner">Snow<br>Board<br>Mag</h1>2c. Plaats in de rechter kolom de volgende HTML:
<h1 class="editie">NOV 2014 #16</h1>2d. Geef de container div nog een extra class genaamd: bannercontainer
Hiervoor is al een stijlblok gemaakt die een boven ruimte (margin-top) aan de banner container instelt.
Opdracht 3) Artikel
3a. Maak voor het artikel gedeelte een nieuwe "container > row > col " structuur. 3b. Plaats in de linker kolom (tekst) de volgende HTML: <h1 class="artikelkop">Ellen Douchema</h1>
<p class="artikeltekst">Vier jaar op rij een gratis wintersport winnen, dat geloof je toch niet? Ellen Douchema(19) uit Drachten overkwam het. De studente geschiedens aan de Universiteit van Groningen snowboard eigenlijk nog niet eens zo lang. In Rotterdam, waar ze opgroeide, is een indoor skihal waar ze wel eens kwam. Maar ze was nog nooit op wintersport geweest toen ze vier jaar geleden opeens een wintersport won bij een prijsvraag. “Die vakantie was te gek, drie dagen snowboardles en vooral heel veel feest! En het bizarre is, de drie jaren daarop heb ik dezelfde prijsvraag ook gewonnen, dus ik ben vier jaar op rij gratis op wintersport geweest! Een combinatie van heel weinig deelnemers en heel veel geluk denk ik. Het laatste jaar hebben ze mij maar ambassadrice gemaakt, haha!” Vorige winter was Ellen twee maanden in Calgary, Canada om een daar een minor te volgen voor haar studie. Dat ze die in Canada deed was geen toeval, ze ging daar voornamelijk heen voor de bergen en de sneeuw. <a href="">> Lees meer</a></p>
3c. Plaats in de rechter kolom (foto) de volgende HTML:<img class="img-responsive artikelafbeelding" src="afbeeldingen/Lieke.jpg" alt="">3d. Om er voor te zorgen, dat je een groenige balk als achtergrond kan plaatsen die net zo breed wordt als het venster,
plaats je om de container nog een: div en geef deze de class: groenig.
maak vervolgens hiervoor een stijl blok aan en geef de div de juiste achtergrond kleur.
3e. Geef in het zelfde stijlblok ook een boven marge van 93 pixels zodat de juiste ruimte tusseen de banner en het artikel achtergrond komt.
Opdracht 4) Producten
4a. Maak voor het product gedeelte een nieuwe "container > row > col " structuur.4b. Geef de container div nog een extra class genaamd: producten
4c. Plaats per kolkom de volgende HTML om een afbeelding te tonen:
<img src="afbeeldingen/jacket.png" alt="">
<img src="afbeeldingen/pants.png" alt="">
<img src="afbeeldingen/boots.png" alt="">
<img src="afbeeldingen/clothes.png" alt="">
<img src="afbeeldingen/gloves.png" alt="">
<img src="afbeeldingen/bags.png" alt="">
Opdracht 5) collectie
5a. Maak voor het collectie gedeelte een nieuwe " row > col " structuur. Dit kan in dezelfde container van de producten.5b. Plaats per kolkom de volgende HTML om een afbeelding te tonen:
<img class="img-responsive" src="afbeeldingen/woman_collection.png" alt="">
<img class="img-responsive" src="afbeeldingen/men_collection.png" alt="">
<img class="img-responsive" src="afbeeldingen/other_collection.png" alt="">
5c. Geef de row div nog een extra class genaanmd: collecties