Bootstrap er genialt!

JBootstrap-3eg jobber mye med webdesign, og jeg er blitt veldig glad i bootstrap. Det er en komplett løsning, eller rammeverk, for oss som setter opp nettsteder. Spesielt mobilvennlige hjemmesider. I stedet for å sette opp alt manuelt, skrive mye CSS og HTML fra bunnen av, så finnes det nå en løsning for oss designere.

Bootstrap gjør det enklere å lage nettside

Hovedprinsippet er at man setter opp container.

I container kan man sette opp en eller flere rader.

I en rad kan man sette opp kolonner. Oversiktlig med andre ord.

Man kan selvfølgelig sette opp nye kolonner inne i en “rute”.

Dermed får man veldig mange valgmuligheter. I tillegg finnes det løsninger of “offset”, og også at kolonnene skal ha forskjellige bredder når de vises på ulike enheter.

Container: <div class=”container”>

Dette er en “beholder”. I denne kan man putte en eller flere rader. Fordelen med dette er at man kan styre containerens bredde og andre egenskaper via CSS, noe som også gjøres.

F.eks er det vanlig at en container får ulike bredder på ulike skjermbredder. Og det er lett å manipulere når man trenger det.

En container kan også settes flytende ved å bruke -fluid: <div class=”container-fluid”>

Rader: <div class=”row”>

Rader brukes for å skille rader fra hverandre. Mange ganger ønsker man ikke å blande elementer i hverandre slik man gjerne kan med CSS. Derfor brukes rader for å gjøre klare skiller mellom radene nedover nettsiden.

Rader kan også være “fluid”.

Kolonner: <div class=”col-sm-4″>

En kolonne kan deles opp i 12.-deler. Så en sides bredde er 100%. En kolonne kan være hhv. 1/12 eller 2/12 eller x/12 bred. 12 av 12 er selvfølgelig 100% bredde.

Man kan blande sammen så mange kolonnebredder man vil. Men summen av en totalbredde kan aldri være større enn 12/ 12. Da vil man begynne på ny rad.

Det smarte er at man kan angi forskjelige bredder til forskjellige enheter.

F.eks kan man angi class=”col-sm-6 col-xs-12″ i samme div. Da vil man få en 6/12 bredde på store skjermer, og 12/12 bredde (altså full bredde) på små skjermer. Akkurat det er diggbart!

Her er mer informasjon om dette:

PS: En av de plassene man kan lære en del om bootstrap ved å sette opp en nettside er på EasyEdit. Der er en enkel video som viser hvordan lage en nettside helt enkelt.  Ved å gå til GetBootstrap så får du en rask oversikt over hva bootstrap kan tilby deg.

Jeg liker å leke meg ved å hente elementer fra getbootstrap.com inn i EasyEdit-kontoen min. Veldig moro!

Lykke til med bootstrap. Det er verdt å undersøke!

  • Ramona

En liten humorsnutt før jeg får kommet i gang

Jeg så denne, og den fikk jeg lyst til å dele med deg.

Er du en “ekspert”, eller kan du levere alt det din kunde sier? Det er av og til et viktig spørsmål. Leverer man det faglig beste – eller det kunden bestiller?