Bootstrap 5 introductie

Bootstrap 5

CSS Framework

1 / 16

Slide 1: Slide

ICTMBOStudiejaar 1

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

Lesson duration is: 10 min

Items in this lesson

Bootstrap 5

CSS Framework

Slide 1 - Slide

Leerdoelen

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

Slide 2 - Slide

Dit weten we van Bootstrap

Best practice
Snel toe te passen
Trendvolgend
Responsive
Mobile first

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

Klik hier voor de link naar de Bootstrap CSS

Voeg de css van bootstrap toe aan je site

Slide 6 - Slide

Klik hier voor de link naar de Bootstrap JavaScript

Slide 7 - Slide

Klik hier om het starterssjabloon te downloaden

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

Slide 9 - Slide

De responsive eigenschappen zijn gebaseerd op de pixelbreedte van je scherm

Slide 10 - Slide

Hoe pas je Bootstrap toe?

Slide 11 - Open question

Welke strategie gebruikt Bootstrap

Eigen CSS en JavaScript

Strak uiterlijk

Mobile first vormgeven

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

Bootstrap 5 introductie

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Open question

Slide 12 - Quiz

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Poll

Slide 16 - Open question

More lessons like this

Bootstrap opstart

HTML en CSS les 8 - laatste tips voor PO

HTML en CSS les 6 - Responsive Design

html/css - Responsive Design

HTML en CSS les 7 - Sticky navbar

Bootstrap tables en images

Bootstrap nav en navbar

Bootstrap jumbotron en alert