Bootstrap
Ett css ramverk.
Detta dokument Àr skrivet utifrÄn version 4.5 av Bootstrap.
Version 5 Àr hÀr, https://getbootstrap.com/ sÄ hÀnvisa dit för uppdaterade exempel.
Vad och varför
Bootstrap Àr enligt dem sjÀlva vÀrldens populÀraste front-end ramverk. Det Àr ett robust system för att snabbt designa sidor, eller prototyper för sidor. Designen landar definitivt i kategorin stilrent och enkelt, med det Àr en bra grund att utgÄ ifrÄn.
Bootstrap Àr Àven byggt med en stor samling agenter (engelska devices) i Ätanke, sÄ det hjÀlper mobilanpassningen av webbsidan.
I version 4 och tidigare har Bootstrap anvÀnt javascript-ramverket jQuery, detta har varit pÄ gott och ont. FrÄn version 5 kommer Bootstrap inte lÀngre anvÀnda jQuery.
jQuery Àr ett otroligt populÀrt javascript-ramverk för att förenkla arbetet med webbsidor.
Hur
Bootstrap finns pÄ https://getbootstrap.com/.
För att inkludera Bootstrap pÄ en webbsida kan du anvÀnda deras startertemplat. Den innehÄller css filen samt det javascript som behövs för att det ska fungera.
Exemplet ovan ger en Hello world templat, stilarna laddas in men ytterst lite av Bootstraps faktiska funktion anvÀnds.
Dokumentation
Det mesta i det hÀr dokumentet Àr hÀmtat ur Bootstraps dokumentation. LÀr dig anvÀnda och söka i den.
InnehÄll, komponenter och verktyg
Styrkan i Bootstrap ligger i att anvÀnda dess komponenter och i att förstÄ hur det fungerar tillsammans. Allt sköts med CSS-klasser. Klasserna anvÀnds tillsammans ur de olika kategorierna för att skapa en layout.
Layout
Bootstrap skapar webbsidans layout med ett rutsystem(engelska grid). Systemet bygger pÄ att anvÀnda behÄllare(engelska containers) som i sin tur kan innehÄlla rader och kolumner. För att skapa en behÄllare sÄ anvÀnds css klassen .container. Containers Àr kÀrnan i systemet.
Container klassen finns i flera varianter utifrÄn responsiva-brytpunkter för att passa olika skÀrmstorlekar. LÀs mer om hur det fungerar hÀr.
Rutsystemet
I Bootstraps containers kan sedan rader och kolumner skapas utifrÄn det inbyggda rutsystemet. Detta Àr starkt kopplat till skrÀmstorlekar och responsiva-brytpunkter, sÄ det Àr viktigt att förstÄ den delen. LÀs mer om detta hÀr.
InnehÄll
En del av Bootstraps stilar hanterar formatteringen av webbsidans innehÄll. FrÄn typsnitt till bilder.
Komponenter
Bootstrap innehÄller ett stort antal fÀrdiga komponenter att anvÀnda pÄ webbsidor. Till exempel
Navigation
Knappar
Karusell
Kort
FormulÀr
Modals
Listan Àr vÀldigt lÄng sÄ titta pÄ dokumentationen. UtgÄ frÄn vad webbplatsen och designen behöver. Leta upp exempel, kopiera koden och börja redigera.
Verktyg
NÀr du börjar bli nÄgot mer förtrogen med hur Bootstrap fungerar sÄ kommer du att upptÀcka alla hjÀlpklasser det innehÄller. Det Àr en av de stora styrkorna med systemet och nÄgot som du med största sannolikhet kommer att börja reproducera nÀr du skriver egen CSS. NÀstan alla webbsidor du skapar kommer att ha behov av klasser för marginal, padding och flexbox. Att dÄ skapa en hjÀlpklass istÀllet för att upprepa samma kod om och om igen Àr god praxis. JÀmför följande exempel.
HjÀlpklasserna anvÀnds sedan dÀr till exempel display flex behövs, eller en gemensam bakgrundsfÀrg ska sÀttas.
I det ovanstÄende exemplet finns css-klasserna med för att illustrera funktionen. Bootstrap har dock dessa hjÀlpklasser med samma namn fÀrdiga att anvÀnda. Som med komponenterna Àr det bÀst att kolla igenom den officiella dokumentationen.
NÄgra av de riktigt anvÀndbara delarna följer:
Bootstrap har ett antal förinstÀllda fÀrger att anvÀnda.
FÄ saker Àr sÄ anvÀndbara som flex-klasserna för att skapa en layout och positionera element.
Allt du behöver för att skapa marginaler(engelska margin) och fyllnad(engelska padding).
Klasser för att kontrollera text. Detta Àr komplement till innehÄlls klasserna för typografi.
Exempel
Nedan följer ett modifierat exempel frÄn Bootstraps sida för att skapa en blogg-post. Notera anvÀndningen av en container, rader(med padding top) och kolumn. De flesta elementen fÄr Bootstraps grund-stilar, men ett par kompletterande klasser har skapats.
Testa
Bootstrap kan i början kÀnnas vÀldigt övervÀldigande pÄ grund av alla dess klasser. Men det finns ett system och det kommer att visa sig desto mer du anvÀnder det.
Att anvÀnda Bootstrap och att förstÄ dess funktion krÀver att du arbeta med systemet och provar det. En bra start Àr just dokumentationen och att börja prova nÄgra komponenter. Det finns Àven en exempelsida, dÀr hittar du ett antal sidor och kombinationer av komponenter för att komma igÄng. De exempel som finns kan Àven inspirera, men försök alltid att förstÄ delarna och var noga med att undersöka om Bootstraps grund har utökats med extra css.
Ăvningsuppgift
VÀlj en trycksak med en intressant layout och försök Äterskapa den med Bootstrap.
Last updated
Was this helpful?