Bootstrap starten

Bootstrap is een CSS framework. Maar wat is een framework? Een framework is een pakket gestandaardiseerde code (HTML, CSS, Javascript etc) welke samen gebruikt kunnen worden om een website mee te bouwen. Afhankelijk van het type framework wat je gebruikt heb je verschillende soorten code. Bootstrap gebruikt CSS en Javascript. Het levert ook standaard HTML pagina’s of snippets (stukjes code) aan maar je kunt ook alle zelf typen. Bootstrap is responsive.

 

Opdrachten

1. Maak een holy grail lay-out

Maak een website volgens de holy grail lay-out (header, footer, two column layout). Ontwerp doet er nog niet zo veel toe, gebruik gewoon gekleurde vlakken. Het gaat er om dat je vertrouwt raakt met Bootstrap.

 

2. Pas een template aan

Zoek een template of een thema voor Bootstrap. Download dit en pas het aan. Het onderwerp van je website is vrij.

 

Theorie

Het grote voordeel van werken met Bootstrap is tijdwinst. Mits je vertrouwd bent met de structuur. Je hoeft met Bootstrap namelijk niet alles zelf te doen. Je download een HTML, een CSS en een javascript file en op basis van een standaard grid bouw je dan je website. Je moet dan wel aangeven hoe jouw div-elementen zich over dit grid uitspreiden. En je moet je elementen stylen qua vormgeving. Het duurt meestal wel even voordat je vertrouwd bent met alle CSS classes van Bootstrap. Mocht je het allemaal nog sneller willen laten verlopen dan kun je templates downloaden. Ook hiervoor geldt: je moet wel de CSS van Bootstrap snappen.

 

Video’tje kijken?

In het Engels (met een accent) maar wel goed te volgen is een serie van Coder’s Guide.
De eerste tutorial is algemene uitleg over Bootstrap, daarna kun je nog 3 andere tutorials volgen.

 

Links

Bootstrap kun je downloaden via http://getbootstrap.com
Wil je je menu stylen maar zie je op tegen het uitpluizen van de code? Kijk dan eens op de website Bootstrap Design Tools.

 

Bootstrap downloaden en installeren

Download Bootstrap door op de grote witte knop te klikken.

Download Bootstrap door op de grote witte knop te klikken.

 

Wanneer je Bootstrap gaat downloaden dan zou ik je aanraden om in de eerste instantie de linker optie te kiezen (“Bootstrap”), de overige opties vereisen meer kennis en software. Het pakketje wat je download bevat een css-folder, een js-folder en een font-folder. Geen HTML.

Een andere optie is om te verwijzen naar Bootstrap zodat je het niet zelf hoeft te downloaden. De link vind je onder Bootstrap CDN. Daar staan twee link tags en een script tag. De bovenste en onderste heb je nodig. De middelste is optioneel. Kopieer deze links in de head van je pagina.

Download Bootstrap

Kies hier “Bootstrap” waarbij je de files download en op je eigen server moet uploaden. Of kies hier “Bootstrap CDN” waarbij je links opneemt naar Bootstap en deze vanaf een andere server draait.

 

Theorie

Lay-out

Bootstrap gaat uit van een grid lay-out van 12 kolommen. Bootstrap is responsive, het past zich aan aan de verschillende scherm formaten. De kolommen in het grid schalen dan automatisch mee. Ongeacht de schermbreedte, die 12 kolommen blijven bestaan.

Bootstrap grid

Bootstrap grid bij verschillende schermbreedtes

 

In dit grid geef je eerst de rijen aan. In deze rijen maak je dan weer kolommen. Dit alles gebeurt met CSS. Wanneer je een header – footer – two column lay-out maakt dan is de header één rij, het content gedeelte één rij en de footer één rij.

Met behulp van classes geef je aan of een kolom bijvoorbeeld 4, 6 of 12 kolommen breed moet zijn EN bij welke schermbreedte dit moet gebeuren. In een kolom kun je weer een nieuwe rij maken zodat je op die manier je ontwerp kunt finetunen. Een element kan large, medium of small zijn.

  • Large (lg): tot1200 pixels zal het element beeldvullend zijn, daarna zal het verkleinen afhankelijk van het getal wat je aan de class hebt toegevoegd.
  • Medium (md): tot 992 pixels zal het element beeldvullend zijn, daarna zal het verkleinen afhankelijk van het getal wat je aan de class hebt toegevoegd.
  • Small (sm): het element zal klein blijven tot 768, daarna zal het beeldvullend worden.

 

Bijvoorbeeld:
<div class="row">
<div class="col-sm-6">Hallo allemaal</div>
</div>

In het voorbeeldje hierboven is een rij gemaakt met daarin 1 div van 6 kolommen breed (“col-sm-6″). Even ter herinnering: een element kan meerdere classes aan zich verbonden hebben. Een code zoals hieronder kan prima:

<div class="row">
<div class="welkomstTekst col-sm-6 col-md-3 col-lg-2">Hallo allemaal</div>
</div>

Hierbij is  div.welkomstTekst met de tekst “Hallo allemaal’ op een klein scherm 6 kolommen breed (en dus zo  breed als de helft van het scherm), bij een scherm tussen de 768 en 992 pixels is div.welkomstTekst 3 kolommen breed (en dus 1/3 e breed van het scherm) en op een scherm breder tussen 992 en 1200 pixels is div.welkomstTekst 2 kolommen breed (en dus 1/6e breed van het scherm).

 

screen groter dan 1198

Het scherm is groter dan 1200 pixels

 

Het scherm is (bijna) 1200 pixels

Het scherm is (bijna) 1200 pixels

 

Het scherm is (bijna) 992 pixels

Het scherm is (bijna) 992 pixels

 

Het scherm is (bijna) 768 pixels

Het scherm is (bijna) 768 pixels

 

Classes combineren

Stel, ik heb een rij met 3 div-elementen. Op een klein scherm mag er 1 div-element breed worden maar de andere 2 moeten altijd naast elkaar blijven.
Hoe doe je dat dan?

<div class="row">
<div class="darkBG col-sm-6 col-xs-12">Small column 6 (or 12)</div>
<div class="darkBG col-sm-3 col-xs-6">Small column 3 (or 6)</div>
<div class="darkBG col-sm-3 col-xs-6">Small column 3 (or 6)</div>
</div>

In het stukje <div class=”darkBG col-sm-6 col-xs-12″> staat een extra specificatie col-xs-12. Wat er nu gebeurt is dat de kolom in principe small-6 is TENZIJ het scherm extra small wordt, dan springt de kolom qua CSS over op xs-12.

 

Kolommen veranderen van breedte bij een XS schermbreedte.

Kolommen veranderen van breedte bij een XS schermbreedte.

 

Het mag duidelijk zijn dat het nu echt essentieel is dat je alle 3 je ontwerpen tegelijkertijd maakt. Even snel later iets toevoegen heeft grote gevolgen voor de vormgeving en functionaliteit. Teken dus wireframes voorafgaand aan je code!