Bootstrap cards

Bootstrap 4.0
Cards
1 / 21
suivant
Slide 1: Diapositive
ICTMBOStudiejaar 1

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

time-iconLa durée de la leçon est: 15 min

Éléments de cette leçon

Bootstrap 4.0
Cards

Slide 1 - Diapositive

Vorige les
Tables
Image
Jumbotron
Alerts

Slide 2 - Diapositive

Bootstrap

Slide 3 - Carte mentale

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

Zo maak je een basic card

Slide 5 - Diapositive

Slide 6 - Diapositive

Achtergrondkleuren

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

Slide 7 - Diapositive

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

Slide 8 - Quiz

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



Slide 9 - Diapositive

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

Slide 10 - Diapositive

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

Slide 11 - Diapositive

Class card-deck maakt de cards even groot

Slide 12 - Diapositive

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

Slide 13 - Diapositive

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

Slide 14 - Question ouverte

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

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

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

Slide 17 - Question ouverte

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

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

Heb je de les begrepen?
😒🙁😐🙂😃

Slide 20 - Sondage

Heb je nog vragen?

Slide 21 - Question ouverte