Gebruiker:Daniel.sneijers/Twitter Bootstrap

Twitter bootstrap is een gratis front-end framework voor het bouwen van websites en webapplicaties. Bootstrap bevat onder andere op HTML en CSS gebaseerde design templates voor typografie, formulieren, buttons en navigatie. Naast een aantal andere gestandaardiseerde interface elementen bevat het framework ook optionele Javascript extensies.

http://alistapart.com/article/building-twitter-bootstrap

Historie

Bootstrap is ontwikkeld door Mark Otto en Jacob Thornton van Twitter. Het project is opgezet om consistentie tijdens de ontwikkeling van Twitter aan te brengen, aangezien de interface Twitter eerst voornamelijk op verschillende libraries bouwde. Ook het onderhouden van de code moest simpeler worden met Bootstrap.

Mark Otto omschrijft de geboorte van het project als volgt: “... Een super kleine groep ontwikkelaars en ik zijn samengekomen om een nieuwe interne tool te ontwerpen, en zagen de kans om meer te doen. Tijdens dat proces merkten we dat we iets veel substantiëler bouwden dan zomaar een interne tool. Maanden later kwamen we met een vroege versie van Bootstrap als een manier om algemene design patronen binnen het bedrijf te documenteren en te delen.”

Tijdens Twitters eerste Hackweek begon de eerste echte uitzetting van het project. Otto liet wat collega’s zijn hoe Bootstrap het ontwikkeltraject van hun projecten kon versnellen en heeft tientallen teams overtuigd, die nu gretig van het framework gebruik maken.

In Augustus 2011 maakte Twitter het project open-source. Sinds Februari 2012 is Twitter Bootstrap het populairste ontwikkelaarsproject op GitHub.

Structuur

Bootstrap is opgebouwd uit modules die bestaan uit een serie LESS stylesheets die de verschillende componenten van het framework bevatten. Door de LESS stylesheets te gebruiken kunnen de ontwikkelaars binnen Bootstrap onder andere variabelen en functies inzetten, wat het aanpassen van de stylen aanzienlijk versimpeld. Als je het hele pakket download van de developers krijg je een gewone CSS stylesheet die je direct kan gebruiken.

Grid systeem en responsive design

Standaard komt Bootstrap met een 940 pixels brede grid layout. Als je kiest voor het responsive design krijg je een layout met variabele breedtes. De grid bestaat uit rijen, met 12 kolommen per rij. Deze kan je samenvoegen tot bijvoorbeeld een layout met 2 of 3 kolommen.

Voorbeeld:

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

CSS

In de stylesheet zitten verschillende classes die je kunt hergebruiken. Zo zijn er standaard classes voor bijvoorbeeld buttons, formulier elementen en tabellen. De classes zijn vrij strikt gescheiden van elkaar, maar door de classes te combineren wordt het framework juist zo flexibel. Een voorbeeld is de button class, die een grijze knop toevoegd. Combineer deze met de ‘succes button’ class en hij wordt groen. Voeg hier de ‘large button’ class aan toe, en je krijgt een grotere button.

Voorbeeld:

<button class="btn btn-large btn-succes" type="button">Large button</button>

Andere veelgebruikte onderdelen die standaard in de stylesheet staan zijn onder andere: navigatie menu’s, tabbladen, breadcrumbs, paginanummering, labels, thumbnails, waarschuwingsberichten en verschillende geavanceerde typografische opties.

JavaScript plugins

De JavaScript onderdelen in Bootstrap zijn gebaseerd op de jQuery JavaScript library. Verschillende effecten zijn beschikbaar (fade-ins, fade-outs), maar ook toepassingen die de gebruikerservaring verrijken. Enkele voorbeelden zijn: dropdown menu’s, tooltips, alerts, collapsing menu’s, een caroussel, auto-complete en meescrollende sidebar menu’s.

Voor- en nadelen

Voordelen

Het grootste voordeel van het gebruiken van Bootstrap is de snelheid waarmee je een fatsoenlijke site op kan zetten. Bijna alle veelgebruikte elementen uit een website zijn standaard op te roepen met de CSS classes, die hoef je niet meer zelf te schrijven.

Een ander veelgenoemd voordeel is consistentie. Door de getoetste typografie en de standaard marges tussen elementen ziet je ontwerp er snel strak en professioneel uit. Het pakket is ook makkelijk aan te passen naar wens, en redelijk lichtgewicht.

Een groot gewin bij het gebruik van Bootstrap is cross-browser compatibiliteit. Omdat het framework door goede programmeurs is gebouwd en getest kan je er zeker van zijn dat alle hedendaagse browsers volledig ondersteund worden.

Nadelen

Een nadeel van Bootstrap is dat het semantisch niet altijd even correct is. Zo wordt voor het gebruik van iconen in buttons de HTML-tag gebruikt. Deze tag is eigenlijk gereserveerd voor text die in met “alternatieve stem” gelezen wordt, vaak in italics.

Ook wordt geklaagd over de eenheidsworst die Bootstrap veroorzaakt. Hoewel Bootstrap heel flexibel is en makkelijk aan te passen is, lijken alle sites die het framework gebruiken in zekere mate op elkaar.

Bronnen, noten en/of referenties