Leuke en simpele Bootstrap toepassingen - Blog

Wat is Bootstrap?

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:

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:

• 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:

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:

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

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:

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:  

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

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>

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