Sida med Bootstrap

Då har jag fått lite extra tid att fördriva i sällskap med SJ, så vad passar bättre än att hacka lite kod och testa Bootstrap i praktiken (se gårdagens inlägg).

Jag använder grunden från gårdagen och sedan lägger jag till kod från de exempel som visas på hemsidan.

En meny och en ”jumbotron” till att börja med.

Skärmbild_2015-05-20_17-23-18

Lite kartor måste det också bli så i en ny ”row” skapar jag en platshållare med full bredd, eller en kolumn med bredden 12 (summan av kolumnbredder skall alltid vara 12).

Detta följs av en ny ”container”, med ”row” och sedan tre kolumner av olika bredd.

Skärmbild_2015-05-20_17-26-54

Summan av dessa kolumners bredd är också 12 (7+2+3). Genom att använda vanliga HTML-taggar för rubriker, text (<p>) och länkar så tillämpas de stilar som är förutbestämda i Bootstrap.

Det går att åsidosätta dessa med en egen ”style” tagg, vilket jag gjort för att sätta kartans höjd.

Det gick ganska snabbt att göra och det blev ganska snyggt, men den stora fördelen är att sidan är anpassad till olika plattformar och skärmstorlekar.

Skärmbild_2015-05-20_17-31-02

Menyvalen samlas under en menyknapp och mina kolumner som tidigare var jämte varandra, ligger nu över varandra. Det krävs lite kod för att menyerna skall fungera, men det är väldigt lätt att läsa källkoden i de exempel som används på webbsidan.

Vad blev det då för resultat?

Jo en liten förlängning på min ”Panorama Geodata eXtractor”, men som endast har till uppgift att visualisera var panoraman är tagna och öppna dessa i en panoramavisare, i ett eget fönster, genom att klicka på symbolen.

Skärmbild_2015-05-20_17-35-18

Nu kanske det är dags att se om det går att utveckla på något sätt. Kanske en metod för att distribuera färdiga panoraman i paket…

Vill du prova PanGeoX, som jag gjort tidigare, så kan du göra det på http://geosupportsystem.altervista.org/pangeox.

Annonser

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: