Bootstrap

Leseenheid

Moeilijkheidsgraad

2

Bootstrap is een geheel van HTML, CSS en Javascript dat als een pakket wordt aangeboden. Je kunt er alles mee doen wat een moderne, responsive site nodig heeft: kolommen, afbeeldingen, slideshows, knoppen, menu's,... Je moet juist weten hoe je de classes en scripten aanspreekt. Maar er is meer... In plaats van het pakket te downloaden en te installeren op jouw site, kan je het ook van een externe site gaan halen. Omdat deze site zwaar belast zou worden door de grote aantallen gebruikers is er CDN. (content delivery network of content distribution network). Het bootstrap pakket is op vele lokale servers te halen. Omdat er ook veel sites gebruik van maken zit bootstrap waarschijnlijk ook in je cache van je browser. Zo win je aan snelheid. Je kunt ook natuurlijk bootstrap installeren, maar dan mis je de updates en nieuwe zaken die er worden aan toegevoegd. Wij gaan voor de CDN. Links zie je de normale server instellingen, rechts de CDN aanpak.

Omdat we het warm water geen twee keer willen uitvinden, maken we gebruik van de goede handleiding op W3school. We overlopen de handleiding en kopiƫren de interessante code op onze eigen website.

Daarvoor activeren we de PHP module die in de kern zit ingebouwd. Van dan af kunnen we dit selecteren. Full HTML werkt slechts 1 keer. Daarna filtert ze de scripts eruit!

Bekijk aandachtig deze code. Zie je waar de css en de js bestanden zitten? Kopieer

en plak in de body. (ik heb een afzonderlijk inhoudstypeaangemaakt met slechts een body veld.)

Zo gaan we de meeste items verkennen. Hieronder de moeilijkste.. Het kolomsysteem telt 12 kolommen. Al naar gelang xs, sm, lg (tablet, phone, pc) kan je een andere instelling kiezen. Wij kennen dit al van het Adaptive theme..

Er zijn ook kant en klare afbeeldings CSS'sen..hier thumbnail.

En circle

Je kunt ook een typisch blikvanger instellen. Het spreekt voor zich dat hier de kleur kan ingesteld worden.

Menustructuren..

Zelfs symbolen werden ingebouwd.

Een slideshow. Deze maakt gebruik van de meegeleverde javascript.

Conclusie: Bootstrap is interessant voor mensen die zelf een thema willen maken. Er bestaat ook een Drupal Bootstrap theme die die reeds voor een deel heeft ingebed.