Bootstrap listgroup

Bootstrap 4.0

List groups

1 / 18

Slide 1: Diapositive

ICTMBOStudiejaar 1

Cette leçon contient 18 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 15 min

Éléments de cette leçon

Bootstrap 4.0

List groups

Slide 1 - Diapositive

HTML Lists

Slide 2 - Diapositive

List group

Slide 3 - Diapositive

List group met een active item

Slide 4 - Diapositive

List group met een disabled item

Slide 5 - Diapositive

Horizontale list groups

Slide 6 - Diapositive

Verschillende kleuren

Slide 7 - Diapositive

Hoe zorg je ervoor dat een list group horizontaal wordt weergeven?

timer

1:00

Slide 8 - Question ouverte

List group met badges

Slide 9 - Diapositive

Font Awesome

Basis icons

Zet de onderstaande link in je <head> om fontawesome te kunnen gebruiken

Je hoeft niets te downloaden of te installeren.

Slide 10 - Diapositive

Font Awesome Voorbeeld

Slide 11 - Diapositive

List Group with Linked Items

Slide 12 - Diapositive

Wat is font awesome?

Geweldige lettertypes

Icons die je met een tag kan gebruiken in je HTML

Icons die je moet downloaden voor je website

Geweldige icons

Slide 13 - Quiz

Hoe heet het blauwe gedeelte waar een getal in staat?

timer

1:00

Slide 14 - Question ouverte

Opdrachten

Maak een list group met 10 items, zorg dat ze om en om een andere kleur hebben
Maak een list group met 5 items, zorg dat naast de naam en de prijs (een echt euro teken gebruiken) het plaatje van het item getoond wordt

Doe een git add .
git commit –m "Bootstrap Listgroup"
git push

Slide 15 - Diapositive

Opdracht portfolio

Bekijk je portfolio en pas de lesstof toe.

Slide 16 - Diapositive

Heb je de les begrepen?

😒🙁😐🙂😃

Slide 17 - Sondage

Zijn er nog vragen?

Slide 18 - Question ouverte

Bootstrap listgroup

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Diapositive

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Question ouverte

Slide 9 - Diapositive

Slide 10 - Diapositive

Slide 11 - Diapositive

Slide 12 - Diapositive

Slide 13 - Quiz

Slide 14 - Question ouverte

Slide 15 - Diapositive

Slide 16 - Diapositive

Slide 17 - Sondage

Slide 18 - Question ouverte

Plus de leçons comme celle-ci

Bootstrap carousel, pagination en breadcrumb

Bootstrap jumbotron en alert

Bootstrap 5 introductie

Bootstrap opstart

Bootstrap nav en navbar

Bootstrap cards

Bootstrap tables en images

Bootstrap Herhaling