3. Bouw een responsive website met Bootstrap (DAGSESSIE)

Bootstrap maakt webontwikkeling sneller & gemakkelijker

Inhoud

Inleiding

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

Bootstrap is een verzameling hulpmiddelen voor het maken van professioneel ogende websites. 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

We maken kort kennis met het ontstaan van Bootstrap, wat/waar downloaden en hoe integreren we dit in onze webpagina. We maken kennis met het grid systeem en leren de voornaamste elementen gebruiken. We experimenteren met een aantal herbruikbare componenten en leren deze ‘on the fly’ aan te passen via onze browser.

Responsive grid systeem

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

Standaard componenten

Meer dan een dozijn herbruikbare componenten van Bootstrap kunnen we gebruiken:

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

Alle HTML-elementen krijgen door Bootstrap een professioneel uiterlijk.

Resultaat

Na deze sessie weet je:

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

Na deze sessie kun je:

  • met behulp van Bootstrap een eigen responsive website bouwen;
  • voor een project op school snel een mooie website opzetten;
  • leerlingen helpen bij hun project met professionele webpagina's;
  • en veel meer natuurlijk...

Voorkennis

Verplichte kennis

Basiskennis van computergebruik en internet
Basiskennis HTML
Basiskennis CSS
Basiskennis websites ontwerpen

 

Lesmateriaal

Syllabus

Hand-outs van presentatie

Voorbeelden & opdrachten

Sites

Bootstrap

MDN Web Docs

Interessant voor

  • Leerkracht - Docent
  • Pedagogische ICT-coördinator
  • Technisch ICT-coördinator
  • Pedagogisch begeleider
Uit:
  • Alle onderwijstypes

Thema's

  • ICT-beheer
  • Website

Tijdstip

Voormiddag + Namiddag (10:00 - 16:30)
Lokaal: D118
Er zijn 20 plaatsen waarvan er 7 bezet zijn.

Vorm

Workshop

Mee te brengen

We raden heel sterk aan om je eigen laptop mee te brengen omdat je die best kent. Dat werkt vlotter.

Installeer ZEKER op voorhand:

Installeer de nodige software vooraf (zie hierboven). We willen geen tijd verliezen met deelnemers die niet in orde zijn met de lesvoorbereiding.

Lesgever

Stijn Willekens
Lees meer over de expertise van Stijn.

Korte titel : Websites bouwen met Bootstrap

Deze pagina werd al 1639 keer bekeken