Tento eshop slouží pouze jako ukázka použití šablony programu Webgen.cz.
Nabídka je pouze fiktivní bez možnosti cokoliv závazně objednat.
Vyzkoušejte na svém prohlížeči co se stane pokud budete okno prohlížeče postupně zužovat. Obrázky jak vypadá tato šablona otevřená v mobilu najdete na této kartě
Šablona je postavena na frameworku Twitter Bootstrap verze 3.0.
Twitter Bootstrap je zdarma dostupný front-end framework pro snadnou tvorbu webu.
Nabízí nejrůznejší webové prvky, které snadno implementujete do své stránky.
Tlačítka, boxy, menu a další kompletně nastylované a graficky moderně zpracované elementy vložíte pouze pomocí HTML a CSS.
Alespoň základní znalost HTML a CSS je tedy nutná pro použití Bootstrapu.
Hlavní menu eshopu se skládá z nabídky /Texty/Odkazy/Horní rám/ a z /Texty/Odkazy/Levý rám/ - podmenu "Další informace". Zobrazení hlavní nabídky se mění podle velikosti prohlížeče. Na mobilním telefonu se zobrazí rozbalovací nabídka pro snadné ovládání prstem. Ukázku najdete v detailu tohoto článku.
Responzivní web design (anglicky Responsive web design) je pojem, se kterým přišel americký programátor Ethan Marcotte.
Jedná se o způsob stylování HTML dokumentu, které zaručí, že zobrazení stránky bude optimalizováno pro všechny druhy nejrůznějších zařízení (mobily, notebooky, netbooky, tablety atd.).
Především díky vlastnosti Media Queries, která je zahrnuta ve specifikaci CSS3, lze rozpoznat vlastnosti zařízení, na kterém je stránka prohlížena a přizpůsobit tak samotnou stránku a její obsah.
Flexibilní struktury se dosahuje pomocí procentních šířek. Jednotlivé šířky elementů tak nejsou zadávány v pixelech, nýbrž v procentech.
Technika flexibilních obrázků zajistí, že obrázky se budou přizpůsobovat stejně tak, jako samotná struktura. Aby tohoto bylo dosaženo, neuvádí se šířka a výška obrázku uvnitř tagu < img >
Media Queries se považují za poslední úroveň responzivní web designu. Jsou to pravidla, díky kterým lze měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení
Lorem ipsum dolor sit amet consectetuer Phasellus ipsum gravida congue suscipit. Metus fringilla et Phasellus ligula lacus Duis accumsan Cras aliquet ac. Sed diam turpis lacinia id pellentesque penatibus at.
Lorem ipsum dolor sit amet consectetuer Phasellus ipsum gravida congue suscipit. Metus fringilla et Phasellus ligula lacus Duis accumsan Cras aliquet ac. Sed diam turpis lacinia id pellentesque penatibus at.
Lorem ipsum dolor sit amet consectetuer Phasellus ipsum gravida congue suscipit. Metus fringilla et Phasellus ligula lacus Duis accumsan Cras aliquet ac. Sed diam turpis lacinia id pellentesque penatibus at.
