Gebruik Bootstrap - deel 1

Geschreven door daik01.

Gebruikerswaardering: 3 / 5

Ster actiefSter actiefSter actiefSter inactiefSter inactief
 

Bootstrap opnemen in je html pagina

Bootstrap is op dit moment het meest populaire framework voor websitedesign. Bootstrap website zijn van nature responsive (schaalbaar voor verschillende devices)

Download bootstrap op http://getbootstrap.com/ . Als je de .zip hebt gedownload dan kun je deze uitpakken. Hierin zitten de volgende mappen:

/css (hierin zit je bootstrap stylesheet) /font (hierin zit het bootstrap font) /js (hierin zitten de ondersteunende javascripts) Om Bootstrap te gebruiken in je pagina kun je het beste deze 3 mappen opnemen in je project (dus als subfolders voor je website maken) Om een en ander werkend te krijgen moet je de volgende zaken opnemen in je html pagina:

1. een referentie naar de stylesheet

Tussen de tags plaats je de volgende code

<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">

2. een referentie naar Jquery (nodig omdat daar bootstrap op leunt), deze plaats je binnen de tags

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

3. een referentie naar Bootstrap Javascript library. Deze kun je het beste plaatsen direct onder de code die je bij punt 2 hebt toegevoegd:

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"> </script>

Zoals je ziet heb ik de commentaar die direct van de Bootstrap site heb gekopieerd meegenomen. Dit helpt je in een later stadium om te beslissen wat je met de code verder wilt doen.

Je hebt nu Bootstrap opgenomen in je html pagina. Je ziet nog weinig veranderen, maar dat zal snel veranderen wanneer we hiermee aan het werk gaan. Dat zal volgen in de volgende tip. Houdt http://www.webfryslan.nl hierboor in de gaten.