Logo STRATO
  • Menü

Bootstrap Tutorial: de eerste stappen met het Twitter-framework

  • Wat is Bootstrap?
  • Bootstrap-handleiding voor beginners
Hosting
Basic
Ideaal voor
dynamische sites
12 maanden slechts
€ 1
 per maand

daarna € 6 / mnd.
Setupkosten: € 0
Naar aanbieding
Alle prijzen incl. btw

Wat is Bootstrap?

Bootstrap is een front-end framework dat ontwikkelaars gebruiken om allerlei soorten websites te maken, onafhankelijk van op welk apparaat deze gebruikt zullen worden. De ontwikkelaars van Twitter kwamen jaren geleden met Bootstrap op de proppen. Dit open source project biedt een uitgebreid en divers gamma aan designtemplates. Deze zijn gebaseerd op HTML en CSS. Daarnaast zijn er ook optionele JavaScript-extensies. Twitter was oorspronkelijk van plan om Bootstrap te gebruiken als een interne tool met als doel hun eigen templates en ontwerpen meer uniform te maken. Het sociale netwerk besloot echter al snel om het framework te publiceren op het open source platform GitHub. Hier werd het snel een van de meest populaire projecten met als gevolg dat er ondertussen al duizenden - verbeterde - spin-offs voortgebracht zijn.

Zoek je nog geschikte hosting voor je online project?

Ontdek onze hostingpakketten

Wat maakt Bootstrap dan zo interessant?

Dankzij de HTML- en CSS-sjablonen hoeven ontwikkelaars die goede ideeën voor nieuwe websites hebben niet meer van nul af aan te beginnen. De inhoud wordt direct uit de toolkits gehaald en in HTML-documenten toegevoegd, zodat er geen lastige en ingewikkelde CSS-configuraties meer nodig zijn. Hier zijn enkele zaken die rechtstreeks zijn opgenomen in het programma:

  • Buttons
  • Navigatie elementen
  • Thumbnail overzichten
  • Dropdown menu's
  • Waarschuwingsberichten
  • Progressiebalken
  • Responsive video inbedding

Een ander belangrijk aspect is de Bootstrap grid lay-out. De rasterindeling in 12 kolommen maakt het voor de gebruikers gemakkelijker om nauwkeurig afstanden te bepalen en zo de afzonderlijke elementen op de website te positioneren. Of het nu gaat om desktop, mobiele telefoons of PC's met kleine beeldschermen, geen probleem! Gebruikers kunnen immers kiezen tussen verschillende schermformaten bij het plaatsen van elementen in het Bootsrap raster. Precies door deze flexibiliteit is Bootstrap zo goed uitgerust voor een responsive webdesign.

Ontwikkelaars kunnen extra gebruikersinterfaces toevoegen (bijv. tooltips of dialoogvensters) door middel van de optionele JavaScript-plugins. Deze zijn gebaseerd op het JavaScript-framework jQuery. Daarnaast kunnen ze hier ook door de werking van de bestaande besturingselementen uitbreiden, zoals bijvoorbeeld met een automatische autofill-functie voor de invoervakken. Hoe gebruik je Bootstrap dan met JavaScript? Voeg simpelweg de jQuery-library toe aan je HTML-document.

Bootstrap: download en de eerste stappen

Bootstrap werd door Twitter gedistribueerd als een gratis framework, zodat het kosteloos te downloaden en te gebruiken is. Met de gratis beschikbare programmeercode kunnen de meer ervaren ontwikkelaars het framework aanpassen aan hun eigen behoeften en voorkeuren. In onze handleiding hieronder wordt uitgelegd welke stappen je moet volgen voordat je de Bootstrap CSS- en JavaScript-sjablonen kunt gebruiken.

Stap 1: downloaden

Ga naar de officiële website getbootstrap.com en download het Bootstrap-pakket. Dit bevat zowel de CSS- en JavaScript-bestanden (één in standaardvorm, één in geminimaliseerde vorm) als de lettertypen en het optionele Bootstrap-thema.

Pak daarna het bestand uit en sleep de Bootstrap-map naar de gewenste projectmap in je eigen systeem.

Deze map bevat op haar beurt 'css'-, 'fonts'- en 'js'- mappen. In de map 'font' vind je meer dan 250 icoontjes in het Glyphicons Halflings -font. Deze icoontjes zijn opengesteld voor Bootstrap en dus gratis te gebruiken. De bestanden in de map 'css' en 'js' beschrijven we hieronder afzonderlijk:

  • bootstrap.css: CSS-code in leesbare vorm
  • bootstrap.min.css: geminimaliseerde CSS-code. Inhoud die niet relevant is voor de interpretatie van de code, zoals spaties, is verwijderd
  • bootstrap.css.map: bevat CSS source maps die je bij webdesign helpen om de originele brongegevens in LESS-formaat te vinden
  • bootstrap-thema.css: CSS-bestand met handige (optionele) voorgeprogrammeerde thema’s
  • bootstrap-thema.min.css: geminimaliseerde code van het thema
  • bootstrap-thema.css.map: source map van het thema
  • bootstrap.js: JavaScript-code in leesbare vorm
  • bootstrap.min.js: geminimaliseerde JavaScript code

Als je JavaScript-elementen wilt gebruiken, download dan de aanvullende JavaScript-bibliotheek jQuery .

Zodra alle componenten aanwezig zijn en je er vertrouwd mee bent, kan het echte werk beginnen. Om je een duidelijk voorbeeld te geven creëren we een HTML-welkomstpagina, die we daarna omzetten in een Bootstrap-template.

Open je favoriete code-editor, zoals Notepad++, en vul in een leeg venster de volgende code in:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<h1>Hallo, dit is mijn eerste Bootstrap-template!</h1>
</body>
</html>

De metatag ‘viewport’ in de head-area zorgt ervoor dat de website ook optimaal weergegeven wordt op mobiele toestellen.

Sla het project op als ‘basic.html’ op je desktop

Implementeer de Bootstrap JavaScript- en CSS-bestanden in de HTML-code om van dit gewone HTML-document een Bootstrap-template te maken. Geef hiervoor aan in welk pad de mappen zich bevinden. Het is aan te raden om JavaScript helemaal op het einde toe te voegen aan het document, omdat dit anders de laadtijd van je website kan verlengen. Dit is hoe je code eruit zou moeten zien:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name=viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
	<h1>Hallo, dit is mijn eerste Bootstrap-template!</h1>
	<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
	<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Tot slot sla je het document op als ‘bootstrap-template.html’. Door dubbel te klikken, kun je bootstrap-html openen in een browser naar keuze waar je het bericht “Hallo, dit is mijn eerste Bootstrap-template!” in de titel (h1) zult zien.

Nu kun je het template naar eigen wens vormgeven. De verschillende codes voor typografie, buttons, het Bootstrap Grid systeem, etc. kunnen gevonden worden op de officiële website van Bootstrap.

HTML/CSS-kennis is een belangrijke voorwaarde

Hoewel Bootstrap gebruikers voorgeprogammeerde inhoud aanbiedt, kom je niet ver met het framework zonder voorafgaande HTML-kennis en CSS-knowhow. Het is zelfs voor ervaren ontwikkelaars aan te raden om wat tijd te nemen om er in te komen en vertrouwd te raken met de programmeertaal, maar het framework gebruiken loont zeker de moeite. Bootstrap ontwikkelde immers veel - soms gratis - templates die je rechtstreeks kunt downloaden. Hiermee bespaar je heel wat tijd. Dus, wie regelmatig met HTML, CSS en JavaScript werkt, zal al snel de voordelen van Bootstrap inzien. Hieronder vind je de belangrijkste voordelen in een oogopslag:

  • De enorme tijdsbesparing
  • De erg goede opties wanneer het op responsive webdesign aankomt
  • De regelmatige updates en de ondersteuning vanuit de gemeenschap
  • Het gebruik gaat gepaard met hoogwaardige documentatie en illustratie

Voeg daar nog eens aan toe dat het om een open source project gaat, en je weet waarom Bootstrap één van de populairste frameworks voor webdesign is.

Op zoek naar voordelige webhosting?

Hosting aanbiedingen ontdekken