HTML Module 4 Les 4.3 Bootstrap t.b.v. studenten MBO Rijnland Leiden Applicatie en Mediaontwikkeling

1. Bootstrap 3
HTML module 44.3 Bootstrap 3

2. HTML module 44.3 Bootstrap 3
Terugblik

3. HTML module 44.3 Bootstrap 3
The making of vindennn

4. HTML module 44.3 Bootstrap 3
Tijdens deze en volgende lessen creëren we
d.m.v. bootstrap de fictieve site ”Vindennn”
Zo doorlopen we de mogelijkheden van bootstrap.
Deze les starten met de frontpage zoals hierboven afgebeeld.

5. HTML module 44.3 Bootstrap 3
Stap 1 “de mappenstructuur”
We gebruiken als start
een index.html en style.css

6. HTML module 44.3 Bootstrap 3
Stap 2 “ De basispagina ‘index.html’ ”

7. HTML module 44.3 Bootstrap 3
Stap 3 “Container t.b.v. boostrap”
Class Container is de start t.b.v. bootstrap.
mt-3 is bootstrap de m staat voor margin
en de t voor top. Meer informatie klik op
link op de site voor bootstrap Spacing

8. HTML module 44.3 Bootstrap 3 Stap 4 “De header”
De header krijgt de class row zoals noodzakelijk voor bootstrap.
Binnen de row vind je een article t.b.v. het logo die geplaatst is in een col-md-2.
Naast een article is het 2e gedeelte van deze row een nav van col-md-10 dit
maakt 12 bij elkaar.
pt-3 = padding top zie link op website naar spaces
D-flex en justify content heeft met flex-box te maken
hier staat ook een link op html website.

9. HTML module 44.3 Bootstrap 3 Stap 4 “De header”
In het nav gedeelte wordt gebruik gemaakt van de class nav-link t.b.v.
bootstrap. Op de html site staat een link naar alles over nav in
bootstrap.

10. HTML module 44.3 Bootstrap 3
Stap 5 “Het middengedeelte”

11. HTML module 44.3 Bootstrap 3
Stap 5 “Het middengedeelte”
We starten weer met een class row en verdelen deze in 2 kolommen van 6.
d.m.v. col-md-6. Daarnaast gebruiken we voor de img de class img-fluid vanuit
bootstrap die er voor zorgt dat het plaatje precies de ruimte van de kolom gebruikt.
Daarnaast maken we gebruik van een button vanuit bootstrap.

12. HTML module 44.3 Bootstrap 3
Stap 5 “Het middengedeelte”
Op de html site staan de verwijzingen
naar de bootstrap m.b.t. buttons etc.
Ik heb wel wat extra style aangebracht
zoals shadow een border-radius dit
is dus geen bootstrap.
Op de html-site plaats ik instructiefilmpjes
hoe ik dit gemaakt hebt met uitleg.

13. HTML module 44.3 Bootstrap 3
Nieuwe Stof

14. HTML module 44.3 Bootstrap 3
Het vervolg een banner d.m.v. een bootstrap jumbotron

15. HTML module 44.3 Bootstrap 3
Bootstrap ’Jumbotron’

16. HTML module 44.3 Bootstrap 3
Bootstrap ’Jumbotron’

17. HTML module 44.3 Bootstrap 3
Bootstrap ’Jumbotron’

18. HTML module 44.3 Bootstrap 3
Bootstrap ‘modal’

19. HTML module 44.3 Bootstrap 3
Bootstrap ‘form’

20. HTML module 44.3 Bootstrap 3
Bootstrap ‘Modal en form in vindennn.nl’

21. HTML module 44.3 Bootstrap 3
Het vervolg overzicht categorieën d.m.v. bootstrap cards

22. HTML module 44.3 Bootstrap 3
Bootstrap ’Cards’

23. HTML module 4
Opdracht!
Volgende les gaan we verder met de ‘vindennn’ site.
De opdracht is breidt de website uit met jumbotron, modal,
form en cards. Zorg dat het eruit ziet als het voorbeeld.
Gebruik de code die ik in deze les hebt gebruikt. Zorg dat het af
is voor het begin van de volgende les zodat je weet waar
we het over hebben.
Upload het geheel in teams in html_module_4 opdracht 4.3.
4.3 Bootstrap 3