Bootstrap cards

Bootstrap 4.0
Cards
1 / 21
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

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

time-iconLesduur is: 15 min

Onderdelen in deze les

Bootstrap 4.0
Cards

Slide 1 - Tekstslide

Vorige les
Tables
Image
Jumbotron
Alerts

Slide 2 - Tekstslide

Bootstrap

Slide 3 - Woordweb

Cards
Bordered box
Opties zoals header, footer, content, kleuren enzovoort
Een goede indeling van cards in een pagina om meer inhoud tegelijk te presenteren.

Slide 4 - Tekstslide

Zo maak je een basic card

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Achtergrondkleuren

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Slide 7 - Tekstslide

Welke klasse hoort hier niet bij?
A
card-header
B
card-main
C
card-body
D
card-footer

Slide 8 - Quizvraag

Images passend in card
Met card-img-top of card-img-bottom kun je afbeeldingen passend maken binnen de card.



Slide 9 - Tekstslide

Stretched link
Als je wilt dat het hele kaartje een link vormt gebruik je de class stretched-link.

Slide 10 - Tekstslide

Card-img-overlay
Deze class gebruik je als je de afbeelding achter de tekst wilt laten zien.

Slide 11 - Tekstslide

Class card-deck maakt de cards even groot

Slide 12 - Tekstslide

Class card-group maakt de cards even groot en verwijdert de margins tussen de cards

Slide 13 - Tekstslide

Wat doet de volgende klasse: stretched-link
timer
1:00

Slide 14 - Open vraag

Wanneer gebruik je card-img-overlay?
A
Als je de afbeelding op ware grote wilt laten zien.
B
Als je de tekst onder de afbeelding wilt laten zien.
C
Als je de afbeelding achter de tekst wilt laten zien.
D
Als je de afbeelding voor te tekst wilt laten zien.

Slide 15 - Quizvraag

De klasse ..... maakt de cards even groot en verwijdert de margins tussen de cards
A
group
B
card-group
C
card
D
group-card

Slide 16 - Quizvraag

Wat doet de card-deck klasse?
timer
1:00

Slide 17 - Open vraag

Opdrachten
In het lesmateriaal kan je een oefenpagina vinden voor de cards, voeg deze toe aan het project in de Bootstrap repository.
  • Voeg vier cards toe aan de oefenpagina en probeer de kleuren uit op de cards. 
  • Geef de cards een breedte van 250px, margin en padding van 10px.
  • Maak in de vier cards een h4-element met class "card-title"
  • Geef elke h4 in de card een naam met: Artikel 1, Artikel 2, Artikel 3, Artikel 4
  • Maak eventueel de tekst wit met class text-white
  • Voeg een link toe met class card-link en geef de omschrijving “Lees meer…”
  • Voeg aan één van de cards de stretched-link toe
    met de class = “btn btn-primary stretched-link” 
  • Pas de class "card-img-overlay" toe bij een van de vier cards. Je voegt een div toe met deze class met daarin alles wat op de afbeelding moet komen.

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

Slide 18 - Tekstslide

Opdracht portfolio
  • Voeg cards toe aan een aantal elementen uit de portfolio, zoals projecten, of producten. 
  • Zet de cards netjes naast elkaar en voeg aan elke card een passende afbeelding toe.
  • Laat de cards doorlinken naar een detailpagina van je projecten.

Slide 19 - Tekstslide

Heb je de les begrepen?
😒🙁😐🙂😃

Slide 20 - Poll

Heb je nog vragen?

Slide 21 - Open vraag