Bootstrap introduction

Bootstrap is een framework. Dit houd in, een verzameling van onderdelen die jij in je website toe kan passen, bijvoorbeeld om hem sneller op te bouwen. Denk hierbij aan het maken van de indeling of het toevoegen van een slideshow. Bootstrap heeft uitgebreide documentatie waarin alle onderdelen gedetailleerd uitgelegd worden. Hieronder zullen enkele basis onderdelen uitgelegd worden die jij direct in je website toe kan passen.

Introductie

Om te beginnen met Bootstrap zul je de stylesheet (CSS) en Javascript van Bootstrap toe moeten voegen. Dit kan op 2 manieren:

Downloaden en zelf toevoegen (eerste voorbeeld hier onder)
Verwijzen naar op het web gehoste bestanden (tweede voorbeeld hier onder)

Zelf downloaden

Download Bootstrap

Als je deze gedownload hebt moet je de font, css en js folders in dezelfde map plaatsen als je index folder.
Je index bestand moet er daarna zo uit zien:

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Voeg hier alle CSS bestanden toe-->
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 </head>
 <body>
		
    <!-- Voeg hier alle content van je website toe -->


    <!-- Voeg hier onder alle javascript bestanden toe -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Verwijzen

Het is soms makkelijker om te verwijzen naar bestanden die gehost worden op het internet. Behalve het bijkomende gemak van niet meer zelf alles hoeven downloaden zorgt het er vaak ook voor dat je website sneller werkt omdat mensen de bestanden vaak nog in de cache van hun browser hebben staan.

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Voeg hier alle CSS bestanden toe-->
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
 </head>
 <body>
		
    <!-- Voeg hier alle content van je website toe -->


    <!-- Voeg hier onder alle javascript bestanden toe -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

Nu je Bootstrap hebt toegevoegd aan je website kun je beginnen met het bouwen van een eerste pagina. Je kan op basis van het basic template een eerste pagina bouwen, of een template als basis kiezen. Wil je direct een goede layout maken, lees dan even verder.

De Grid

Een van de krachtigtste features van Bootstrap is het grid systeem. Met de grid kun je je website indelen. Deze indeling is heel makkelijk responsive te maken, wat inhoud dat het zich aan kan passen aan de grootte van het scherm.
Voordat je begint met het schrijven van je website is het een goed idee om te weten hoe jij je website in wil delen. Schets eerst een layout. Bepaal waar bijv. navigatie, header en inhoud komen. Bouw dan de grid en vul die daarna met de inhoud van je website.

Basics

Rijen moeten worden geplaatst in een class="container" of een class="container-fluid"
Grids moeten worden geplaatst in een class="row"
Elke rij bestaat uit 12 kolommen
Elke rij wordt gevuld van links naar rechts
Er zijn 4 indelingen voor schermgrotes:

class="col-xs-nColumns"
class="col-sm-nColumns"
class="col-md-nColumns"
class="col-lg-nColumns"

Een kolom kan worden opgeschoven met class="col-md-offset-*nColumns*

Grid voorbeeld

.col-xs-12

.col-xs-1

.col-xs-3

.col-xs-6

.col-xs-3

.col-xs-12

.col-xs-8

Code:


<div class="container">
    <div class="row">
      <div class="col-xs-12">
        <p>.col-xs-12</p>
      </div>
    </div>
  <div class="row">
     <div class="col-xs-1"><br> <br> <br> <br>  <p class="vertical">.col-xs-1 </p> <br>
    </div>
     <div class="col-xs-11">
    <div class="row">
      <div class="col-xs-3"><p>.col-xs-3</p></div>
        <div class="col-xs-6"><p>.col-xs-6</p></div>
        <div class="col-xs-3"><p>.col-xs-3</p></div>
    </div>
    <div class="row">
      <div class="col-xs-12"><p>.col-xs-12</p></div>
    </div>
    <div class="row">
      <div class="col-xs-8">
        <p>.col-xs-8</p>
      </div>
      <div class="col-xs-1">
        <p>1</p>
      </div>
      <div class="col-xs-1">
        <p>1</p>
      </div>
      <div class="col-xs-1">
        <p>1</p>
      </div>
      <div class="col-xs-1">
        <p>1</p>
      </div>
    </div>
    </div>
    </div>
  </div>

Voor meer informatie over hoe het grid systeem werkt, zie de Bootstrap documentatie:

Grid documentatie

Navigatie

Om door je website heen te bewegen is het soms makkelijk om een navigatie toe te voegen. Hier kun je eenvoudig verwijzingen aan toe voegen, deze kunnen je bezoekers sturen naar andere (sub) pagina's maar ook naar posities op dezelfde pagina. Om naar een bepaald gedeelte van de huidige pagina te gaan gebruik je het volgende:

<a href="#idtag">Link naar de ID </a>

Met een compleet voorbeeld via Codepen:

See the Pen gpLxmG by Fjodor van Slooten (@vanslooten) on CodePen.

Extra informatie over de navigatie balk kun hier vinden:

Navbar documentatie

Helper Classes

Helper classes zijn extra classes die jij eenvoudig toe kan voegen aan een element om veel voorkomende acties uit te voeren. De belangrijkste helper classes zijn hieronder gegeven:

Zichtbaarheid: Met de class .hidden kun je elementen verbergen.
Positionering: Met de classes .pull-left, .pull-right en .center-block kun je elementen naar links, rechts en het midden verplaatsen.

Media weergeven

Er zijn veel verschillende manieren om afbeeldingen op je website te presenteren. Hieronder worden een paar van de meest gebruikte besproken.

Bootstrap carousel

Met Bootstrap kan je een slideshow van je afbeeldingen maken. Er zijn nog tal van extra instellingen en opties beschikbaar. Deze kun je vinden in de Bootstrap documentatie.

Documentatie

De code:


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/1.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Plaats text hier</h3>
      <p> Hieronder kan ook tekst</p>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Plaats text hier</h3>
      <p> Hieronder kan ook tekst</p>
      </div>
    </div>
    <div class="item">
      <img src="img/3.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Plaats text hier</h3>
      <p> Hieronder kan ook tekst</p>
      </div>
    </div>
    <div class="item">
      <img src="img/4.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Plaats text hier</h3>
      <p> Hieronder kan ook tekst</p>
      </div>
    </div>
    <div class="item">
      <img src="img/5.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Plaats text hier</h3>
      <p> Hieronder kan ook tekst</p>
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

FancyBox

Met FancyBox kun je afbeeldingen weergeven in popups. Door op de afbeelding te klikken worden ze vergroot getoond. Op Codepen staat een uitgebreider voorbeeld.

Documentatie


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
</head>

<body>
<a class="fancybox fancyimg" rel="gallery1" href="img/1.jpg"><img class="fancyimg" src="img/1.jpg" alt="" /></a>
<a class="fancybox fancyimg" rel="gallery1" href="img/2.jpg"><img class="fancyimg" src="img/2.jpg" alt="" /></a>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>
</body>

Bootstrap basics

Introductie

Zelf downloaden

Verwijzen

De Grid

Basics

Grid voorbeeld

Code:

Navigatie

Helper Classes

Media weergeven

Bootstrap carousel

Plaats text hier

Plaats text hier

Plaats text hier

Plaats text hier

Plaats text hier

De code:

FancyBox