Bootstrap tables en images

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Tables en images

Table

.table-striped

.table-bordered

.table-hover

.table-dark

.table-borderless

.thead-dark

.thead-light

Responsive table

Responsive maken van je tabel

kan ook weer met de klassen sd, md, lg, xl worden gedaan.

Door middel van welke klasse maak je deze tabel:

Images

.rounded

.rounded-circle

.img-thumbnail (border)

.mx-auto (margin:auto)

.d-block (display:block)

.float-right

.float-left

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 %

Hier is er niet ingezoomd

Hier is er wel ingezoomd

Sleep de juist afbeelding naar naar je juiste klasse

.rounded

.rounded-circle

.img-thumbnail

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
  

Opdracht Portfolio 

• Bekijk je portfolio en pas de geleerd lesstof toe.

Heb je de les begrepen?

😒🙁😐🙂😃

Zijn er nog vragen?