Bootstrap opstart

Bootstrap 4
CSS Framework
1 / 16
next
Slide 1: Slide
ICTMBOStudiejaar 1

This lesson contains 16 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 10 min

Items in this lesson

Bootstrap 4
CSS Framework

Slide 1 - Slide

Leerdoelen
Ik implementeer Bootstrap in het nieuwe project.
Ik pas Bootstrap toe in het nieuwe project. 

Slide 2 - Slide

Dit weten we van Bootstrap
  • Best practice
  • Snel toe te passen
  • Trendvolgend
  • responsive

Slide 3 - Slide

Bootstrap basis uiterlijk

Slide 4 - Slide

Hoe implementeer je Bootstrap
  • Voeg <link > toe aan head voor css
  • Voeg <link> toe voor js onder aan de pagina
  • Voeg bootstrap-classes toe aan je elementen

Slide 5 - Slide

Voeg de css van bootstrap toe aan je site

Slide 6 - Slide

Responsive website
Bootstrap is zo ontworpen dat mobile devices voorop staan, een strategie waarbij we eerst de site op mobile device niveau vormgeven en daarna vertalen naar grotere en wijdere schermen, met behulp van media queries. Om te zorgen voor een soepele werking en opbouw van de pagina voegen we viewport in de <head> als meta tag..
  

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Slide 9 - Slide

De responsive eigenschappen zijn gebaseerd op pixels breedte van je scherm

Slide 10 - Slide

Hoe pas je Bootstrap toe?

Slide 11 - Open question

Welke strategie gebruikt Bootstrap
A
Eigen CSS en JavaScript
B
Strak uiterlijk
C
Mobile first vormgeven
D
Webpage first vormgeven

Slide 12 - Quiz

De opdracht
  • Ga naar classroom: https://classroom.github.com/a/hNjYcne8 
  • Zorg dat je het project Bootstrap op jouw pc kunt openen (gebruik hiervoor git)
  • Voeg de starter template toe
  • Voeg de classes container-?? Toe en bekijk de pagina in je browser. Zie wat er gebeurt als je je browser groter of kleiner maakt.


  • Doe een git add . 
  • git commit –m "Bootstrap Opstart" 
  • git push

Slide 13 - Slide

Portfolio opdracht
  • Bekijk je portfolio en pas de  geleerd lesstof toe.

Slide 14 - Slide

Wat vond je van de les?
😒🙁😐🙂😃

Slide 15 - Poll

Zijn er nog vragen?

Slide 16 - Open question