SlideShare a Scribd company logo
Javascript module 4
HTML-CSS-JS
4.1 Bootstrap Intro
Module 4 html/css /JS
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
Voorbeelden ?
Module 4
4.1 Bootstrap Intro
Buildwithbootstrap.com
Lovebootstrap.com
Bootstrap download !
Module 4
4.1 Bootstrap Intro
Bootstrap download !
Module 4
4.1 Bootstrap Intro
• Bootstrap downloaden
• Informatie over bootstrap
• Customize informatie
• Bootstrap documentatie
Wat vind je op de site?
Bootstrap downloaden !
Module 4
4.1 Bootstrap Intro
Klik
Module 4
4.1 Bootstrap Intro
Bootstrap downloaden !
Kies voor de minified versie
En klik op download
Module 4
4.1 Bootstrap Intro
Bootstrap downloaden !
Pak het geheel uit en plaatst het in een
map 4.1 Bootstrap Info
Module 4
4.1 Bootstrap Intro
css Grid options!
Module 4
4.1 Bootstrap Intro
index.html maken!
Koppelingen naar bootstrap bestanden
Module 4
4.1 Bootstrap Intro
1e stappen bovenkant website met bootstrap.
2 kolommen voor
Schermen groter
of gelijk aan
1200px
Module 4
4.1 Bootstrap Intro
2e class toevoegen voor andere device
col-lg-
Col-sm-
Module 4
4.1 Bootstrap Intro
3e class toevoegen voor mobile device
col-lg-
Col-sm-
Col-xs-
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)

More Related Content

PPTX
Presentatie nieuwsbrieven joomladagen
PPTX
Eduvision - Wordpress Webinar
PDF
Presentatie ark extensions inline edit and mediamanagment
PPTX
Joomladagen 2016: Top 10 joomla SEO bloopers
PPTX
Eduvision - Webinar Joomla
PDF
Complexe pagina's gebruiksvriendelijk (Joomla Page Builders)
PDF
Daarom Joomla! - Inspiratie uit de praktijk
PPTX
Joomla backend-beheer vereenvoudigen - Joomladagen 2016
Presentatie nieuwsbrieven joomladagen
Eduvision - Wordpress Webinar
Presentatie ark extensions inline edit and mediamanagment
Joomladagen 2016: Top 10 joomla SEO bloopers
Eduvision - Webinar Joomla
Complexe pagina's gebruiksvriendelijk (Joomla Page Builders)
Daarom Joomla! - Inspiratie uit de praktijk
Joomla backend-beheer vereenvoudigen - Joomladagen 2016

Similar to 4.1 bootstrap intro (11)

PDF
4.1 bootstrap introductie
PDF
4.2 bootstrap 2
PDF
4.3 bootstrap 3
PDF
4.4 bootstrap 4
PDF
4.5 bootstrap 5
PDF
3.2 bootstrap introductie
PDF
4.6 bootstrap 6
PDF
4.5 more 1
PDF
4.7 bootstrap 7
ODP
Joomla & Bootstrap 3
PPTX
4.1 bootstrap introductie
4.2 bootstrap 2
4.3 bootstrap 3
4.4 bootstrap 4
4.5 bootstrap 5
3.2 bootstrap introductie
4.6 bootstrap 6
4.5 more 1
4.7 bootstrap 7
Joomla & Bootstrap 3
Ad

4.1 bootstrap intro

  • 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)