Leuke en simpele Bootstrap toepassingen

23 juni 2017

Om de Shoxl shops responsive te maken wordt gebruik gemaakt van het Bootstrap framework. Dit is een verzameling HTML, CSS en Javascript sjablonen die speciaal bedoeld zijn voor de ontwikkeling van responsive, mobile first websites. In deze blog bespreek ik enkele gemakkelijk uit te voeren toepassingen van het uitgebreide bootstrap framework.

Wat is Bootstrap?

 

Bootstrap logo  

Bootstrap is een open source framework dat oorspronkelijk ontwikkeld werd om het ontwerp van de interface van Twitter makkelijker te maken. In plaats van de vele bibliotheken die gebruikt werden voor de interface van Twitter, werd één consistent framework gebruik. Dit interne project, Twitter Blueprint, werd uiteindelijk doorontwikkeld en als open source project Bootstrap de wereld ingezet.

Bootstrap heeft een zeer uitgebreid pakket aan CSS, HTML, en Javascript componenten, variërend van erg simpel tot zeer geavanceerd. Binnen het framework zitten een heleboel elementen die vrij makkelijk te implementeren zijn, en die een website of webshop net wat mooier of leuker kunnen maken. Het enige dat u nodig heeft om de elementen toe te voegen is wat basis kennis van HTML, en toegang tot de HTML editor.

Meerdere kolommen

Binnen de 3x3 template in Shoxl is al heel veel mogelijk, maar soms zijn drie kolommen gewoon niet genoeg. Met wat simpele HTML kunt u gemakkelijk een vierde kolom toevoegen aan de 3x3 template. Met dezelfde HTML kunt u ook kolommen maken in het vrije content veld, het Shoxl template dat helemaal leeg is (en dus geen rijen en kolommen heeft).

 

Allereerst moet u altijd een rij toevoegen. Binnen die rij zullen de kolommen gaan vallen. Een rij voegt u toe aan de HTML met de volgende code:

Begin van de rij: <div class="row"> 
Helemaal aan het einde van de rij: </div>

Vervolgens kunt u binnen deze rij kolommen gaan definiëren. Een rij heeft de maximale breedte van “12”. Ook als de rij in een kolom staat heeft het een breedte van “12”. De kolommen worden over de rij verdeeld binnen deze maximale breedte van 12. Wilt u twee kolommen die beide dezelfde breedte hebben, dan krijgen ze allebei een breedte van 6. Wilt u drie kolommen met dezelfde breedte dan krijgen ze allemaal een breedte van 4. Wanneer u twee kolommen wilt met verschillende breedtes, dan krijgen ze bijvoorbeeld de waardes 9 en 3.

 

Wanneer u twee kolommen wilt toevoegen van dezelfde breedte doet u dat met deze code:

< div class="col-md-6 col-sm-6 col-xs-12"> Inhoud kolom 1 </div>
< div class="col-md-6 col-sm-6 col-xs-12"> Inhoud kolom 2 </div>

  • Col-md-6 betekent dat wanneer de kolom op groot formaat wordt bekeken, deze 6 breed moet zijn.
  • Col-sm-6 betekent dat wanneer de kolom op tablet formaat wordt bekeken, deze 6 breed moet zijn.
  • Col-xs-12 betekent dat wanneer de kolom op klein formaat (smart phone) wordt bekeken, deze de volledige breedte krijgt.

De inhoud van de kolommen kan alles zijn wat met HTML mogelijk is. Dus bijvoorbeeld tekst, een afbeelding, een video, thumbnails, etc.

 

Hieronder een voorbeeld van de code die nodig is om de volgende drie kolommen te maken:

Dit is kolom 1. Dit is kolom 1. Dit is kolom 1. Dit is kolom 1. 

Dit is kolom 2. Dit is kolom 2. Dit is kolom 2. Dit is kolom 2. 

Dit is kolom 3. Dit is kolom 3. Dit is kolom 3. Dit is kolom 3. 

 

<div class="row">

<div class ="col-md-3 col-sm-3 col-xs-12">

<p>Dit is kolom 1. Dit is kolom 1. Dit is kolom 1. Dit is kolom 1.</p>

</div>

<div class ="col-md-6 col-sm-6 col-xs-12">

<p>Dit is kolom 2. Dit is kolom 2. Dit is kolom 2. Dit is kolom 2.</p>

</div>

<div class="col-md-3 col-sm-3 col-xs-12">

<p>Dit is kolom 3. Dit is kolom 3. Dit is kolom 3. Dit is kolom 3.</p>

</div>

</div>

 

Buttons

Wanneer u bijvoorbeeld een landingspagina maakt, kan het erg belangrijk zijn om hier een call-to-action knop aan toe te voegen. Ook dit is mogelijk met wat simpele HTML.

Iedere Shoxl webshop heeft al enkele opgemaakte buttons. Deze opmaak wordt in de CSS gedefinieerd, en kan worden toegepast in de HTML door de “class” van die opmaak te gebruiken. Als u de class namen van uw buttons niet weet kunt u dit altijd aan ons vragen. U kunt er ook achter komen door er met de rechtermuisknop op te klikken en dan inspect element (inspecteren) te kiezen. Onderaan het scherm wordt dan de CSS en HTML van het element getoond.

Een standaard knop heeft in het Bootstrap framework altijd de class naam btn-default of btn-primary. Ook zijn er een aantal andere standaard opgemaakt Bootstrap knoppen die u zo kunt gebruiken: btn btn-success, btn btn-info, btn btn-warning, btn btn-danger, btn btn-link.

Wilt u specifieke opmaak voor een button? Dat kan natuurlijk ook! U kunt de wens naar het support systeem mailen, dan wordt het opgepakt in de support uren. Beschrijf in de mail heel duidelijk hoe de knop eruit moet zien, en welke class naam deze moet krijgen. 

 

Een button toevoegen doet u (onder andere) met de volgende code:

<a href="vul hier de URL van de link in" class="btn btn-primary" role="button">Meer info</a>

 

Wanneer u wilt dat uw knop actief wordt wanneer men er met de muis overheen gaat, voegt u “active” toe aan de class:

<a href="vul hier de URL van de link in" class="btn btn-primary active" role="button">Meer info</a>

 

Wilt u een grotere of juist een kleinere knop? Voeg dan btn-lg voor een grote knop, of btn-sm of btn-xs voor een kleinere knop toe aan de class:

<a href="vul hier de URL van de link in" class="btn btn-success btn-lg" role="button">Grote knop</a>
<a href="vul hier de URL van de link in" class="btn btn-success btn-xs" role="button">Kleine knop</a>

 

Glyphicons

Glyphicons zijn een set iconen, die door de maker gratis beschikbaar zijn gesteld voor gebruikers van Bootstrap. Deze iconen kunnen overal gebruikt worden. In tekst, in knoppen, in de carousel, etc.

Glyphicons kunnen niet direct samen met andere componenten gebruikt worden, dus u moet ze toevoegen met een eigen “span” tag.

Verder worden glyphicons niet begrepen door screenreaders, software die de tekst op een website voorleest voor bijvoorbeeld mensen met een visuele beperking. Om verwarring te voorkomen kan de glyphicon worden weggelaten bij screenreaders door de attribuut aria-hidden=”true” toe te voegen aan de tag. Verder kunt u de extra attribuut “aria-label” toevoegen waarin kan worden uitgelegd wat de icoon doet of is. Dit kan bijvoorbeeld van pas komen wanneer u de icoon gebruikt op een knop, zonder andere tekst.

Een glyphicon voegt u toe met de volgende HTML:  

<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
      

 

Wilt u een glyphicon toevoegen aan een button, dan ziet dat er zo uit:

<a href="vul hier de URL van de link in" class="btn btn-primary active" role="button">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> Ga terug naar boven </a>

 

Er zijn meer dan 250 glyphicons beschikbaar voor Bootstrap gebruikers, u vindt ze hier allemaal

 

Thumbnails

Met de thumbnail optie van Bootstrap kunt u uw afbeeldingen, video’s of tekst in een gelinkte box tentoonstellen. In het voorbeeld ziet u een simpele tumbnail met een afbeelding en link.

De thumbnail kunt u aan uw content toevoegen met de volgende HTML:

  Simpele thumbnail:

<div class="row">

<div class="col-xs-6 col-md-3">

<a href="vul hier de URL van de link in" class="thumbnail">

<img src="het pad van de afbeelding" alt="...">

</a>

</div>

</div>

 

Thumbnail met tekst en knop:

<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="het pad van de afbeelding" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Extra tekst </p>

<p><a href="vul hier de URL van de link in" class="btn btn-primary" role="button">Knop</a> </p>

</div>

</div>

</div>

</div>

Puppy voorbeeld

Voorbeeld

Thumbnail met extra tekst

Puppy

 

Handige Bootstrap links

Get Bootstrap: de Bootstrap website zelf

Bootply: een browser HTML editor speciaal voor Bootstrap toepassingen

Bootsnipp: een overzicht van allerlei mogelijke Bootstrap toepassingen