Bootstrap jumbotron en alert

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Jumbotron en Alert

Jumbotron

Jumbotron is een blikvanger.

Geeft extra aandacht voor speciale inhoud of informatie.

Tip: in een jumbotron kun je bijna elke geldige HTML plaatsen, inclusief andere Bootstrap-elementen / klassen

De bovenste afbeelding bevat de klasse .jumbotron en 

de onderste afbeelding bevat de klasse .jumbotron-fluid

Zo maak je een jumbotron

Dit is de uitkomst van de code

Alerts

Bied feedbackberichten voor gebruikersacties

Als je een alert wilt sluiten, voeg je een .alert-disabled klasse toe aan de alert container. 

Voeg vervolgens .close klasse en data-dismiss = "alert" toe aan een link of een knopelement  (als je hierop klikt, verdwijnt de alert)

.fade en .show: vervagen effect wanneer je de alert message sluit.

Dit ziet er dan zo uit

Alerts

.alert-link: maakt een link in een alert.

Wat kan je in een jumbotron zetten?

1. Bijna alle HTML elementen
2. Alleen CSS
3. Alleen tekst en afbeeldingen
4. Bijna alleen maar CSS

Met welke 2 klassen sluit je een alert?

1. .close en .alert
2. .alert en .alert-close
3. Je hebt maar 1 alert nodig
4. .alert-disabled en .close

Opdracht 

Jumbotron:

• Voeg een heading toe (H1). Zet hierin Bloemen
  
• Zoek een afbeelding van een bloem op via internet.
  
• Gebruik de afbeelding als achtergrond in de jumbotron.
  
• Maak gebruik van CSS : background-image:url(“”); en background-size: cover;
  

Alert:

• Voeg een alert toe na de jumbotron.
  

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

Opdracht portfolio

• Bekijk je portfolio en pas de lesstof toe.
• Vraag vier personen om de 360 graden feedback uit te voeren (zie lesmateriaal voor template: ROC Mondriaan- 360 graden feedback)
• Verwerk de feedback in een overzicht met jouw kwaliteiten op basis van de feedback.

Heb je de les begrepen?

😒🙁😐🙂😃

Zijn er nog vragen?