Bootstrap carousel, pagination en breadcrumb

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Carousel, pagination en breadcrumb

Bootstrap

Carousel

• Carousel is een slideshow dat door elementen circelt.

.carousel maakt een carousel

.carousel-indicators voegt de kleine puntjes onderaan elke dia toe.

.carousel-inner voegt een slide toe aan de carousel

.carousel-item de inhoud van de slide

.carousel-control-prev voegt een linker (vorige) knop toe

.carousel-control-next voegt een rechter (volgende) knop toe

.carousel-control-prev-icon samen met carousel-control-prev, zorgt voor een icon links

.carousel-control-next-icon samen met carousel-control-prev, zorgt voor een icon rechts

.slide geeft het “glij” effect

.carousel-caption tekst onderaan de carousel (onderschrift)

Pagination

• Pagination: een reeks gerelateerde inhoud dat op meerdere pagina’s te zien is.
  

.pagination aangeven van pagination

.page-item inhoud van een pagina

.page-link aangeven van een link element in de page-item

.disabled /.active pagination uitschakelen / activeren

.pagination-lg / .pagination-sm pagination knoppen zijn groot / klein

.justify-content-center / .justify-content-end pagination in het midden / aan het eind (rechts)

Basis pagination

Breadcrumb

• Geeft de locatie van de huidige pagina binnen de navigatiehiërarchie aan.
  

.breadcrumb aangeven van de breadcrumb

.breadcrumb-item inhoud van de breadcrumb

.active het breadcrumb item dat momenteel actief is (locatie waar je je op de website bevindt)

Basis breadcrumb

Opdracht 

Carousel:

• Zoek 3 afbeeldingen van een landschap vol bloemen.
  
• Zet op de home pagina de Carousel met de 3 afbeeldingen.
  

Pagination:

• Voeg minimaal 2 page-items toe.
  
• Bij page-link 1 ga je naar de home-pagina
  
• Bij page-link 2 ga je naar de contact pagina (als je deze nog niet hebt, maak je ook een contactpagina)
  

Breadcrumb:

• Voeg voor alle pagina’s de breadcrumb toe.

• Doe een git add . 
  
• git commit –m “Bootstrap project Bloemen af" 
  
• git push
  

Opdracht portfolio

Je hebt nu alle belangrijke elementen van Bootstrap gehad.

Er zijn nog veel meer elementen. (deze kun je bekijken op de website w3schools of getbootstrap (let op: we maken gebruik van Bootstrap versie 4)

Hoe te werk gaan voor portfolio:

Schrijf voor jezelf op welke onderdelen van Bootstrap je zou willen gebruiken of al hebt gebruikt in je portfolio. (welke elementen vind jij mooi/handig/fijn/overzichtelijk)

Hoe zou je dit onderdeel willen gebruiken? (bijv. Card gebruiken op je projecten pagina om kort een project te tonen en toe te lichten.)

Maak opnieuw een Wireframe / Mockup voor alle pagina’s die je gaat maken. (Home, Over mij, Vaardigheden/Kennis, Projecten, Contact)

Voeg nu de Bootstrap elementen toe aan je portfolio

Heb je de les begrepen?

😒🙁😐🙂😃

Zijn er nog vragen?