WEEK 3 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Wat is een breakpoint in termen van webontwikkeling?

Wat is het verschil tussen de css classe container en container-fluid van bootstrap?

Ik wil ik 2 rijen waarbij 1e rij bestaat uit 6 kolommen en 2e rij uit 2 kolommen. Welke css classes van bootstrap dien ik hierbij te gebruiken

LEERDOELEN

• De leerling is in staat om een lyaout dusdanig met bootstrap css in te delen  

Layout Bootstrap

Ga aan de slag met jouw layout a.d.h.v. jouw ontwerp van vorige periode

Reminder

zorg ervoor dat de bootstrap is toegevoegd aan jouw .blade pagina

container, grid

als je de volgende slideds doorneemtn dan krijg je een stuk herhaling van de vorige les. 

Bootstrap Breakpoint

Wordt gebruikt om een scherm te ontwikelen voor verschillende devices. 

Bootstrap Breakpoint

Bootstrap container

Je begint altijd met het maken van een container in jouw HMTL

In de container ga je verder met jouw ontwerp 

Bootstrap container

Bootstrap Grid (row en Column)

Bootstrap Grid (row en Column)

Bootstrap Grid (row en Column)

Week 3 les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Wat is de functie van het attribuut position in CSS?

1. De achtergrondkleur van een element aanpassen
2. De lettergrootte van een tekst aanpassen
3. De positie van een element bepalen op de webpagina
4. De grootte van een afbeelding aanpassen

Wat zijn de mogelijke waarden voor het attribuut position in CSS?

1. left, right, top, bottom
2. margin, padding, border, content
3. red, green, blue, yellow
4. static, relative, absolute, fixed, sticky

Hoe kan absolute positionering worden toegepast in CSS?

1. Met behulp van de eigenschappen width, height, display
2. Met behulp van de eigenschappen margin, padding, border
3. Met behulp van de eigenschappen top, right, bottom, left
4. Met behulp van de eigenschappen font-size, color, text-align

Leerdoelen

• De leerling heeft kennis genomen van de bootstrap bibliotheek
• De leerling kan bladeren door de bootstrap bibliotheek
• De leerling kan verschillende componenten in zijn schermontwerp toepassen

Bootstrap componenten

• In bootstrap heb je veel componenten
• Bootstrap heeft een bibliotheek met veel componenten
• Elke componenten is met voorbeeld in de bibliotheek
• 
  

Bootstrap componenten

Klik hier voor de bibliotheek

Blader door de bibliotheek, bekijk voorbeelden en ga ermee aan de slag

Samenvatting

Klasikaal doornemen

Ik heb kennis genomen van de bootstrap bibliotheek

Ja

Deels

Nee

Ik kan zelf goed door de bibliotheek van bootstrap bladeren

Ja

Deels

Nee

Ik kan bootstrap componenten gebruiken aan de hand van de bootstrap bibliotheek

Ja

Deels

Nee