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.
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:
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 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hallo, das ist mein erstes Bootstrap-Template!</h1>
</body>
</html>
<!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, das ist mein erstes Bootstrap-Template!</h1>
<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
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:
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.
Natuurlijk is Bootstrap niet de enige goede optie voor responsive webdesign. Kunnen beginners die geen CSS-, JavaScript- of HTML-ervaring hebben wel dezelfde aantrekkelijke resultaten behalen als ervaren ontwikkelaars met het door Twitter-ontwikkelde Bootstrap? Lees er meer over!