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.
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.
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.
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.
<main class="container">
<div class="row pt-3">
<div class="col">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.
Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus
mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean
lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
</div><!-- /.blog-post -->
</div>
</div>
</main>
