HTML Module 4 / Les 4.1 Bootstrap Introductie t.b.v. studenten applicatie en mediaontwikkeling MBO Rijnland Leiden

1. Bootstrap Introductie
HTML module 44.1 Bootstrap Introductie

2. HTML module 44.1 Bootstrap Introductie
Wat is bootstrap ?
Een modern front-end framework
voor het versnellen van website
development!

3. HTML module 44.1 Bootstrap Introductie
Wat is bootstrap ?
Bootstrap is een grid van 12 kolommen.
Bootstrap is gebaseerd op flex-box.

4. HTML module 44.1 Bootstrap Introductie
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……

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

6. HTML module 44.1 Bootstrap Introductie

7. HTML module 44.1 Bootstrap Introductie
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.

8. HTML module 44.1 Bootstrap Introductie
Basis Bestand Bootstrap

9. HTML module 44.1 Bootstrap Introductie
Bootstrap Device indeling

10. HTML module 44.1 Bootstrap Introductie
Containers!

11. HTML module 44.1 Bootstrap Introductie
Container, row en cols
Bootstrap werkt met containers, rijen
(row’s) en kolommen (cols)

12. HTML module 44.1 Bootstrap Introductie
Container, row en cols
class: col
Pakt een gedeelte van het scherm

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

14. HTML module 44.1 Bootstrap Introductie
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

15. HTML module 44.1 Bootstrap Introductie
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

16. HTML module 44.1 Bootstrap Introductie
Opdracht!
Maak een webpagina die zich aanpast aan het device.
Het onderwerp mag jezelf weten.
Lever het in bij opdracht 4.1