Bootstrap

Hva er Bootstrap?

Bootstrap er et rammeverk som gjør det enklere å sette opp sin egen nettside. Rammeverket ble utviklet av Twitter og lansert i 2011 og er gratis for alle å bruke. Ved hjelp av Bootstrapklasser er det enkelt å sette opp og stilsette nettsider og Bootstrap er derfor ment for å få en enkel og rask start på prosjekter. Rammeverket blir stadig oppdatert og følger teknologiens utvikling. Ettersom de fleste bruker mobilen til å besøke nettsider er det viktig å tilpasse nettsiden til ulike enheter. Bootstrap 4 fokuserer først og fremst på design på mobil og er derfor hjelpsom for å lage en nettsiden med et responsivt design noe som er viktig for søkemotoroptimaliseringen til nettsiden.

Hvordan fungerer Bootstrap?

Bootstrap er et bibliotek som inneholder CSS og JavaScript som er enkelt å bruke direkte i HTML-koden. Disse klassene inneholder en standard layout med farger, fonter, knapper, og andre elementer og kan også bli overskrevet med egen CSS. Bootstrap har et 12 kolonners grid system som gjør at en kan bruke systemet til å definere hvor mye plass ulike elementer skal benytte seg av. Dette systemet gjør det enkelt å fordele innholdet forskjellig på ulike enheter og gir et responsivt design.

Hvordan komme i gang med et Bootstrap prosjekt!

1. Last ned Bootstrap filene til din maskin

Det kan du gjøre ved å gå til Getbootstrap.com . Vær nøye på hvilken versjon av Bootstrap du laster ned for å vite hvilken dokumentasjon du bør forholde deg til. Du kan enten laste ned filene på din egen maskin eller så kan du linke til filene som ligger på nett direkte i dokumentet. Fordelen med å ha filene på egen maskin er at du lett kan jobbe med nettsiden lokalt uten internett, mens fordelen med å bruke filene på nettet er at det vil ta kortere tid å laste nettsiden for andre besøkende.

2. Sett opp et HTML-dokument

Start med en vanlig HTML 5 fil og link deretter Bootstrap filene til dette dokumentet. Bootstrap sin CSS stylesheet skal linkes i Head-elementet og eventuelle JavaScript-filer skal lenkes i slutten av body-elementet. Når det er gjort kan du begynne å bruke de ulike klassene.

3. Lær om de ulike klassene

Bruk dokumentasjonen på Getbootstrap.com til å få en oversikt over hvordan oppsettet fungerer med klassene for breakpoints, container, grid og kolonner. Breakpoints gir mulighet til å styre hvordan nettsiden ser ut på ulike enheter med forskjellige størrelser. Deretter kan du plassere innhold i ulike containere og bruke rader og kolonner til å strukturere innhold.

4. Søk opp elementer underveis

Det er veldig mange klasser og elementer man kan benytte seg av i Bootstrap og derfor er det viktig å kunne søke opp disse etterhvert som man trenger. Dokumentasjonen på Bootstrap sin side forklarer godt hvordan man kommer i gang og oppsettet fungerer. I tillegg finnes det mye dokumentasjon med kodeeksempler på w3schools som det kan være nyttig å ta en titt på. Dette vil gjøre at du ikke trenger å huske alle mulighetene, men heller kan få en god beskrivelse når du ønsker å ta det i bruk.

5. Gi nettsiden din egen stil

Test ut de ulike elementene og bruk din egen CSS til å overskrive Bootstrap sine stiler til å få akkurat det designet du ønsker!

Referanser

• w3schools – Get started
• LinkedIn learning – Bootstrap 4 Essential Training
• Getbootstrap.com – Build fast, responsive sites with Bootstrap

Skrevet: 22.04.2021  –  sist endret 14.12.2021

Lær mer