Bootstrap

Det mest använda CSS-ramverket i världen. Nu kommer du få veta varför!

Vad är Bootstrap?

Bootstrap är ett gratis ramverk för webben som används för att designa responsova webbplatser och applikationer. Ramverket använder sig av HTML-, CSS- och (i vissa fall) Javascript-baserad design för att göra webbplatser mer lättdesignade. Det finns färdiga mallar för alla möjliga element som: formulär, knappar, navigering och typografi för att nämna några. [2]

Bootstrap släpptes för första gången 2011 och är det näst mest betygsatta projektet på Github enligt [1] och är minst sagt omfattande och stödjer alla de senaste versionerna av Google Chrome, Firefox, Internet Explorer, Opera och Safari. Sedan version 2.0 så stödjer Bootstrap responsiv webbdesign och sedan version 3.0 så har ramverket anammat "Mobile-first"-design som filosofi och har det responsiva som utgångspunkt.[1] och [2]

Användande av bootstrap

Som så mycket annat inom programmeringsvärlden kan Bootstrap göras så svårt du själv vill. Man kan nöja sig med att bara skrapa lite på ytan för att få tillgång till de enklaste delarna eller så sätter man sig in i dokumentationen och gör det svårare för sig själv. Antingen väljer man att använda sig av Bootstraps eget externa CDN eller så laddar man ner filerna och sparar det lokalt för att använda sig av filerna precis som vanligt vid webbutveckling. [2]

Efter att källkodsfilerna eller CDN är länkat som det ska så är det bara att börja använda sig av de klasser Bootstrap tillhandahåller där man bl.a. kan bestämma kolumnbredd likt denna övre del av webbplatsen eller som den nedre med fler olika kolumner och dess bredd. Allt detta utan att behöva att själv sitta och krångla med marginaler, bredder, höjder och paddings i sitt dokument.

Alla delar finns sökbara på deras webbplats och är relativt enkla att komma igång med. För att hitta all dokumentation och hur man kommer igång, finns en mer genomgående genomgång om man klickar på länken nedan.

Klicka här för mer info

Content

Denna del bygger på att förklara hur utvecklarna använt "Normalize" för att återställa all den styling som finns från början i HTML-element. Exempelvis i listor och i tabeller. All styling görs endast med hjälp av klasser i Bootstrap. De förklarar också hur olika skrivstilar, höjder samt exempelvis boxar stylas om för att få önskvärda resultat i så hög utsträckning som möjligt.

Läs mer

Components

I denna del behandlas hur man designar alla de olika komponenter (passande va?) som en webbplats består av och som ska göras för användaren som besöker webbplatsen. Det behandlar allt från knappar och dess olika färger till hur du lägger in varnings- och bekräftelsemeddelanden.

Läs mer

Utilities

Utilities eller "nödvändigheter" på svenska är den del av de grundläggande rubrikerna där det tas upp hur man mer stylar eller anpassar tidigare nämnda komponenter. Här stylas linjer, bilder, knappar positioner eller liknande.

Läs mer

Layout

I denna kategorin hittas alternativ för att lägga grunderna för din webbplats så som wrapping runt containers, hur du ska tänka och koda med grid-systemet samt även de responsiva användbara klasserna. Layout-delen av webbplatsen är alltså endast en sorts första "smakprov" av hur enkelt det kan vara vilket jag tycker är smart för att locka användare.

Läs mer

För- och nackdelar med Bootstrap samt egen reflektion

Eftersom jag aldrig använt Bootstrap under föregående projekt så kändes det som att det skulle bli kul att äntligen ta sig tid att sätta sig in lite mer i det. Mitt första intryck under Mattias ramverk-föreläsning var att "varför har jag inte testat detta tidigare?" För det verkade så himla lätt på den genomgången. Så var ju inte fallet märkte jag. Även om grund-griden inte var så svår att förstå så var alla detaljerna rentav ett härke att förstå innan jag fick det rätt. Framför allt innan jag insåg att man kunde och nästan behövde ändra i viss CSS för att få element att bli bra.

Överlag tycker jag ändå att det här är ett bra ramverk för att snabbt kunna skissa upp en webbplats för att visa för någon hur det kan komma att se ut med en färdig webbplats. Men sen kommer tillägget att alla sidor som använt sig av Bootstrap kommer att se i princip exakt likadana ut. Jag skulle absolut kunna tänka mig använda ramverk i framtiden.

Om man ska tro [3] så finns det en del fördelar och nackdelar med Bootstrap och för att korta ner punkterna så sammanfattas de här:

Fördelar:

  • Det sparar tid i exempelvis större projekt där du kanske glömer bort exakt hur du tänkte i ditt CSS-kodande.
  • Bootstrap är kompatibelt med flera olika webbläsare vilket undviker kompatibilitetsproblem som att en webbplats bara ser bra ut i en webbläsare.
  • Det hjälper till att följa "best practices" alltså så som en webblats ska kodas.
  • Man slipper att använda jQuery i någon större utsträckning vilket, enligt författaren, ska underlätta.
  • Eftersom det är så använt i hög utsträckning som det är så är det användbart när man söker jobb.

Nackdelar

  • Man måste skapa egen CSS för att overrida den kod som man själva inte tycker är bra.
  • Enformighet, alla sidor designade med Bootstrap kommer se likadana ut.
  • Inlärningstiden tar lite tid innan man får ett grepp om hur man ska gå till väga för att det ska bli lättarbetat.
  • Som summering tas även upp att eftersom en webbutvecklare oftast jobbar per timme så är ramverk som Bootstrap användbara för att visa för företaget/kunden att man inte tar upp onödig tid i att sitta och försöka placera element på petigaste vis.

Källor

  1. Wikipedia - Bootstrap
  2. Bootstrap startsida
  3. För- och nackdelar med Bootstrap.