Bootstrap (framework)

Bootstrap, oorspronkelijk Twitter Blueprint genaamd, werd ontwikkeld door Mark Otto en Jacob Thornton bij Twitter als een framework om een consistent ontwerp te hebben binnen de interne hulpmiddelen. Voor de komst van Bootstrap werden allerlei bibliotheken gebruikt voor het ontwerp van de interface, waardoor deze inconsistent was en veel onderhoud vroeg. Volgens Twitter-ontwikkelaar Mark Otto:

Na enkele maanden ontwikkeling door een kleine groep begonnen meerdere ontwikkelaars bij Twitter bij te dragen aan het project als onderdeel van Hack Week, een hackathon-achtige week voor het ontwikkelteam van Twitter. Het project werd hernoemd naar Bootstrap, en het kwam uit als een opensourceproject op 15 augustus 2011.[2] Het wordt nog steeds onderhouden door Mark Otto, Jacob Thornton, en een kleine groep van belangrijke ontwikkelaars, maar ook door een grote gemeenschap van bijdragers.[3]

Op 31 januari 2012 werd Bootstrap 2 aangekondigd. In deze release was er een lay-out voor een tabel met 12 kolommen en componenten voor responsive webdesign, naast wijzigingen aan vele van de bestaande componenten.[4] De release van Bootstrap 3 werd aangekondigd op 19 augustus 2013, met een "mobile first"-benadering en een "flat" design.[5]

Bootstrap is compatibel met de laatste versies van Google Chrome, Firefox, Internet Explorer, Opera, en Safari, hoewel sommige van deze webbrowsers niet op alle platformen ondersteund worden.[6]

Bootstrap is snel en schaalbaar, de onderliggende HTML en CSS-bestanden zijn er compact. Dit is in het voordeel van de website of webapplicatie. Bootstrap is een stuk goedkoper dan maatwerk. Omdat Bootstrap een framework is dat bestaat uit standaard componenten, dit levert een behoorlijke tijdwinst op.

Vanaf versie 2.0 ondersteunt het ook responsive webdesign. Dit betekent dat de lay-out van de webpagina's zich dynamisch aanpast aan het gebruikte apparaat (desktop, tablet, smartphone).

Vanaf versie 3.0 is Bootstrap gericht op mobile first.

Bootstrap is open source en beschikbaar via GitHub. Omdat Bootstrap open source is het gemakkelijk om aan te passen. Iedere regel code kan veranderd worden. De bestanden kennen een eenvoudige structuur zodat deze voor iedere ontwikkelaar makkelijk te lezen zijn.

Tenslotte kan Bootstrap geïntegreerd worden met verschillende content managementsystemen zoals Drupal en Joomla. Op deze manier blijft de content in eigen beheer, Bootstrap is de presentatie hiervan.

Voorbeeld van een webpagina met gebruik van Bootstrap

Bootstrap is modulair en bestaat hoofdzakelijk uit een reeks van SASS-stylesheets die de verschillende onderdelen van de toolkit verwezenlijken. Ontwikkelaars kunnen het bootstrap.less-bestand zelf aanpassen en zo kiezen welke onderdelen ze willen gebruiken in hun project.

Het tabelsysteem en responsive design heeft standaard een lay-out met een tabel van 1170 pixels breed. Als alternatief kan de ontwikkelaar kiezen voor een lay-out met variabele breedte. Voor beide gevallen biedt de toolkit vier variaties aan voor verschillende resoluties en apparaattypes.

Bootstrap bevat meerdere JavaScript-componenten in de vorm van jQuery-plug-ins. Deze voorzien in bijkomende elementen voor de gebruikersomgeving, zoals dialoogvensters, tooltips en carrousels. Ze breiden ook de functionaliteit van bestaande elementen uit, zoals bij auto-complete voor invoervelden.

• CSS
• HTML
• JavaScript
• jQuery

1. Bootstrap in A List Apart No. 342. Mark Otto (17 januari 2012).
2. Bootstrap from Twitter. Developer Blog. Twitter (19 augustus 2011).
3. About. Bootstrap.
4. Say hello to Bootstrap 2.0. Developer Blog. Twitter (31 januari 2012).
5. Bootstrap 3 released. The Official Bootstrap Blog (19 augustus 2013).
6. Supported browsers. Bootstrap.

• Bootstrap - Officiële website, met documentatie en downloads
• Bootstrap Blog - De officiële Bootstrap-blog van Mark Otto
• Bootstrap maakt het makkelijk op shareforce.nl