Bootstrap grid

Bootstrap 4.0
Grid
1 / 20
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

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

time-iconLesduur is: 10 min

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:
  1. De .container klasse biedt een responsieve container met een vaste breedte.
  2. 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