Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Transkript

1 2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

2 I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan man bygger en simpel og responsive hjemmeside med det. Men hvad er Bootstrap egentlig? Bootstrap er det mest populære HTML, CSS og JS framework på internettet. Et framework er et system af foruddefineret regler som der kan implementeres i dit arbejde. Når man downloader Bootstrap henter man faktisk nogle dokumenter, hvor en helt masse arbejde er gjort for os allerede. Det er blandt andet en helt masse CSS regler som vi smider på vores DIV tags i HTML en, som der så sørger for sidens layout bliver ordentlig, og samtidig bliver den responsive. Sådan begynder vi Start med at sætte din hjemmeside op som normalt, i htdocs eller ikke, det spiller ikke rigtigt nogen rolle fordi vi skal ikke bruge PHP eller C#. Gå ind på getbootstrap.com, og gå ind under Getting started. Vælg den første mulighed inde under download, altså det helt basiske Bootstrap. Udpak fra zip filen, og placer filerne i din hjemmeside mappe (i dette tilfælde hedder min side bare bootstrap) så de ligger i din mappe således:

3 Kolonne systemet Vi er klar til at begynde, men inden vi gør det, så er det vigtigt at forstå kolonne systemet. Bootstraps layout regler er baseret på et system bygget af 12 kolonner. Enhver ting du laver med bootstrap har et sæt regler der sørger for, at det kan deles op i 12 lige store dele. Hvis man nu for eksempel bruger deres container class på en div, så vil den div få en bredde på 970px, og margin auto. Ideen er, at alt ens indhold ikke kommer til at overskride 970px, og det ligger pænt i midten af siden, en opsætning som du nok har set på mange hjemmesider. Man kan så begynde at lave elementer som der er baseret på kolonne systemet inde i sin container. Her er der nogle eksempler på alle kolonne classes, og hvordan de er lavet i HTML en:

4 For hver række af kasser skal der være en div med et row tag, hvor man så placerer sine col classes, altså kolonner. I den første row i billedet er der en helt masse små kasser. De har alle en class der hedder col-md-1. Det betyder at de fylder 1 ud af 12 på den div som deres row ligger i. I den næste row er der 2 div er hvor den ene har en col class på 8 og den anden på 4. Det vil jo så betyde, at der kommer til at være 2 kasser, der tilsammen fylder hele containeren ud, fordi deres værdi tilsammen svarer til 12. Husk at kolonnerne kun får bredde, og ikke højde. Højden på ens elementer definerer man selv. Du undrer dig måske over hvad md betyder i de forskellige classes. Det står for Medium Device, og dette er hvad Bootstrap bruger til at gøre ting responsive. Col-xs (extra small devices) er for telefoner, col-sm (small devices) er for tablets, col-md (medium devices) og col-lg (large devices) er for ekstra store computerskærme. En div kan have flere col classes med forskellige mål. Her er et eksempel: <div class= col-md-6 col-xs-12 ></div> Dette fortæller din browser, at denne div, vil fylde halvdelen af sin row på en normal computer skærm (col-md-6), og fylde hele sin row på en telefon (col-xs-12). Størrelsen af div en er nu responsive, og vil ændre sig i forhold til hvilken skærm den befinder sig på. Lad os komme i gang med at bruge det. Gå ind på og kopier koden til din index fil. Dette er et template vi vil bruge som udgangspunkt. Hvis du kigger i headet hvor vi linker til stylesheets kan du se at vi linker til en custom CSS fil.

5 Den skal bruges til alt det CSS vi selv laver. Det er derfor vigtigt at det bliver linket EFTER Bootstrap, så de vigtige regler fra Bootstrap er læst først. Når det er gjort kan vi begynde at lave indhold til siden. Lad os lave 3 lige store kasser: Start med at lave en row inde i containeren. Inde i den row skal vi have tre col-md-4. Men vi har ikke lavet kasserne endnu. Vi har bare lavet beholderne til dem. Kasserne skal laves med div er inde i vores cols.

6 Vi skal nu lave kasserne inde i deres beholdere, altså col-md-4erne. Lav en div med classen box i hver af dem. Definer box classen i custom CSS dokumentet. Giv den en højde på 100 px og lidt margin top så kasserne ikke kommer til at ligge lige op ad nav en. Giv den en farve så man kan se dem også. Nu har du dine kasser. Bootstrap sørger for at de er responsive hvis du laver browservinduet mindre. Når du ikke har sagt at de skal opføre sig anderledes på andre devices, så vil kasserne bare ligge under hinanden når der ikke er plads til dem. Det ser sådan her ud. Men hvad nu hvis man gerne vil have at de er ved siden af hinanden, selv på mindre devices? Det eneste man skal gøre er at give diverne nogle ekstra col classes der svarer til det andet device. Du gør man sådan her:

7 Man smider bare en extra class på diven. Det der egentlig står nu er: Hvis hjemmesiden vises på en normal computer skærm, så skal der være 3 lige store kasser. Hvis det er på en mobil, så skal der være 3 kasser hvor den første er større end de 2 sidste, og de 2 sidste er lige store. Her kan du se hvordan den ser ud på mobiler, med de nye classes: Du har nu lært hvordan Bootstraps kolonne system fungerer, og hvordan du implementerer det til at lave elementer responsive, i grove træk.