Twitter Bootstrap 3 – Hoe begin ik er mee

CSS text-shadow
17 juni
15 must-have wordpress plugins
18 november
Laat alles zien

Twitter Bootstrap 3 – Hoe begin ik er mee

Twitter Bootstrap 3 – Hoe begin ik er mee

Versie 3 van het Bootstrap template is een grote verandering van haar voorgangers. Het is een mobile-first framework. En het claimt een van de beste CSS frameworks voor responsive designs te zijn die op dit moment op de markt is.

Laten we beginnen

De website van bootstrap is zelf ook gebouwd op het bootstrap 3 framework. Je kunt het framework in een zip bestand vanaf de bootstrap site downloaden.

bootstrap site

Nadat je de zip hebt uitgepakt zie je een mapje ‘bootstrap’met daar in de onderstaande map structuur. Dit is de homedirectory van je nieuwe project.

folders

Laten we nu even kijken naar de inhoud van de verschillende mappen. In de CSS map staan 4 bestanden : bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css.

Het basisbestand is bootstrap.css, en moeten deze dan ook in elke html pagina aanroepen. Bootstrap-theme.css is een extra bestand, die je in de pagina’s kunt neerzetten. Deze zorgt er bijvoorbeeld voor dat je mooie 3d effecten krijgt bij je knoppen in de zelfde stijl als bootstrap zelf. Ook staan er 2 .min bestanden in. Deze minified css bestanden kun je gebruiken als je naar productie gaat.

Het grootste verschil tussen BT2 en BT3 is dat er nu gebruikt wordt gemaakt van een font ipv afbeeldingen om de verschillende iconen weer te geven. Dit heeft 2 belangrijke voordelen :

  1. Het vergt minder bandreedte en zal dus de snelheid van je website verbeteren.
  2. Fonts zijn volledig schaalbaar en dus responsive.

De font iconen heten Glyphicons, vernoemd naar het bedrijf dat deze gratis aan bootstrap ter beschikking heeft gegeven

In de JS map staan 2 javascript bestanden. bootstrap.js en bootstrap.min.js. Hierin staan de belangrijkste functies van bootstrap. De dropdown menus, de carousels en dergelijke. De .min kun je voor de productie gebruiken.

LET OP : bootstrap.js heeft jQuery nodig om te werken. Deze kun je downloaden van de jQuery site om op je eigen site te zetten., maar je kunt ook linken naar het bestand in de cloud.
[prettify class=”html”][/prettify]

Wat gaan we nu eigenlijk bouwen ?

In dit artikel gaan we een homepage bouwen met Twitter Bootstrap 3. Neem maar een een kijkje op de demo pagina. Verklein je browser en je ziet de verbluffende transformatie van de pagina. Je ziet ook dat het menu automatisch verdwijnt als je op de kleinste schaal komt. De structuur Bootstrap 3 kan omgaan met html5 Elementen, dus hebben we het juiste doctype nodig op onze webpagina. Laten we dan beginnen met met aanmaken van een nieuwe html pagina en begin met de volgende doctype tag Nu kunnen we een aantal basis tags toevoegen die je in elk html document tegen komt
[prettify class=”html”]

Hello, world!



[/prettify]

Als we in dekijken beginnen we met de title tag, deze is vrij makkelijk om te begrijpen. Deze geeft een titel aan een pagina.

Daarna komt de meta tag. Deze is erg belangrijk om te begrijpen als je met Bootstrap aan het werk gaat. Aangezien Bootstrap is compatible met elk soort apparaat (mobiel, desktop, retina display, tablet enz) moet je browser weten dat het de pagina moet schalen op elk apparaat.

Dit wordt dus gedaan door de viewport meta tag. We zetten content breedte tot de breedte van het device en schalen het maar 1 keer.

Daarna voegen we de bootstrap css toe, het bestand staat vol met commentaar regels die de structuur van dat document uit leggen. Als we de site in productie zetten kunnen we de –min versie gebruiken.

In de body van het document hebben we hier een “Hello world” toegevoegd en daarna een 2 tal regels met javascript. Bootstrap.js heeft jQuery nodig om te werken. jQuery is niet in de download toegevoegd en die halen we dus uit de cloud. Direct van de jQuery site zelf.

Om een pagina sneller te laten laden, laden we de javascript pas als laatste element.

Dieper in Bootstrap 3 duiken

Nu dat we de basis structuur klaar hebben, gaan we verder met de verschillende onderdelen van de webpagina. Deze onderdelen zijn het allerbelangrijkste onderdeel van alle websites die we tegenwoordig zien. De pagina wordt onderverdeeld in de structuur die je op de onderstaande afbeelding te zien is.

Het Menu

Een menu ontwerpen is een van de eenvoudigste dingen die je kunt doen in de wereld van webdesign. Laten we beginnen om een menu te maken voor onze webpagina.

We hebben hier ook de juiste markup nodig. Bootstrap 3 is standaard responsive, en zal een andere look krijgen in kleinere weergaves. Aangezien we alle CSS al hebben staan in de bootstrap.css hoeven we alleen maar de juiste code en classes te gebruiken.

Ga naar de body tag van je pagina en voeg het volgende toe.

Omdat Bootstrap geschreven is voor HTML 5 gebruiken we het

Het menu komt er dan zo uit te zien :

[prettify class=”html”]

navbar-wrapper, omsluit de gehele navigatie en houd het bij elkaar.
navbar-default zorgt voor de achtergrond kleur en de rand
navbar-fixed-top zorgt er voor dat het menu bovenin altijd zichtbaar blijft, zelfs als de pagina gaat scrollen. Wil je niet dat dit gebeurd kun je deze class altijd weg halen

[prettify class=”html”]

[/prettify]

De container zorgt er voor dat de content netjes op zijn plaats blijft met een juiste marge van elke kant van de website. Daarna komen een aantal links die worden gebruikt als de pagina een dusdanig formaat krijgt dat de navigatie wordt verkleint, en de navbar brand wordt gebruikt om je logo neer te zetten.

Voeg nu de volgende code toe aan de container div.

[prettify class=”html”]

[/prettify]

Door de class “glyphicon-home’ toe te voegen zorg je dat er een icoon voor de link wordt geplaatst. Je ziet ook dat er dropdowns worden gemaakt.

Dropdown zorgt voor een verticaal uitklapmenu, navbar-right zorgt er voor dat het element aan de rechterkant van het menu wordt uitgelijnt.

Kijk nog maar eens op de demo-pagina om het menu in werking te zien.

De Header

Bootstrap heeft een erg nutige class genaamd jumbotron, en deze kan gebruikt worden voor grote headers en content. Om het te gebruiken voeg de volgende code toe :

[prettify class=”html”]

Hofman consulting en development

Dimpact, webtichtlijnen, processen en webdevelopment

Vraag een offerte aan

[/prettify]

Het verschil tussen container en container-fluid is dat de laatste er voor zorgt dat de content in het midden van de browser wordt geplaatst met een juiste breedte en de eerste er voor zorgt dat de browser voor 100% wordt gevuld.

Daarna hebben we het jumbotron element met daarin een h1 een p en een mooie button.

Kijk nog maar eens op de demo-pagina om het te zien.

De Content

We gaan de content verdelen in 3 gelijke stukken die naast elkaar staan en tevens netjes meeschalen als de viewport wordt vergroot of verkleint. Bootstrap heeft hiervoor het zogeheten grid systeem. Dit grid systeem is verdeeld in 12 delen. Bij de elementen moeten we dus aangeven hoeveel van deze delen het beslaat.

Laten we beginnen om te kijken naar de code :
[prettify class=”html”]

Dimpact

Met mijn ruime ervaring bij een van de eerste dimpact gemeenten ken ik de producten als geen ander.

het nu gaat om het medewerkersportaal, je digitale loket of het inrichten van transacties kun je samen met consulting van mij een situatie neerzetten om trots op te zijn.

Lees verder

Webrichtlijnen

1 januari 2013 was voor veel (semi)overheidsinstellingen d-day om aan niveau 1 te voldoen. Maar hoe nu verder ?

1 januari 2015 lijkt ver weg, maar heb je genoeg tijd om aan niveau 2 te gaan voldoen ?

Een goede reden om via mijn consulting een plan op te zetten om ook hier aan te gaan voldoen.

Lees verder

Processen

Als het nu gaat om het inrichten van je digitale loket of het invoeren van de webrichtlijnen, alles valt en staat met de juiste taken aan de juiste mensen te koppelen.

Door eerst te kijken naar het proces weet je zeker dat zaken veel soepeler gaan lopen.

Lees verder

 

 

 

 

[/prettify]

Ik begin met een container ipv een container-fluid. Daarna een div met row (rij) waarin ik mijn elementen zal gaan plaatsen.

Binnen de row div zie je 3 divs met de class col-md-4.

Het getal 4 geeft aan dat het element 4 grid delen zal gaan bezetten. Daar hebben we er 3 van, wat dus resulteerd in de 12 delen van het grid systeem. Zorg er wel voor dat je niet meer dan 12 delen gaat bezetten want dan zal ontwerp in elkaar klappen.

Voor het getal 4 staat col-md. Dit geeft aan dat in de medium apparaten (≥992px) de elementen naast elkaar komen te staan. Bij kleinere schermen zullen de elementen dan onder elkaar worden weer gegeven. We hebben daarnaast ook beschikking over col-sm, voor kleine schermen en col-xs voor extra kleine schermen.

Als je naar de afbeelding kijkt in de content, zie je dat er de class, img-responsive aan is toegevoegd. Dit zorgt er voor dat de afbeelding de afmeting krijgt van de div waarin het is geplaatst.

We zien ook een btn class is toegevoegd aan een a element. Door deze class te gebruiken kun je elk element er uit laten zien als een button. In dit geval btn-succes wat resuteerd in een groene button. Er zijn ook andere vormen mogelijk zoals bijvoorbeeld btn-info, btn-default, btn-warning and btn-danger.

De Footer
[prettify class=”html”]

[/prettify]

De footer is vergelijkbaar aan de content, hier maar ik ook gebruik van het 12 elementen grid systeem. Ik begin met het footer element, hier voeg ik clearfix aan toe. Om de nare effecten van float tegen te gaan.

Een aantal andere bootstrap classes.

.pre-scrollable : Gebruik je de

 tag dan kun je .pre-scrollable toevoegen om er voor te zorgen dat, als de content te groot is, er scrollbalken verschijnen.

.table : mooie markup om aan een element toe te voegen

.pull-left & .pull-right

Zal de tekst naar de linker danwel rechterkant trekken.

 

Vincent Hofman
Vincent Hofman
Sinds 1998 bezig met het maken van webpagina's , muzikant en levensgenieter. Ik vertaal veel Engelse artikelen in het Nederlands en zoek het web af voor interessante sites en weetjes. Heb sinds 2013 mijn eigen bedrijf voor web-consulting en web-developement

Geef een reactie

%d bloggers liken dit: