Grid systeem van Bootstrap deel 2

Opstarten

Om makkelijker te zien in welke breedte je nu naar de website kijkt, ga je boven in de menu balk hiervoor een indicator toevoegen. Deze geeft aan welke vaste (Bootstrap) breedte actief is.

Opdracht

a) Open de hele oefenmap van de vorige les in edgecode of brackets.
b) Voeg in de HTML de onderstaande code toe in het p element met de class "topmenu" na het woord "MENU".

<span class="visible-xs">xs</span>
<span class="visible-sm">sm</span>
<span class="visible-md">md</span>
<span class="visible-lg">lg</span>

(zie deze video voor een voorbeeld)

Uitleg

Andere kolombreedtes instellen voor verschillende venster/scherm breedtes

Bepaalde elementen wel of niet zichtbaar maken voor verschillende pagina breedtes

1) Banner bij smallere schermen

Bij de Large en Medium schermgrote's past de editie-tekst (NOV 2014 #16) nog naast de banner.
Wordt het scherm/venster kleiner (Small en ExtraSmall) dan komt de editie-tekst onder de banner te staan.

Opdracht

a) Zorg er voor dat de editie-tekst bij een Small breedte nog steeds naast de banner staat.
b) Zorg er voor dat de editie-tekst bij een ExtraSmall breedte verborgen wordt.

2) Producten verdeling bij smallere schermen

Zodra het scherm kleiner dan medium wordt, komen alle producten onder elkaar te staan.

Opdracht

a) Zorg er voor dat er bij een Small venster breedte de producten met 3 naast elkaar staan.

b) Zorg er voor dat er bij een Extra Small venster breedte de producten met 2 naast elkaar staan.

3) Collectie afbeelding bij smallere schermen

De drie onderste (collectie) afbeeldingen, komen onder elkaar te staan zodra het scherm kleiner dan medium wordt.

Opdracht

a) Zorg er voor dat de drie afbeeldingen altijd naast elkaar blijven, hoe klein het venster ook wordt.(vanaf een XS venster breedte en hoger)

x4) Classes voor afbeeldingsvormen

Bootstrap heeft een aantal classes gereserveerd om snel een aantal standaard vormen aan afbeeldingen te geven. Zie hieronder drie voorbeelden:

See the Pen Bootstrap 3 - Image shapes by Nangko (@nangko) on CodePen.

    <img class="img-rounded" src="photo.jpg">
    <img class="img-thumbnail" src="photo.jpg">
    <img class="img-circle" src="photo.jpg">

Opdracht

a) Zorg er voor dat de vierkante foto van Lieke, cirkel vormig wordt.
b) Geef de product fotos de grijze omranding met ronde hoeken.
c) Geef drie onderste afbeeldingen ronde hoeken.

x5) Ruimtes tussen de product afbeelding

Zodra er binnen een row div colom div's onder elkaar komen te staan, hebben staan deze zonder boven of onder ruimte strak tegen elkaar aan.
Dit is ook het geval bij de product afbeeldingen.

Opdracht

a) Zorg er voor dat ieder afbeelding die in de div met class producten staat een onder ruimte van 15 pixels krijgt.

x6) Styling aanpassen bij bepaalde scherm/venster breedtes

In de vorige opdracht heb je geoefend met voor verschillende schermbreedtes: andere kolom indeling toepassen en bepaalde elementen tonen of verbergen.
In deze opdracht leer je hoe je zelf style regels kan maken, die pas actief worden wanneer het scherm een bepaalde breedte heeft.

Hiermee kun je dus helemaal zelf bepalen hoe iets er uit moet zien voor een bepaalde scherm breedte.

Bekijk deze video om te zien hoe je dit kan doen:


Hieronder staan de @media queries die aansluiten op de maten die Bootstrap aanhoud.

@media (max-width:767px) {
    /* plaats hier stijlblokken die actief worden bij een XS breedte */
    
}

@media (min-width:768px) and (max-width:991px) {
    /* plaats hier stijlblokken die actief worden bij een SM breedte */

}

@media (min-width:992px) and (max-width:1199px) {
    /* plaats hier stijlblokken die actief worden bij een MD breedte */
    
}

@media (min-width:1200px) {
    /* plaats hier stijlblokken die actief worden bij een LG breedte */

}

Opdracht

Wanneer je de website op z'n smalst zet (XS), valt in de banner het logo (de tekst: SnowBoardMag) over de snowboarder heen.
Om dan het logo niet zo hard over het plaatje te laten vallen, willen we dat het logo wit wordt met een lichte transparantie.

a) Plak deze onderaan je style.css bestand, zodat je de bestande (boven liggende) stijlblokken kan overschrijven als dit nodig is.
b) Zorg er voor dat wanneer de pagina een XS breedte heeft, het logo (de tekst over de banner) de volgende kleur krijgt:

    rgba(255, 255, 255, 0.8)