Twitter Bootstrap

July 15th, 2012 | 3 min read | CSS, CSS3, HTML5, jQuery, Twitter, Web

Toen ik enkele maanden geleden met mijn stage bezig was heb ik een enorm handige UI toolkit/framework leren kennen, namelijk Twitter Bootstrap.

Net zoals ieder UI framework bevat Bootstrap de basics zoals:

  • Een grid systeem,
  • Een thema met alles erop en eraan (buttons, form elementen, extra’s, …).

Maar Bootstrap bevat echt veel meer dan alleen dat. Zoals je ondertussen waarschijnlijk had kunnen merken, is Bootstrap gemaakt door enkele mensen van Twitter (@mdo en @fat).
Vanaf dat je het framework gebruikt zal je dit ook snel merken, de Twitter kleuren, stijlen en kenmerken komen heel snel terug in dit framework.  Dit geeft als extra voordeel dat het ook enorm modern en aantrekkelijk wordt.

Maar natuurlijk kan je ook alles aanpassen naar eigen keuze. Je kan kiezen voor de standaard kleuren, maar er zijn ondertussen ook al enkele thema’s te downloaden (gratis of niet). Zelf kan je ook snel enkele aanpassingen maken door met LESS te spelen, of online enkele dingen te veranderen via de Customize optie. Mijn portfolio bijvoorbeeld is gemaakt met, ja hoor, Twitter Bootstrap. Ook hier op mijn blog gebruik ik enkele dingen uit het Bootstrap framework.

Responsive design

Ondertussen zal iedereen wel al een beeld hebben van wat Bootstrap ongeveer is. Maar de mogelijkheden zijn echt enorm. Één van de zaken die dit framework zo modern maakt ten opzichte van de rest is de mogelijkheid tot een responsive website.

Dit wilt zeggen dat jouw website te bekijken is op elk device en dat de lay-out zich daar naar aanpast. Bekijk je de website vanaf je tablet,  geen probleem, de margins worden iets smaller. Bekijk je de website vanaf je smartphone? Alle elementen zullen totaal anders geplaatst worden en het header menu wordt opklapbaar.

Probeer het maar eens uit in je browser door je venster steeds smaller en smaller te maken.

Ontworpen om snel te zijn

Het klinkt misschien enorm cliché, maar toch is het zo dat Bootstrap des ondanks de vele files (CSS, responsive CSS, verschillende plugins, afbeeldingen, …) enorm snel laadt. Zo zullen alle icons op één map terecht komen (een sprite), kan je de CSS minimized downloaden en kan je alle opties aan- of uitvinken die je zelf wenst.

Een waaier aan plugins

Naast CSS zit er ook enorm veel JavaScript/jQuery achter Bootstrap. Het mooie is dat de meest populaire plugins nu dus ook een Bootstrap versie hebben die perfect aansluit op het thema en de idealen van Bootstrap. Enkele voorbeelden van zo’n plugins zijn de carousel, modals, tooltips, … .

Zelfs als je niet genoeg hebt aan deze plugins bestaan tegenwoordig ook plugins die door anderen geschreven zijn zoals bijvoorbeeld een datepicker, maar er bestaat ook een Bootstrap thema voor jQuery UI waardoor je dus alle plugins die beschikbaar zijn in dit framework ook rechtstreeks kan integreren met jouw Bootstrap website.

Twitter Bootstrap

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.