4. Bouw responsive websites 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

In deel 1 (VM) gaan we kennismaken 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.

In deel 2 (NM) gaan we templates downloaden en deze manipuleren naar onze eigen wensen. We zetten de navigatie naar onze hand, we spelen met secties en voegen eigen content en afbeeldingen in. Eventueel pas je zelfs kleuren van de opmaak aan via CSS.

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;
  • hoe je een template kunt downloaden en aanpassen.

Na deze sessie kun je:

  • met behulp van Bootstrap een eigen responsive 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 mooi portfolio (CV);
  • en veel meer natuurlijk...

Voorkennis

Verplichte kennis

Basiskennis van computergebruik en internet
Basiskennis HTML
Basiskennis CSS
Basiskennis website ontwerpen is ook zeker nodig!

 

Meegenomen kennis

Basiskennis Javascript / Jquery

Lesmateriaal

Hand-outs van presentatie

Sites

ATOM

Bootstrap

Interessant voor

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

Thema's

  • Website

Tijdstip

VM 1 + VM 2 + NM 1 + NM 2 (10:00 - 16:30)
Lokaal: D149
Er zijn 20 plaatsen waarvan er 6 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:

Breng eventueel een USB-stick mee.

Ben je aan een eigen project aan het werken? Heb je een project op stapel staan? Breng dan zeker alles mee (tekst en foto's) en misschien kunnen we dan een aanzet geven! Het kan uiteraard zijn dat we hier niet aan toekomen in de namiddag.

Installeer zeker de nodige software (zie hierboven). We willen immers geen tijd verliezen met deelnemers die niet in orde zijn met de lesvoorbereiding, dat begrijp je wel.

Voor wie geen eigen toestel kan meebrengen, zal het nodige materiaal klaarstaan. In sommige sessies werk je dan per twee aan één toestel, al proberen we dat te vermijden.

Lesgever

Stijn Willekens
Lees meer over de expertise van Stijn.

Korte titel : Bootstrap

Deze pagina werd al 1519 keer bekeken