Bootstrap

Har du märkt att väldigt många sidor på Internet påminner om varandra, trots att de inte verkar ha något annat gemensamt?

Skärmbild från 2015-05-17 13:33:08Vi kan ta QGIS som ett tydligt exempel. QGIS är tydligt eftersom man inte gör någon hemlighet av att man använder Bootstrap för att skapa sidan.

Bootstrap är i huvudsak CSS som gör det ”enkelt” att skapa snygga och ”responsiva” webbsidor (förklaring av Wikipedia). En sida, ett innehåll, många plattformar och format. Innehåll som är stilsatt med Bootstrap anpassas automatiskt till den plattform som du använder för att läsa sidan.

Som kuriosa kan nämnas att på http://blog.getbootstrap.com/ så inleder man alla inlägg med en video från 80-talet! Super coolt!

Det finns flera som använder Bootstrap utan att annonsera om det, medan ytterligare andra har en helt egen lösning. Sättet att göra saker liknar dock varandra så pass mycket att det är svårt att avgöra vad som kom först, hönan eller ägget.

Det finns andra liknande ramverk för responsiv design på Internet, men Bootstrap är nog det största.

<!doctype html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- sidan hamnar här -->

</body>
</html>

I princip är det koden ovan du behöver för att använda Bootstrap.

En som talar om att det är HTML5, en som fångar upp olika skärmstorlekar och en hänvisning till stilmallen för Bootstrap. Stilmallen och skripten lite senare kan laddas hem lokalt, eller så kan man hänvisa till en onlineversion.

För en del funktioner krävs även jQuery och lite javaScript, vilket infogas med varsin script-tagg. Observera att det spelar roll i vilken ordning dessa läggs till.

Resten av innehållet i sidan refererar sedan till ”class” i taggarna, för att skapa menyer, knappar, rubrikområden, etc.

Vill du veta mer, så kan du titta in på http://getbootstrap.com

Annonser

Taggar:

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: