Bootstrap tables en images

Bootstrap 4.0
Tables en images
1 / 12
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

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

time-iconLesduur is: 15 min

Onderdelen in deze les

Bootstrap 4.0
Tables en images

Slide 1 - Tekstslide

Table
.table-striped
.table-bordered
.table-hover
.table-dark
.table-borderless
.thead-dark
.thead-light

Slide 2 - Tekstslide

Responsive table
Responsive maken van je tabel
kan ook weer met de klassen sd, md, lg, xl worden gedaan.

Slide 3 - Tekstslide

Door middel van welke klasse maak je deze tabel:

Slide 4 - Open vraag

Images
.rounded
.rounded-circle
.img-thumbnail (border)
.mx-auto (margin:auto)
.d-block (display:block)
.float-right
.float-left


Slide 5 - Tekstslide

Image fluid
img-fluid zorgt ervoor dat de image goed schaalt in de parent element (het element waar de image in zit)
Eigenlijk geeft het aan de image: max-width: 100%; en height: auto; Schalen van de image wanneer de browser grootte veranderd: Gebruik %



Slide 6 - Tekstslide

Hier is er niet ingezoomd
Hier is er wel ingezoomd

Slide 7 - Tekstslide

Sleep de juist afbeelding naar naar je juiste klasse
.rounded
.rounded-circle
.img-thumbnail

Slide 8 - Sleepvraag

Opdracht 
Table:
  • Voeg een table toe.
  • Zet in de table header: Naam, Beschrijving, Prijs
  • Zet in de table body: een aantal bloem namen, de beschrijving en de prijs hiervan
  • Update de opmaak van de table met de classes uit de les.
Image:
  • Update de opmaak van de bloem afbeeldingen met de classes.
  • Zorg dat de bloem afbeeldingen groter of kleiner worden wanneer de browser grootte veranderd

  • Doe een git add . 
  • git commit –m “Bootstrap Table Image" 
  • git push

Slide 9 - Tekstslide

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

Slide 10 - Tekstslide

Heb je de les begrepen?
😒🙁😐🙂😃

Slide 11 - Poll

Zijn er nog vragen?

Slide 12 - Open vraag