Twitter Bootstrap

Twitter bootstrap downloaden

Twitter Bootstrap is een responsief HTML5-framework met de nodige JavaScript-effecten aan boord als dropdown, carousel en ander lekkers. De CSS-code geeft vormgeving aan formulieren, knoppen, navigatie en tekst.
Alternatieven voor Bootstrap zijn Skeleton,Foundation en 960 Grid System.

Bekijk een voorbeeld.

Meer weten over Bootstrap? Bezoek onze cursus

Ga naar http://getbootstrap.com en druk op Download Bootstrap

De bestandstructuur:

Bovenstaande code maakt HTML5 mogelijk en zorgt voor koppeling met CSS en jQuery. De viewport zorgt dat de pagina ook geschikt is voor mobiele apparaten. Via html5shiv is de site ook cross-browsercompatibel. Met andere woorden, HTML5-specifieke code wordt begrepen door oudere browsers als IE7 en IE8.

Je kan nu verschillende richtingen uit. Indien je kiest voor een website met slideshow, kan je best starten met de template “carousel”. Wij leggen aan de hand van dit voorbeeld alles uit.

Van start met Twitter bootstrap

In de map Examples vind je "carousel" terug. Je kan hierin index.html openen en bewerken.

We starten echter liever vanaf nul, met een lege pagina.

Maak een lege HTML-pagina en sla op (in de root). Voeg deze code toe:

Kopieer de code hier: http://getbootstrap.com/getting-started/#template

Maak een nieuw CSS-bestand, sla op als stijl.css (in dist/css).

Aangezien we met de carousel aan de slag gaan, voegen we nog een CSS-koppeling toe:

Kopieer de code hier: http://getbootstrap.com/components/#navbar

De titel van de website komt in de navbar-brand.

Er wordt gebruik gemaakt van een opsomming (ul). Via diverse li-tags kan je knoppen aanmaken.

Een dropdown wordt gemaakt door een ul te starten in een li van een bestaande ul. Hierbij wordt ook nog de klasse dropdown meegegeven. Via de klasse caret, wordt een pijltje getoond. Deze wordt aan een tag als b gegeven.

Een slideshow (carousel)

We maken nu een slideshow, met 3 afbeeldingen en daarop tekst.

De code van de carousel vindt u hier: http://getbootstrap.com/javascript/#carousel

Via de ol-tag worden de navigatieknoppen (bolletjes) in de slideshow gemaakt.

In diverse divs met klasse item worden afbeeldingen (slides) geplaatst met tekst en knop.

Onderaan sluiten we de code af met de pijltjes (glyphion) waarmee men naar links/rechts kan gaan.

De inhoud responsief maken

Frameworks zijn responsive, voorkomen telwerk, moeilijke CSS-code en vereenvoudigen het telwerk door met kolommen te werken. Bij Bootstrap is het maximum 12 kolommen. Via klassen .col-xs-,.col-sm-, .col-md en .col-lg- geef je een breedte aan een div. In onderstaand schema zie je waarvoor de klassen staan.

Zo kan je via .col-xs-6 een div 6 kolommen breed maken, geschikt voor de kleinste apparaten (smartphone).

Via .col-lg-3 daarentegen kan je een div 3 kolommen breed maken, geschikt voor de grootste apparaten (desktop). Een kolom is dan concreet 3 x 95 px breed.

Xs, sm, md en lg zeggen voor welk apparaat ze geschikt zijn. De getallen (met maximum van 12) geven een breedte. Zolang je divs naast mekaar zet met som kleiner dan 12, staan de divs naast mekaar.

Voorbeeld:
We willen afbeelding en tekst naast mekaar plaatsen:

Rond alle inhoudsdivs plaats je best een div met klasse container. 2 (of meer) divs naast mekaar, kan je omringen met een div met klasse row.
Het resultaat:

Zo, je kan nu een responsieve website met slideshow en uitklapmenu bouwen, via Twitter Bootstrap. Meer weten?

Meer weten over Bootstrap? Bezoek onze cursus

Meer van dit lekkers

BEKIJK ALLE TUTORIALS!

Sharing is caring

Iets bijgeleerd? Deel deze tutorial!

U bent niet alleen

deze pagina
totaal

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com