Naar de inhoud

Herfstvakantie. Gesloten 2 – 8 november, terug op 9 november. Meer info over onze sluitingsdagen

in2sites, naar de startpagina

Lesmateriaal · Webontwikkeling · Met basiskennis HTML en CSS

Cursus Bootstrap

Bouw snel nette, responsive pagina’s en beheerschermen met het raster en de kant-en-klare componenten van Bootstrap.

Omslag van de cursus Bootstrap van in2sites
Omslag van de cursus Bootstrap · A4

Voor wie is de cursus Bootstrap?

Met de cursus Bootstrap leer je snel nette, responsive pagina’s bouwen zonder elke regel CSS zelf te schrijven. Hij past bij wie HTML en een beetje CSS kent en vlot een prototype, een beheerscherm of een eenvoudige site wil opzetten. Ook wie een bestaand project in Bootstrap moet onderhouden, heeft er veel aan, want veel oudere sites en dashboards draaien op dit framework.

Na de cursus Bootstrap gebruik je het raster met rijen en kolommen en zet je kant-en-klare componenten in. Daarnaast pas je het uitzicht aan zodat het bij een huisstijl past. Je weet ook wanneer Bootstrap een goede keuze is en wanneer je beter iets anders neemt, zoals Tailwind CSS.

Wat de cursus Bootstrap behandelt

We beginnen met de installatie, via een CDN of via npm, en met de opbouw van het framework. Daarna volgt het belangrijkste onderdeel: het gridsysteem. Je leert containers, rijen en kolommen combineren met breekpunten, zodat een layout op gsm anders schikt dan op een laptop.

Vervolgens verken je de utility-klassen voor marges, opvulling, kleur en flexbox. Daarmee los je veel kleine aanpassingen op zonder eigen CSS. Ook typografie, tabellen en beelden krijgen zo snel een verzorgde vorm. Zo merk je snel hoeveel je al bereikt met een paar goed gekozen klassen.

In het middelste deel van de cursus Bootstrap bouw je met componenten: een navigatiebalk die op gsm inklapt, kaarten, knoppen, meldingen en formulieren met validatie. Daarnaast komen interactieve onderdelen aan bod, zoals een modaal venster, een uitklapmenu en tabbladen. Je ziet hoe het JavaScript van Bootstrap die laat werken met alleen een paar data-attributen.

Tot slot pas je het framework aan. Met Sass-variabelen of CSS-variabelen zet je eigen kleuren, lettertypes en afrondingen, zodat je site niet op elke andere Bootstrap-site lijkt. Je leert ook alleen de onderdelen inladen die je echt gebruikt. Bij elke stap leer je opzoeken op de officiële site van Bootstrap, want daar staat voor elke component een werkend voorbeeld.

Opengeslagen cursus Bootstrap: een hoofdstuk met uitleg en een oefening
Een opengeslagen pagina met uitleg en een oefening.

Zo volg je deze opleiding

Tijdens de lessen bouw je één project dat telkens uitbreidt, bijvoorbeeld een beheerscherm met een menu, een tabel met gegevens en een formulier. Zo zie je hoe losse componenten samen een bruikbaar geheel vormen. Elke oefening start met een korte demo, waarna je zelf aan de slag gaat.

Het lesmateriaal is van de hand van Tom Vanhoutte, die bij in2sites websites en webapplicaties bouwt. Hij kent dus ook de valkuilen, zoals te veel klassen op één element of een site die er te standaard uitziet. Volg de cursus Bootstrap in een groep bij een opleidingscentrum, in-company of individueel. Meer daarover vind je bij onze IT-opleidingen. Moet er een beheerscherm komen dat verder gaat dan een prototype, dan bouwen we dat als software op maat.

Cookievoorkeuren

Kies welke cookies je toestaat. Je kunt dit later altijd wijzigen.

Nodig om de website te laten werken, bijvoorbeeld om je cookiekeuze te onthouden en het contactformulier te beveiligen. Deze staan altijd aan.

Altijd aan

Helpen ons begrijpen hoe bezoekers de website gebruiken (Google Analytics), zodat we ze kunnen verbeteren. De gegevens zijn niet bedoeld om jou persoonlijk te volgen.

Maken het mogelijk om onze advertenties te meten en relevanter te maken op andere websites. Momenteel niet in gebruik; we vragen het pas als het nodig is.