1. Javascript module 4
HTML-CSS-JS
4.1 Bootstrap Intro
Module 4 html/css /JS

2. Wat is Bootstrap ?
Module 4
4.1 Bootstrap Intro
• Reponsive design Framework
• Te gebruiken voor statische websites
• Te gebruiken voor dynamisch web applicatie
• Populair bij back-end en front-end developers
• Te combineren met cms en php etc…
• Eenvoudig te gebruiken

3. Voorbeelden ?
Module 4
4.1 Bootstrap Intro
Buildwithbootstrap.com
Lovebootstrap.com

4. Bootstrap download !
Module 4
4.1 Bootstrap Intro

5. Bootstrap download !
Module 4
4.1 Bootstrap Intro
• Bootstrap downloaden
• Informatie over bootstrap
• Customize informatie
• Bootstrap documentatie
Wat vind je op de site?

6. Bootstrap downloaden !
Module 4
4.1 Bootstrap Intro
Klik

7. Module 4
4.1 Bootstrap Intro
Bootstrap downloaden !
Kies voor de minified versie
En klik op download

8. Module 4
4.1 Bootstrap Intro
Bootstrap downloaden !
Pak het geheel uit en plaatst het in een
map 4.1 Bootstrap Info

9. Module 4
4.1 Bootstrap Intro
css Grid options!

10. Module 4
4.1 Bootstrap Intro
index.html maken!
Koppelingen naar bootstrap bestanden

11. Module 4
4.1 Bootstrap Intro
1e stappen bovenkant website met bootstrap.
2 kolommen voor
Schermen groter
of gelijk aan
1200px

12. Module 4
4.1 Bootstrap Intro
2e class toevoegen voor andere device
col-lg-
Col-sm-

13. Module 4
4.1 Bootstrap Intro
3e class toevoegen voor mobile device
col-lg-
Col-sm-
Col-xs-

14. Module 4
4.1 Bootstrap Intro
Opdracht
We gaan tijdens deze module een zakelijke website bouwen
met behulp van Bootstrap.
De website is voor jezelf en te gebruiken als portfolio.
De volgende zaken moeten opgeleverd worden:
• Logo
• Slogan
• Webpagina met logo en slogan d.m.v. bootstrap geschikt
voor meerdere devices (2 kollomen)