3.2 bootstrap introductie

HTML module 3

3.2 Bootstrap 3Introductie

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


Meer regels code nodig dan wanneer je hetzelf maakt. Doordat het met veel zaken rekeningmoet houden.

HTML module 3

Bootstrap 3Gereedmaken voor gebruik!

3.2 Bootstrap Introductie


Bootstrap download!

http://getbootstrap.com/


3 mappen t.b.v. bootstrap


Bootstrap koppelen aan je webpagina!

1. De viewport plaatsen2. Bootstrap.min.css koppelen


Jquery en andere javascript koppelen!

Koppeling jaar jquery

Koppeling jaar bootstrap.min.js

Respond.min.js moet je zelfdownloaden zie volgende pagina!


https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js

Niet helemaal duidelijk?Kijk filmpje op lynda.com

HTML module 33.2 Bootstrap Introductie

Opdracht !Maak een standaard html bestandom gebruik te kunnen maken vanBootstrap.

HTML module 33.2 Bootstrap Introductie

HTML module 3

Bootstrap 3Grid system

3.2 Bootstrap Introductie


12 Columns


Voorbeeld


Zorgt voor plaatsen in het midden vanuit bootstrap.css.En whitespace

Bij large screen plaatje 1 breedte van6 columns en smal screen breedte van 5 cols


Large screen Medium screen

Iedere rij begint altijd met de class ROW


OpdrachtMaak 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 sitevan red bull.

Het logo kan je googelen.

Plaats het geheel op je eigen webomgeving en uploadDe link naar Natschool.

3.2 bootstrap introductie

Education