Bootstrap listgroup

Bootstrap 4.0

List groups

1 / 18

Slide 1: Tekstslide

ICTMBOStudiejaar 1

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

Lesduur is: 15 min

Onderdelen in deze les

Bootstrap 4.0

List groups

Slide 1 - Tekstslide

HTML Lists

Slide 2 - Tekstslide

List group

Slide 3 - Tekstslide

List group met een active item

Slide 4 - Tekstslide

List group met een disabled item

Slide 5 - Tekstslide

Horizontale list groups

Slide 6 - Tekstslide

Verschillende kleuren

Slide 7 - Tekstslide

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

timer

1:00

Slide 8 - Open vraag

List group met badges

Slide 9 - Tekstslide

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 - Tekstslide

Font Awesome Voorbeeld

Slide 11 - Tekstslide

List Group with Linked Items

Slide 12 - Tekstslide

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 - Quizvraag

Hoe heet het blauwe gedeelte waar een getal in staat?

timer

1:00

Slide 14 - Open vraag

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 - Tekstslide

Opdracht portfolio

Bekijk je portfolio en pas de lesstof toe.

Slide 16 - Tekstslide

Heb je de les begrepen?

😒🙁😐🙂😃

Slide 17 - Poll

Zijn er nog vragen?

Slide 18 - Open vraag

Bootstrap listgroup

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Open vraag

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Quizvraag

Slide 14 - Open vraag

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Poll

Slide 18 - Open vraag

Meer lessen zoals deze

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 grid