Hur fungerar Bootstrap?

Bootstrap är gjort av twitter, därav twitter bootstrap. Jag antar att du redan kollat på http://getbootstrap.com/ för att se vilka klasser och dylikt som finns att tillgå? Spendera lite tid med att använda Chromes (eller FF:s eller Safaris) developer tools för att inspektera källkoden och se hur klasser appliceras på element.

::before och ::after är så kallade pseudo-element - i praktiken innebär det att de inte existerar i DOM:en (http://sv.wikipedia.org/wiki/Document_Object_Model) men att man ändå kan placera saker före och efter. För att något ska dykas upp måste du sätta ett content-attribut i din css:

p {
font-size: 100%;
}

p::before {
content: 'Hejsan';
color: red;
}

p::after {
content: 'Hej då';
color: green;
}

Värt att hålla i bakhuvudet är att bootstrap använder sig av en pre-processor vid namn less (http://lesscss.org/) som underlättar utveckling av CSS - det är dock väldigt viktigt att förstå CSS innan man ger sig in i preprocessorvärlden då det i slutändan kompileras till standard-css.

Som personen ovanför mig sa så är Bootstrap skapat av Twitter, och därför kallas det ibland för Twitter Bootstrap.

Den stora tanken med Bootstrap är att kunna erbjuda utvecklare färdiga CSS och JavaScript "moduler" (färdig kod redo att applicera i form av element i sidan , stiliserade knappar t ex), och detta ska i sin tur hjälpa utvecklare att spara in på tid som annars skulle användas för att skriva CSS/JavaScript-kod. En annan fördel med att använda sig av Bootstrap är just att sidor byggda med det blir "responsiva", vilket kortfattat innebär att sidans bredd anpassas efter användarens skärm (vilket kan vara väldigt bra om användaren kollar på sidan via en mobiltelefon t ex).

En hel del dokumentation kan hittas på deras sida (http://getbootstrap.com/getting-started/) om du vill komma igång med det. Bootstrap har ju såklart några få nackdelar, bland annat att det kan bli svårt att få egenskriven CSS-kod att funka ihop med resten av sidan, såväl som att sidans "unikhet" försvinner till en viss del.

Grejen med Bootstrap och andra ramverk (Zurb Foundation, Skeleton, osv) är att du får just ett ramverk att bygga kring. Sedan är det en bonus att de flesta ramverken har implementerat egen stil och JS-funktioner.

Med ramverk menar jag att du bygger efter ett responsivt "grid" där varje modul är en kolumn som ligger i en rad (row).

http://getbootstrap.com/css/#grid

Detta grid beteer sig olika när man skalar ner beroende på hur du byggt. Exempelvis i lekmanna-termer kan man ställa in vilka moduler som ska lägga sig under varandra eller bara ska skala ner och fortfarande ligga bredvid varandra. Man kan även ställa in så att vissa moduler ska byta plats under en viss brytpunkt.

Läs all dokumentation på deras hemsida och testa dig fram så kommer du snart att förstå.

Jag personligen tycker dock att man ska kunna HTML och css innan man ger sig in på ramverk och dyligt. Värt att ha i åtanke iallafall