Twitter Bootstrap – En favorit bland ramverken!

Twitter Bootstrap är ett intuitivt och kraftfullt Front-End ramverk, innehållande ett flertal verktyg för att förenkla och standardisera strukturen och uppbyggande av webbplatser och webbapplikationer. Twitter Bootstrap kan beskrivas som en template innehållande snygga fördefinierade element såsom; knappar, formulär, diagram, navigation, ikoner, typografi med mera.

Var kommer Bootstrap ifrån?

Bootstrap är i skrivande stund världens populäraste projekt hos GitHub och för varje dag som går så stöter man på fler webbplatser och applikationer som har Bootstrap som grund. Bootstrap grundades av Mark Otto och Jacob Thornton på Twitter i samband med en satsning att vara genomgående utseende och uppbyggnad i Twitters interna och externa gränssnitt.

Att vara inkonsekvent med struktur i gränssnitt är mycket tidsineffektivt och tidskrävande att samordna om olika personer arbetar med samma projekt. När antalet klasser och variabler i CSS växer utom kontroll finns det risk att utvecklaren skapa nya klasser i onödan pga. den inkonsekventa och personberoende namngivningen och strukturen.

Twitter Bootstraps struktur förhindrar detta ifrån att hända genom att leverera ett heltäckande ramverk som inte bara är logiskt uppbyggt utan också mycket effektivt att använda. Bootstrap har mycket brett stöd bland webbläsare och följer nya standarder för HTML5 och CSS3 till stor omfattning.

Bootstraps struktur

12-kolumn Responsivt Gridsystem

Vill man uttnyttja det 12 kolumniga, responsiva, gränssnittet är den bredaste (omfattande 100% av de 12 kolumnerna) 1170 pixlar. Under 767px i bredd börjar de olika kolumnerna att staplas ovanpå varandra.

Återanvändning av element

Ett av huvudsyftena med Bootstrap är att man inte längre ska behöva definiera element flera gånger. Istället har de utförligt och kompatibelt definierats i förväg i LESS och går med enkelhet att tillämpa överallt och i kombination med andra element. Ett bra exempel är knappar. Om jag vill ha en stor grön knapp som heter ”Klar” skriver jag:

<button class=”btn btn-large btn-primary btn-success” type=”button”>Large button

Här innebär klassen ”btn-large” att respektive ”btn-success” att jag får en stor grön knapp istället för en grå normalstor som hade tillämpats utan de extra klasserna.

JavaScript Plugins

Det finns en mängd jQuery komponenter avsedda och anpassade för Bootstrap. Dessa skapar ett stort mervärde för Bootstrap och gör det till vårt favorit biliotek just nu! Såsom exempelvis Scrollspy = ”spionerar” på IDn och informerar sidans navigering om var man är. Den aktiva delen av sidan du är på ”highlightas” i navigeringen. Exempel (Scrolla och se naven i sidebaren). Modal = Detta är rätt och slätt en motsvarande lightbox med en snygg animering som ni säkerligen känner igen från Twitter om ni är flitiga användare. Se exempel genom att klicka på ”Launch Demo Modal” här.

Skrivet den 11 september av

Markus Sackemark

Skriv en kommentar

  • XHTML: Du kan använda följande taggar: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

1 kommentar

  1. Sulatus skriver:

    Tack! Bra skrivet! I get it now =)