Bootstrap
Ett css ramverk.
Last updated
Was this helpful?
Ett css ramverk.
Last updated
Was this helpful?
Version 5 Àr hÀr, sÄ hÀnvisa dit för uppdaterade exempel.
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 , detta har varit pÄ gott och ont. FrÄn version 5 kommer Bootstrap inte lÀngre anvÀnda jQuery.
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.
Det mesta i det hÀr dokumentet Àr hÀmtat ur Bootstraps dokumentation. LÀr dig anvÀnda och söka i den.
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.
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.
En del av Bootstraps stilar hanterar formatteringen av webbsidans innehÄll. FrÄn typsnitt till bilder.
Bootstrap innehÄller ett stort antal fÀrdiga komponenter att anvÀnda pÄ webbsidor. Till exempel
Navigation
Knappar
Karusell
Kort
FormulÀr
Modals
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.
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).
VÀlj en trycksak med en intressant layout och försök Äterskapa den med Bootstrap.
Container klassen finns i flera varianter utifrÄn responsiva-brytpunkter för att passa olika skÀrmstorlekar. LÀs mer om hur det fungerar .
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 .
Listan Àr vÀldigt lÄng sÄ titta pÄ . UtgÄ frÄn vad webbplatsen och designen behöver. Leta upp exempel, kopiera koden och börja redigera.
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 .
Klasser för att kontrollera text. Detta Àr komplement till .
Nedan följer ett modifierat 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.
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 och att börja prova nÄgra komponenter. Det finns Àven en , 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.