Boostrap

Bootstrap är det mest populära web-utvecklingsframverket. Bootstrap 3 är ett mobile-first-ramverk.

En effekt av att det är mobile-first är dess gridsystem. I gridsystemet så räknar man från minsta device. Se följande exempel:

<div class="row">
<div class="col-xs-12">
<p>Här är en kolumn per rad</p>
</div>
<div class="col-xs-12">
<p>Här är en till rad</p>
</div>

I detta exempel så defineras row med att ha ett block med 12 kolumner. xs (mobil) sm (mobil/padda) md (laptop) xs (stor skärm). Det vill säga, regeln för den minsta devicen bestämmer avgör reglerna för större divices. Om vi till exempel vill att textblocken i exemplet ovan skall ligga bredvid varandra när vi besöker hemsidan från en laptop så ändrar man till följande kod.

<div class="row">
<div class="col-xs-12 col-md-6">
<p>Här är en kolumn per rad</p>
</div>
<div class="col-xs-12 col-md-6">
<p>Här är en till rad</p>

Normalize Bootstrap

Eftersom olika browsers är byggda på olika sätt, men egna unika default-inställning kan sidor se olika ut på olika sidor. Därför är det vanligt att ha med en normalize.css-fil bland css-filerna. Dessa tar bort browserna specialinställningar.

Detta är dock inte nödvändigt om du använder bootstrap eftersom bootstrap har normalize.css inbyggt in sin css-fil.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s