Bootstrap 5 introductie

Bootstrap 5

CSS Framework

1 / 16

Slide 1: Tekstslide

ICTMBOStudiejaar 1

In deze les zitten 16 slides, met interactieve quizzen en tekstslides.

Lesduur is: 10 min

Onderdelen in deze les

Bootstrap 5

CSS Framework

Slide 1 - Tekstslide

Leerdoelen

implementeren van Bootstrap in een nieuw project.
toepassen van Bootstrap in een nieuw project.

Slide 2 - Tekstslide

Dit weten we van Bootstrap

Best practice
Snel toe te passen
Trendvolgend
Responsive
Mobile first

Slide 3 - Tekstslide

Bootstrap basis uiterlijk

Slide 4 - Tekstslide

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

Klik hier voor de link naar de Bootstrap CSS

Voeg de css van bootstrap toe aan je site

Slide 6 - Tekstslide

Klik hier voor de link naar de Bootstrap JavaScript

Slide 7 - Tekstslide

Klik hier om het starterssjabloon te downloaden

Slide 8 - Tekstslide

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

Slide 9 - Tekstslide

De responsive eigenschappen zijn gebaseerd op de pixelbreedte van je scherm

Slide 10 - Tekstslide

Hoe pas je Bootstrap toe?

Slide 11 - Open vraag

Welke strategie gebruikt Bootstrap

Eigen CSS en JavaScript

Strak uiterlijk

Mobile first vormgeven

Webpage first vormgeven

Slide 12 - Quizvraag

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

Portfolio opdracht

Bekijk je portfolio en pas de geleerd lesstof toe.

Slide 14 - Tekstslide

Wat vond je van de les?

😒🙁😐🙂😃

Slide 15 - Poll

Zijn er nog vragen?

Slide 16 - Open vraag

Bootstrap 5 introductie

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Open vraag

Slide 12 - Quizvraag

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Poll

Slide 16 - Open vraag

Meer lessen zoals deze

Bootstrap opstart

HTML en CSS les 6 - Responsive Design

html/css - Responsive Design

HTML en CSS les 8 - laatste tips voor PO

HTML en CSS les 7 - Sticky navbar

Bootstrap tables en images

Bootstrap nav en navbar

Bootstrap jumbotron en alert