HTML Module 4 / Les 4.2 t.b.v. studenten MBO Rijnland Applicatie en Mediaontwikkeling Leiden

1. Bootstrap 2
HTML module 44.2 Bootstrap 2

2. HTML module 44.2 Bootstrap 2
Terugblik

3. HTML module 4
Wat is bootstrap ?
Bootstrap is een grid van 12 kolommen.
Bootstrap is gebaseerd op flex-box.
4.2 Bootstrap 2

4. HTML module 4
Voordelen van bootstrap!
• Responsive GRID met columns en rows
• Standaard HTML Componenten
• Buttons
• Navbar
• Cards
• Form inputs en buttons
• Carousel
• Dropdowns
• Pagination
• Tooltips en alerts
• en meer……
4.2 Bootstrap 2

5. HTML module 4
Voordelen van bootstrap!
• Geschikt voor alle browsers
• Makkelijk in gebruik
• Flexibel
• Komen steeds meer onderdelen bij!
• Grootte community van gebruikers
4.2 Bootstrap 2

6. HTML module 44.2 Bootstrap 2

7. HTML module 4
Om bootstrap te kunnen gebruik moet je onderstaande
bestanden koppelen of downloaden en koppelen.
De CSS moet in de head en de scriptjes onder aan de pagina.
4.2 Bootstrap 2

8. HTML module 4
Basis Bestand Bootstrap
4.2 Bootstrap 2

9. HTML module 4
Bootstrap Device indeling
4.2 Bootstrap 2

10. HTML module 4
Containers!
4.2 Bootstrap 2

11. HTML module 4
Container, row en cols
Bootstrap werkt met containers, rijen
(row’s) en kolommen (cols)
4.2 Bootstrap 2

12. HTML module 4
Container, row en cols
class: col
Pakt een gedeelte van het scherm
4.2 Bootstrap 2

13. HTML module 4
Om dit goed te begrijpen is het volgende belangrijk!
Als je col-sm gebruikt is dit voor alle devices
groter dan 576px enz…
4.2 Bootstrap 2

14. HTML module 4
De row is onderverdeeld in 4 kolommen 12/4=3 voor
devices groter of gelijk aan 576px. (col-sm).
Plaatje 1 heeft een breedte van 576px.
Plaatje 2 heeft een breedte van 575px deze is
dus niet onderverdeeld in col’s
1 2
4.2 Bootstrap 2

15. HTML module 4
Hij is nu iets meer responsive gemaakt!
Bij schermen t/m 767.9px worden er 2 kolommen gemaakt
col-sm-6 en bij schermen groter dan 768px 4 kolommen
col-md-3. Op deze manier is het heel eenvoudig
een webpagina responsive te maken.
Je kan n.l. ook gebruik maken van col-lg en col-xl.
1 2
4.2 Bootstrap 2

16. HTML module 44.2 Bootstrap 2
Nieuwe Stof

17. HTML module 44.2 Bootstrap 2
The making of vindennn

18. HTML module 44.2 Bootstrap 2
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.

19. HTML module 44.2 Bootstrap 2
Stap 1 “de mappenstructuur”
We gebruiken als start
een index.html en style.css

20. HTML module 44.2 Bootstrap 2
Stap 2 “ De basispagina ‘index.html’ ”

21. HTML module 44.2 Bootstrap 2
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

22. HTML module 44.2 Bootstrap 2 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.

23. HTML module 44.2 Bootstrap 2 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.

24. HTML module 44.2 Bootstrap 2
Stap 5 “Het middengedeelte”

25. HTML module 44.2 Bootstrap 2
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.

26. HTML module 44.2 Bootstrap 2
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.

27. HTML module 4
Opdracht!
Volgende les gaan we verder met de ‘vindennn’ site.
De opdracht is maak de pagina na met 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.2.
4.2 Bootstrap 2