Bootstrap - Intro

Hvad er bootstrap

Bootstrap er et HTML-Framework der oprindeligt blev udvilket af Twitter, men som er gået hen og blevet et meget aktivt opensource projekt.

Ved hjælp af bootstrap kan man hurtigt udvikle websider og applikationer.

Dette materiale

Dette materiale tager udgangspunkt i dokumentationen fra w3schools.

Der vil blive henvist til nogle sider som der skal arbejdes med og så vil der blive stillet nogle

Bootstrap prototyper

Det er også muligt at downloade en prototyper, som man kan anvende til hurtigt at lave sider med, og den skal vi kigge på når der er forståelse for den underliggende formatering.

Pingendo: http://www.pingendo.com/

Overblik over w3schools

W3schools er den online ressource man har brug for som webudvikler. Når man kommer ind på hovedsiden har den henvisinger til sine tutorials. Gå ind på: http://www.w3schools.com/.

Vælg Tutorials og klik på Learn Bootstrap

De tutorials der skal arbejdes med står ude i venstre side

Din første Bootstrap side

For at prøve din første bootstrap side af skal du scrolle lidt ned på BS HOME siden indtil du når til Bootstrap Example. Her kan du se et eksempel på den måde Bootstrap er opbygget.

Når du klikker på Try it Yourself >>, kommer du ind på en interaktiv side, hvor du kan se resulatet af koden. Læg mærke til at der nu er kommet en Header på med henvisning til CSS- og JavaScriptfiler der skal hentes fra nettet.

Vil du ikke have siden opdelt højre-venstre, kan du klikke på ikonet i øverste linie så det bliver øverst-nederst.

Opbygning af Bootstrap side

En af fordelene ved at arbejde med Bootstrap som framework er, at man hurtigt kan få et effektivt og responsive design af sine hjemmesider. Grunden til at dette kan lade sig gøre er, at der ligger en masse prædefinerede funktionalitet, sådan at man kan kan koncentrere sig om funktionalitet og brugervenlighed.

For at kunne arbejde effektivt med Bootstrap skal man have en forståelse for dets anvendelse af dets grid-system, &<div>-blokke og anvendelse af klasser. Det vil være i fokus i disse udvalgte guides fra w3schools.

Du skal nu arbejde med disse fire kapitler i denne touturial:

Opgave

Lav en simpel side ved hjælp af Bootstrap, hvor du laver en præsentation af dig selv. Du skal anvende 3 kolonner og indsætte billeder af dig selv og noget andet.

Pak denne skabelon ud og brug den: Bootstrap skabelon