Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
Bootstrap grid
Bootstrap 4.0
Grid
1 / 20
volgende
Slide 1:
Tekstslide
ICT
MBO
Studiejaar 1
In deze les zitten
20 slides
, met
interactieve quizzen
en
tekstslides
.
Lesduur is:
10 min
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Bootstrap 4.0
Grid
Slide 1 - Tekstslide
<div class=“container”>
<div class=“container-fluid”>
Een terugblik op de vorige les
Slide 2 - Tekstslide
Containers
In de vorige les hebben we geleerd dat een container element noodzakelijk is om de inhoud van de site te verpakken.
Containers worden gebruikt om de inhoud erin op te vullen en er zijn twee containerklassen beschikbaar:
De
.container
klasse biedt een responsieve container met een
vaste breedte.
De
.container-fluid
klasse biedt een container over de volledige breedte, die de volledige breedte van de viewport inneemt.
Slide 3 - Tekstslide
Het verschil tussen .container klasse en
.container-fluid klasse
Slide 4 - Tekstslide
Fixed container
Gebruik de .container klasse om een responsive container met een vaste breedte te maken.
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
max-width
100%
540px
720px
960px
1140px
Slide 5 - Tekstslide
Welke container strekt zich uit over de hele breedte van de website?
A
container
B
container-fluid
C
containter-xl
D
container-lg
Slide 6 - Quizvraag
Indeling website met grid
Indeling van een website met Bootstrap Grid
Zo ziet grid er uit op de website
Slide 7 - Tekstslide
Hoe werkt het gridsysteem?
Drie belangrijke onderdelen: containers, rijen en kolommen
Containers:
<class=“container”>
of
<class=“container-fluid”>
Rijen:
<div class=“row”>
moeten in containers geplaatst worden
Kolommen
<div class=“col”>
moeten geplaatst worden in een rij
Inhoud moet geplaats worden in kolommen.
Alleen zo werkt het grid systeem!!!
Slide 8 - Tekstslide
In welke volgorde zet je het grid systeem in elkaar
<div class="row">
<div class="container">
<div class="col">
Slide 9 - Sleepvraag
Bootstrap grid syteem
Het grid systeem van Bootstrap staat maximaal 12 kolommen over de pagina toe.
Als je niet alle 12 kolommen afzonderlijk wilt gebruiken, kan je de kolommen groeperen om bredere kolommen te maken.
Slide 10 - Tekstslide
Zo ziet Bootstrap grid eruit
Slide 11 - Tekstslide
Grid klassen
Het Bootstrap-rastersysteem heeft vier klassen:
xs (voor telefoons en schermen met een breedte van minder dan 768px)
sm (voor tablets en schermen gelijk aan of groter dan 768px breed)
md (voor kleine laptops en schermen gelijk aan of groter dan 992px breed)
lg (voor laptops en desktops en schermen gelijk aan of groter dan 1200px breed)
De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.
Tip:
elke klasse wordt opgeschaald, dus als je dezelfde breedte voor xs en sm wilt instellen, hoeft u alleen de xs klasse op te geven.
Slide 12 - Tekstslide
Responsive kolommen
Het volgende voorbeeld laat zien hoe je vier kolommen van gelijke breedte kunt krijgen, beginnend bij tablets en schaalbaar naar grote desktops.
Slide 13 - Tekstslide
Op mobiele telefoons of schermen die minder dan 576px breed zijn, worden de kolommen automatisch gestapeld.
Slide 14 - Tekstslide
Uit hoeveel kolommen bestaat bootstrap?
Slide 15 - Open vraag
Hoeveel verschillende klassen heeft het Bootstrap-rastersysteem?
A
6
B
3
C
2
D
4
Slide 16 - Quizvraag
Opdrachten
Maak de website ‘bloembinderij’
Zorg ervoor dat bij kleine schermen (xs) de bloemen onder elkaar komen te staan
Toon in het totaal 6 bloemen,
Bij grootte schermen(lg)-> zet alle bloemen naast elkaar
Bij medium schermen (md)-> zet 3 bloemen naast elkaar
Bij kleine schermen(sm)-> zet de 6 bloemen onder elkaar
Doe een git add .
git commit –m "Bootstrap Grid"
git push
Slide 17 - Tekstslide
Portfolio opdracht
Bekijk je portfolio en pas de geleerd lesstof toe.
Slide 18 - Tekstslide
Heb je de les begrepen?
😒
🙁
😐
🙂
😃
Slide 19 - Poll
Zijn er nog vragen?
Slide 20 - Open vraag
Meer lessen zoals deze
WEEK 8 - INFORMATICA
Juni 2024
- Les met
14 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 2 - INFORMATICA
Juni 2024
- Les met
14 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 2 - INFORMATICA
November 2023
- Les met
14 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 3 - INFORMATICA
November 2023
- Les met
27 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 4 - INFORMATICA
November 2023
- Les met
34 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 5 - INFORMATICA
November 2023
- Les met
32 slides
Informatica
Middelbare school
havo
Leerjaar 4
WEEK 1 - INFORMATICA
November 2023
- Les met
32 slides
Informatica
Middelbare school
havo
Leerjaar 4
Bootstrap nav en navbar
Januari 2021
- Les met
11 slides
ICT
MBO
Studiejaar 1