logo

What the heck

is Bootstrap?

Responsive

Utilities

image
image
image
image
image
image
image
image
image
image
image

Wat is Bootstrap?

En wat heb jij eraan als beginnend designer?

Bootstrap is een gratis CSS-framework dat een basiscollectie van de meest gebruikte webcomponenten bevat. Het is ideaal wanneer je de basis van HTML en CSS beheerst. Dit komt omdat de documentatie uitgebreid is en veel voorbeelden bevat die gekopieerd en geplakt kunnen worden in je eigen project, of simpel weg om uit te proberen.

Daarbij is Bootstrap ook een tool waarmee je gemakkelijk een prototype tot leven kan brengen. Je kan er gemakkelijk websites mee maken, zoals een portfolio website of one page website (zoals deze), zonder al te veel eigen CSS voor te hoeven schrijven. Op het internet zijn ook veel gratis templates te vinden waarin jij alleen nog de teksten hoeft aan te passen. Bootstrap biedt ook veel zelfgemaakte en gratis templates aan die als start van een website kunnen dienen. Deze websites bestaan uit simpele portfolio websites tot volledige dashboards websites.

Hoe zet je Bootstrap in?

Wat is er nodig om Bootstrap te kunnen gebruiken?

Bootstrap kan op veel verschillende manieren binnen een project gehaald worden. De twee bekendste manieren zijn via NPM en via een CDN. Een CDN is de makkelijkste manier aangezien dit niet heel anders is dan een normaal CSS-bestand in een HTML-document verwerken. En direct nadat de basisstructuur van de HTML-document opgezet is heb je de mogelijkheid om componenten uit de documentatie te kopiëren en plakken.

Bootstrap kan beschouwd worden als een vertelvorm. Een voorbeeld van een vertelvorm is een one page website met alle inzichten van een onderzoek in plaats van een traditionele presentatie. Ook kan het een vertelvorm zijn in de vorm van een portfolio website waarin jij je zelf presenteert naar de buitenwereld. Natuurlijk kan het verder gaan dan dat. Websites zoals Spotify, Americanexpress en Salesforce zijn ontworpen in Bootstrap. De websites lijken uiteraard niet op elkaar omdat zij een eigen Design Guideline en Rules hanteren.

01

Via een CDN

Een CDN is een link naar de stylesheet van Bootstrap. Het bestand bevat alles om direct te starten.

02

Kopieër en plak

De documentatie bevat genoeg voorbeelden die je gratis kan kopieëren en plakken in je eigen project.

03

Gratis templates

Bootstrap biedt ook gratis templates die zorgvuldig in elkaar gezet zijn die consistent en responsive werken.

04

Diverse iconen

Bootstrap wordt standaard geleverd met 1600+ (en bijkomend) iconen in verschillende stijlen en extensies.

05

Grid-systeem

Het 12-grid kolommen systeem wordt geadopteerd door de grootste websites en is een industriestandaard.

06

Grote community

Op dit moment zijn er meer dan 3.5 miljoen websites die afhankelijk zijn van het framework Boostrap.

Waarom Bootstrap?

Waarom zou jij Bootstrap willen gebruiken als beginnend designer?

De voornaamste reden waarom Bootstrap ingezet wordt is omdat het de mogelijkheid biedt voor rapid development. Doordat het een goed doordachte Style Guideline bevat biedt het de mogelijkheid om een design te programmeren dat consistent en responsive werkt.

Zoals eerder benoemd biedt Bootstrap gratis web templates aan en staat de documentatie vol met voorbeelden die je kan gebruiken in je eigen website. Het een vertelvorm tijdens een project en we hebben zelfs instanties gezien waarin het Design Challenge verslag gemaakt is in Bootstrap. Over schoolprojecten gesproken, na het maken van een highfidelity prototype kan je het project naar een hoger niveau brengen door het ontwerp daadwerkelijk te realiseren. Het voordeel is dat je ontzettend veel leert van een ontwerp daadwerkelijk programmeren. Daarbij zorgt het voor betere resultaten tijdens het testen van je ontwerp.

image

Bekende componenten die Bootstrap biedt

Meest gebruikte voorbeelden die je zo kan kopieëren en plakken

image
De kaart component wordt veel gebruikt bij het tonen van individuele items op een webshop.

De stijl van de kaarten kunnen helemaal aangepast worden naar eigen smaak. De achtergrond kleur, border radius, titel, de grootte etc kunnen allemaal aangepast worden.

Bekijk
image
De navigatiebalk vind je altijd bovenaan in een website en laat de navigatiestructuur in één oogomslag zien.

Bootstrap heeft veel voorgeprogrammeerde navigatiebalken die mobielvriendelijke zijn en mee schalen op verschillende schermformaten.

Bekijk
image
Door het inzetten van Tabs kan je veel informatie kwijt in een sectie zonder dat de gebruiker hoeft te scrollen.

Het item waar je nu naar kijkt is in feite ook een tab component. De titel geeft het hoofditem aan en wanneer je erop klikt krijg je informatie te zien over dat item.

Bekijk
image
Knoppen zijn er in verschillende soorten en maten. Iedere knop heeft zijn eigen betekenis door de kleur.

De documentatie voor de knop is zeer uitgebreid. Je vindt er namelijk knoppen in verschillende stijlen, grootte, kleuren en states.

Bekijk
image
Formulieren zijn er natuurlijk om ingevuld te worden. Bootstrap heeft een breed scala aan formulieren.

Zo zijn er formulieren speciaal voor het invullen van een email, wachtwoord, tekst of getallen. Deze formulieren zijn er ook in verschillende states.

Bekijk

Klein feitje tussendoor

De meest recente versie van Bootstrap is versie 5

2021 - heden

Bootstrap 5

Introductie van Utilitie classes en nieuwe componenten. Maakt geen gebruik meer van jQuery.

2015 - 2021

Bootstrap 4

Meer focus op toegankelijkheid op alle componenten voor slechtziende mensen op alle componenten.

2013 - 2015

Bootstrap 3

De focus werd zwaarder gelegd op de verschillende scherm formaten: xs - sm - md - lg.

2012 - 2012

Bootstrap 2

Geupdate van versie 1 naar 2 om de nieuwe structuren van HTML 5 te ondersteunen.

2011 - 2012

Bootstrap 1

Ookwel Twitter Bootstrap genoemd. Is gedesigned en ontwikkeld door Twitter.

Wat zijn de kosten?

En waarom is het zo voordelig voor een student?

Bootstrap is gratis om te gebruiken. Dit is ideaal voor studenten die heel goedkoop een website willen bouwen en publiceren. Ten opzichte van een CMS-systeem zoals Wix of Webflow is het ook een stuk voordeliger om een website online te zetten. Maak je gebruik van een CMS-systeem dan kijk je al gauw tegen €14,95 per maand. Bij het zelf hosten van een website via bijvoorbeeld Hostinger kijk je tegen €2,99 per maand. Voor dat prijsverschil kan je natuurlijk ook een premium Bootstrap template overwegen waarin al het zware werk al gedaan is!

image

Hoe is dit gemaakt?!

Wat is de denkwijze achter het bouwen van een website?

image

Stap 1

Starter template

Ieder project begint met een goede basis. De basis voor een Bootstrap project is te vinden in de documentatie onder 'introductie'.

Plak de code van de starter template in je code editor naar keuze en sla het bestand vervolgens op als index.html.

Stap 2

Navigatiebalk

De navigatiebalk is de eerste sectie dat zich in de <body> tag bevindt en toont de hiërarchie van de website.

Aan de linkerkant, ook wel de navbar-brand vind je de voornaam van de eigenaar van de site. Aan de rechterkant, ook wel de navbar-nav genoemd de individuele items. Door de class fixed-top behoudt de navigatiebalk zijn positie.

image
image
image
image

Stap 3

Over mij sectie

Het is belangrijk dat de over mij sectie aanspreek want dit is het eerste punt waar mensen naar kijken.

Als we kijken naar de indeling dan is alles gecentreerd door text-center. In de over mij sectie is een afbeelding geplaatst en daaronder een <h1> met een stuk tekst. De skills zijn verwerkt in een <p>.

Stap 4

Mijn werk sectie

Natuurlijk is er ook ruimte om het werk te laten zien waar jij het meest trots op bent. De 'mijn werk' sectie is hier perfect voor.

Om te beginnen zie je een grote titel met 'mijn werk'. Dit zit verwerkt in een <h2> tag omdat de <h1> al één keer gebruikt is. De zes plaatjes zitten eerst in een row verwerkt en daarna is een col-md-4. Omdat het kolommen systeem uit 12 kolommen bestaat krijg je dat er 3 items naast elkaar komen.

image
image
image
image

Stap 5

Over mij sectie

De 'over mij' gedeelte is de perfecte plek om te vertellen over wie jij bent, wat je doet, en wat je wilt bereiken.

Als we kijken naar de indeling van deze sectie dan zie je direct dat de titel van de vorige sectie overgenomen is en dat de kleur van de tekst wit is gemaakt. De titel van de sectie zit nog steeds in een <h2> verwerkt. De tekst onder de titel zit in een row en in de row zit een col-6. Omdat twaalf gedeeld door twee zes is krijg je dat er twee kolommen naast elkaar komen.

Stap 6

Contact sectie

Bij de 'contact' sectie wil je juist een call to action. Of dit in de vorm van een link naar je email adres is of echt een volledig formulier die gebruikers in moeten vullen ligt aan het ontwerp van je website.

Wederom bij de contact sectie is de titel hetzelfde als in de voorgaande sectie. Ook hier weer zit de titel in een <h2> verwerkt. Het linkje naar een email adres zit in een <h3> verwerkt en heeft een andere kleur gekregen om extra op te vallen.

Wist je dat <a href="mailto:email@example.com"> ervoor zorgt dat de mailclient van de gebruiker opent?

image
image
image
image

Stap 7

Footer sectie

De footer is in dit geval gebruikt om overige informatie weer te geven dat niet thuishoort in de andere secties.

De footer bestaat uit een row en hierin zitten twee col-6. Daaronder krijg je twee kolommen. In de linker kolom is een <h4> tag voor de titel en daaronder in een <p> tag de informatie. Aan de rechterkant vind je dezelfde <h4> titel. En daaronder 4 iconen die standaard worden geleverd met Bootstrap.

Nu is het jouw beurt

Waar ga jij Bootstrap nu voor inzetten?

Je bent nu verschillende use cases gezien om Bootstrap in te zetten. Wat ga jij nu doen? Maak jij je eerste portfolio website in Bootstrap of zit je te overwegen om je huidige portfolio om te zetten naar bootstrap? Het belangrijkste is dat je het gewoon probeert en niet opgeeft. Vraag hulp om de mensen om je heen of aan ons!

Het team

De mensen achter de schermen

image

Seyda Kocaer

0911919@hr.nl

image

Sandesh Boedhoe

0970688@hr.nl

Download

Download hier de attributen die nodig zijn tijdens de workshop.

Handout Starter template Challenge template Feedbackformulier