‹Revenir à la recherche

Bootstrap opstart

Bootstrap 4
CSS Framework
1 / 16
suivant
Slide 1: Diapositive
ICTMBOStudiejaar 1

Cette leçon contient 16 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 10 min

Éléments de cette leçon

Bootstrap 4
CSS Framework

Slide 1 - Diapositive

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

Slide 2 - Diapositive

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

Slide 3 - Diapositive

Bootstrap basis uiterlijk

Slide 4 - Diapositive

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 - Diapositive

Klik hier voor de link naar de Bootstrap CSS
Voeg de css van bootstrap toe aan je site

Slide 6 - Diapositive

Klik hier voor de link naar de Bootstrap JavaScript

Slide 7 - Diapositive

Klik hier om het starters template te downloaden

Slide 8 - Diapositive

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 - Diapositive

De responsive eigenschappen zijn gebaseerd op pixels breedte van je scherm

Slide 10 - Diapositive

Hoe pas je Bootstrap toe?

Slide 11 - Question ouverte

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 - Diapositive

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

Slide 14 - Diapositive

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

Slide 15 - Sondage

Zijn er nog vragen?

Slide 16 - Question ouverte

Plus de leçons comme celle-ci

Bootstrap 5 introductie

- Leçon avec 16 diapositives
ICTMBOStudiejaar 1

HTML en CSS les 8 - laatste tips voor PO

- Leçon avec 11 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML en CSS les 6 - Responsive Design

- Leçon avec 24 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

html/css - Responsive Design

- Leçon avec 16 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML en CSS les 7 - Sticky navbar

- Leçon avec 11 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

Bootstrap tables en images

- Leçon avec 12 diapositives
ICTMBOStudiejaar 1

Bootstrap nav en navbar

- Leçon avec 11 diapositives
ICTMBOStudiejaar 1

Bootstrap jumbotron en alert

- Leçon avec 13 diapositives
ICTMBOStudiejaar 1