32e ict-praktijkdag #ictdag32

Inhoud

Inleiding

Soms hebben we (snel) een webpagina nodig voor een (klein) project. Een wafelverkoop, een MOS-project, een portfolio, een mini-onderneming ... Hiervoor kun je dan een leuke Bootstrap template voor downloaden en deze aanpassen naar eigen tekst en smaak.

Bootstrap is een verzameling hulpmiddelen voor het maken van websites en webtoepassingen. Het is gratis en open source. Het bevat sjablonen gebaseerd op HTML en CSS voor typografie, formulieren, knoppen, navigatie en andere interfaceonderdelen. Het bevat ook JavaScript-extensies. Het Bootstrap-framework is bedoeld om webontwikkeling te vereenvoudigen.

Het is gemaakt voor mensen van alle niveaus, apparaten van alle vormen, en projecten van alle soorten en maten.

Inhoud

Responsive grid systeem

Voor de verschillende schermafmetingen moet een website zich automatisch kunnen aanpassen. Het “Responsive grid systeem" zorgt voor de verschillende weergaven. Natuurlijk heeft ook Bootstrap zo een soort grid die de volgende 4 afmetingen ondersteunt: zeer kleine schermen (smartphones), kleine schermen (tablets), middelgrote schermen (bijvoorbeeld laptops) en grote schermen (desktop PC’s).

Standaard functies

Alle HTML-elementen krijgen door Bootstrap een professioneel uiterlijk.

We kunnen Bootstrap gebruiken voor:

• eenvoudige HTML-elementen
• responsive grid systeem
• typografie
• lijsten
• iconen
• knoppen & dropdowns
• tabellen
• formulieren
• badges
• alerts
• navigatie
• afbeeldingen
• media objecten
• en nog veel meer...

Resultaat

Na deze sessie weet je:

• hoe je het Bootstrap moet integreren in je website;
• hoe je van een lege webpagina een responsive webpagina maakt;
• hoe je het grid systeem kunt gebruiken in een webpagina;
• hoe je basis typografie-elementen kunt toevoegen;
• hoe je HTML-elementen kunt integreren en aanpassen;
• wat media queries zijn en hoe je ze kunt gebruiken;
• hoe je een template kunt downloaden en aanpassen.

Na deze sessie kun je ...

• met behulp van Bootstrap een eigen website bouwen
• een template downloaden en manipuleren naar je eigen huisstijl
• voor een project op school snel een mooie website opzetten
• leerlingen helpen bij hun project met professionele webpagina's
• leerlingen helpen voor een mooie portfolio (CV) One Page
• en veel meer natuurlijk...

Voorkennis

Verplichte kennis

• Basiskennis van computergebruik en internet.
• Basiskennis HTML
• Basiskennis CSS
• Basiskennis website ontwerpen

Meegenomen kennis

• Basiskennis Javascript / Jquery

Lesmateriaal

Hand-outs van presentatie

Sites

Bootstrap