54. Bouw responsive websites met Bootstrap

Bootstrap maakt front-end webontwikkeling sneller & gemakkelijker

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

Interessant voor

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

Thema's

  • Administratief
  • Systeembeheer
  • Website

Tijdstip

Namiddag (14:00 - 16:30)
Lokaal: 1.11
Er zijn 20 plaatsen waarvan er 9 bezet zijn.

Vorm

Workshop

Mee te brengen

Installeer ZEKER op voorhand:

We adviseren om je eigen toestel mee te brengen omdat je dat kent en het toetsenbord best kent. Dat werkt vlotter. 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 ;)

PS een MacBook mag uiteraard ook!

Lesgever

Stijn Willekens
Lees meer over de expertise van Stijn.

Korte titel : Bootstrap

Deze pagina werd al 1363 keer bekeken