Bootstrap Intro t.b.v. 1e jaars student ICT academie Leiden

1. HTML module 3
3.2 Bootstrap 3
Introductie

2. 3.2 Bootstrap Introductie HTML module 3
Wat is Bootstrap?
• Een responsive design framework
• Voor het bouwen van statische websites
• Voor het bouwen van dynamische webapplicaties
• Mobile-first approach
• (Responsive)Grid systeem
• Meest gebruikte framework in de wereld
• Meeste downloads op git-hub.
• Beste beoordeling op git-hub

3. 3.2 Bootstrap Introductie HTML module 3

4. 3.2 Bootstrap Introductie HTML module 3
Meer regels code nodig dan wanneer je het
zelf maakt. Doordat het met veel zaken rekening
moet houden.

5. HTML module 3
Bootstrap 3
Gereedmaken voor gebruik!
3.2 Bootstrap Introductie

6. 3.2 Bootstrap Introductie HTML module 3
Bootstrap download!

7. 3.2 Bootstrap Introductie HTML module 3
3 mappen t.b.v. bootstrap

8. 3.2 Bootstrap Introductie HTML module 3
Bootstrap koppelen aan je webpagina!
1. De viewport plaatsen
2. Bootstrap.min.css koppelen

9. 3.2 Bootstrap Introductie HTML module 3
Jquery en andere javascript koppelen!
Koppeling jaar jquery
Koppeling jaar bootstrap.min.js
Respond.min.js moet je zelf
downloaden zie volgende pagina!

10. 3.2 Bootstrap Introductie HTML module 3

11. Niet helemaal duidelijk?
Kijk filmpje op lynda.com
HTML module 33.2 Bootstrap Introductie

12. Opdracht !
Maak een standaard html bestand
om gebruik te kunnen maken van
Bootstrap.
HTML module 33.2 Bootstrap Introductie

13. HTML module 3
Bootstrap 3
Grid system
3.2 Bootstrap Introductie

14. 3.2 Bootstrap Introductie HTML module 3
12 Columns

15. 3.2 Bootstrap Introductie HTML module 3

16. 3.2 Bootstrap Introductie HTML module 3

17. 3.2 Bootstrap Introductie HTML module 3
Voorbeeld

18. 3.2 Bootstrap Introductie HTML module 3
Zorgt voor plaatsen in het midden vanuit bootstrap.css.
En whitespace
Bij large screen plaatje 1 breedte van
6 columns en smal screen breedte van 5 cols

19. 3.2 Bootstrap Introductie HTML module 3
Large screen Medium screen
Iedere rij begint altijd met
de class ROW

20. 3.2 Bootstrap Introductie HTML module 3
Opdracht
Maak het voorbeeld zoals afgebeeld na m.b.v. bootstrap.
Gebruik de lesstof om dit te bereiken.
De blikjes en de teksten kunnen je ophalen op de site
van red bull.
Het logo kan je googelen.
Plaats het geheel op je eigen webomgeving en upload
De link naar Natschool.

21. 3.2 Bootstrap Introductie HTML module 3

22. 3.2 Bootstrap Introductie HTML module 3