Designtervezés Bootstrapre Photoshopban? (kifejtem)

Pont úgy fog megjelenni ahogy azt HTML + CSS -be megadod.

Megtervezed a grafikát, megjelenését, majd az alapján elkészítheted annak HTML kinézetét.

Mobil <768px

Tablet ≥768px

Kis monitor ≥992px

Nagy monitor ≥1200px

Photoshop-ban 1200px széles kell, hogy legyen a grid és úgy tervezd az oszlopokhoz igazítva. 1200px-től szélesebb képernyőn úgy fog megjelenni, ahogy az 1200-asra tervezted, alatta meg úgy, ahogy majd CSS-el és HTML-el megírod.

A grid rendszereket a reszponzív tervezéshez szokás használni.

El kell döntened, hogy full fluid vagy reszponzív oldalfelépítéssel akarsz dolgozni. Egy teljesen fluid szerkezetnél is használhatod a gridet, de nagyobb felbontásoknál elég undorítóan néz ki.

A reszponzív elrendezés is használ fluid megjelenítést, de csak a 768 pixelnél keskenyebb elrendezések esetén (ld #2). E fölött a weboldal belső méretei fixek 760pixel, 900pixel, 1200pixel.

A bootstrap reszponzív grid rendszere abban ad segítséget, hogy a szélesség csökkenésével az egyes oszlopok aránya nő, így a 12-es felosztás alacsony szélességnél a felére, mobil nézet esetén pedig 1 oszlopra zsugorodik. (col-lg.. col-md.. col-sm.. col-xs..)

Reszponzív design tervezésénél ezeket a mérethatárokat kell figyelembe venni, és több (3 vagy 4) grafikai tervet is készíteni kell a megjelenésre.