Om Bootstrap

Bootstrap är ett CSS + JavaScript-bibliotek som gör responsiv layout enkel – att saker fungerar i olika skärmstorlekar.

Bootstrap · The world's most popular mobile-first and responsive front-end framework..

Dessutom ger biblioteket dig tillgång till en rad standardiserade gränssnittsdelar (menyer, dropdown-menyer grupper av knappar, boxar etc. etc.)

Gridsystem

Viktigt att förstå när man jobbar med Bootstrap är grid-systemet (som delar in sidan i kolumner, och där olika element kan kräva olika antal kolumner i olika skärmstorlekar):

Grid Template for Bootstrap.

More about the grid-template

Bootstrap 3 Grids Explained | Jetstrap Blog.

Grafiska komponenter

Lika viktigt är att förstå (och följa) Boostraps guider för hur man bygger olika grafiska element – ”komponenter” med i html:

Components · Bootstrap.

Våra mall

Du kan ladda hem vår ”rena mall” för Bootstrap nedan. Den innehåller Bootstrap-biblioteket, jQuery (som Bootstrap är beroende av) och en index.html-fil där vi läser in allt detta, samt visar hur man lämpligen ger header, main och footer-element klassen ”container” och underelement till dem klassen ”row” när man arbetar med Bootstraps kolumn/grid-system.

En ren mall för Bootstrap

bootstrap-template

Allt den gör är att ladda nödvändig CSS & JS samt ha ett minimalt HTML-ramverk för att börja lägga in Bootstrap-komponenter.

Exempel på användning av Bootstrap-komponenter

bootstrap-play

En övning i Bootstrap

Utgå från mallen och/eller exemplet ovan samt Bootstraps egen beskrivnings-/exempelsida över olika Bootstrap-komponenter:

Components · Bootstrap.

Kan du bygga ett grafiskt gränssnitt som skulle funka för en webbapplikation där man kan ta emot, skicka och söka bland inlägg i en diskussionsgrupp (alt. skicka/läsa e-post) med hjälp av Bootstrap-komponenter?

Obs! Ingen faktiskt funktionalitet krävs.

0 votes